@font-face {
    font-family: 'Radio';
    src: url(Media/Fonts/Radio.ttf);
}

@font-face {
    font-family: 'Ray';
    src: url(Media/Fonts/Ray.ttf);
}

body {
    max-height: 100vh;
    background-color: var(--color-finlandia-950);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

#midsec {
    font-size: clamp(0.6rem, 4vw, 1rem);
    background-color: var(--color-finlandia-900);
    padding: 1rem;
    border: 2px dotted var(--color-finlandia-600);
    border-radius: clamp(15px, 4vw, 25px);
    opacity: 0;
    transform: translateY(40px);
    animation: heroEnter 0.9s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

:root {
    --color-finlandia-50: #f8fbf9;
    --color-finlandia-100: #f3f6f4;
    --color-finlandia-200: #e5e9e2;
    --color-finlandia-300: #d2d9ce;
    --color-finlandia-400: #a0ad99;
    --color-finlandia-500: #6e7e66;
    --color-finlandia-600: #586954;
    --color-finlandia-700: #3c4838;
    --color-finlandia-800: #272c21;
    --color-finlandia-900: #181f14;
    --color-finlandia-950: #0a0e07;
}

h1 {
    font-family: 'Radio';
    color: var(--color-finlandia-200);
    text-align: center;
    text-shadow: 0 0 31px var(--color-finlandia-100);

}

h2 {
    font-family: 'Ray';
    color: var(--color-finlandia-200);
    text-align: center;
    direction: rtl;
    text-shadow: 0 0 31px var(--color-finlandia-100);
}

@keyframes heroEnter {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }

    60% {
        opacity: 1;
        transform: translateY(-12px);
    }

    80% {
        transform: translateY(4px);
    }

    100% {
        transform: translateY(0);
        opacity: 1;
    }
}