@font-face { font-family: lexend-exa; src: url(src/fonts/lexend-exa.ttf); }
* { font-family: lexend-exa; color: #ffffffA0; }

body
{
    background: #0E0E14FF;
    background-image: url(src/icons/grid-pattern.png);
    background-size: 32px 32px;
    image-rendering: pixelated;
    margin: 0;
    overflow-x: hidden;
}

h1
{
    position: relative;
    width: 100vw; height: fit-content;
    margin: 0;
    left: 0; top: 50vh;
    translate: 0 -50%;
    text-align: center;
    font-size: min(16vw, 4em);
    margin-bottom: 1em;
    margin-top: -2em;

    background-image: linear-gradient(90deg, rgb(127, 255, 206) 30%, #7F8FFF 70%);
    background-clip: text;
    background-size: cover;
    color: #ffffff90;

    animation: fade 1s ease-in-out;
}

@keyframes fade
{
    0% { opacity: 0; }
    100% { opacity: 1; }    
}

a
{
    position: relative;
    width: fit-content; height: fit-content;
    display: block;
    
    margin: 0;
    left: 50vw; top: 50vh;
    translate: -50% -50%;
    text-align: center;
    font-size: min(8vw, 2em);
    cursor: pointer;
    padding: 1em;

    background-color: #000000;
    background-image: linear-gradient(70deg, rgb(127, 255, 206, .7) 0%, #7F8FFFA0 100%);
    background-size: cover;
    border-radius: 1em;

    transition: filter 70ms ease-out;
    text-decoration: none;

    animation: fade 1s ease-in-out .5s;
    animation-fill-mode: both;
}
a:hover
{
    filter: brightness(1.3);
}