@font-face {
    font-family: "Lemon";
    src: url("../fonts/LemonMilk/LEMONMILK-Regular.otf");
    font-display: swap;
}

@keyframes appear {
    0%{
        translate: 0 2rem;
        opacity: 0;
    }
    100%{
        translate: 0 0;
        opacity: 1;
    }
}
@keyframes disappear {
    0%{
        translate: 0 0;
        opacity: 1;
    }
    100%{
        translate: 0 -1rem;
        opacity: 0;
    }
}



* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{
    font-size: 16px;
}

body {
    background-color: rgb(10, 0, 0);
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
}
body.hidden{
    pointer-events: none;
}



canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    transition: opacity 1500ms;
}
body.hidden canvas{
    opacity: 0;
    transition: opacity 300ms;
}

h1{
    font-family: "Lemon";
    color: rgb(255, 220, 220);
    font-size: 5rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    white-space: nowrap;
    user-select: none;
}

span{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: appear 700ms 300ms ease-out 1 backwards;
}
span.disappear{
    animation: disappear 300ms ease-in 1 forwards;
}



@media screen and (max-width: 56rem) {
    h1{
        font-size: 4rem;
    }
}

@media screen and (max-width: 45rem) {
    h1{
        font-size: 3rem;
    }
}

@media screen and (max-width: 34rem) {
    h1{
        font-size: 2rem;
    }
}

@media screen and (max-width: 23rem) {
    h1{
        font-size: 1.5rem;
    }
}