body {
    margin: 0;
}

canvas {
    display: block;
}

h1 {
    position: absolute;
    top: 40%;
    width: 100%;
    text-align: center;
    z-index: 1;
    display: block;
    color: black;
    font-size: 4rem !important;
    font-weight: 900 !important;
}

@media (max-width: 425px) {
    h1 {
        font-size: 3.5rem !important;
    }
}

span {
    margin: -0.2rem;
}

.letter1 {
    animation-timing-function: ease-in;
    animation-name: letter1;
    animation-duration: 2s;
    opacity: 0;
}

.letter2 {
    animation-timing-function: ease-in;
    animation-name: letter2;
    animation-duration: 2s;
    opacity: 0;
}

.letter3 {
    animation-timing-function: ease-in;
    animation-name: letter3;
    animation-duration: 2s;
    opacity: 0;
}

.letter4 {
    animation-timing-function: ease-in;
    animation-name: letter4;
    animation-duration: 2s;
    opacity: 0;
}

.letter5 {
    animation-timing-function: ease-in;
    animation-name: letter5;
    animation-duration: 2s;
    opacity: 0;
}

.letter6 {
    animation-timing-function: ease-in;
    animation-name: letter6;
    animation-duration: 2s;
    opacity: 0;
}

.letter7 {
    animation-timing-function: ease-in;
    animation-name: letter7;
    animation-duration: 2s;
    opacity: 0;
}

.letter8 {
    animation-timing-function: ease-in;
    animation-name: letter8;
    animation-duration: 2s;
    opacity: 0;
}

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

@keyframes letter2 {
    0% {
        opacity: 0;
    }
    12.5% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes letter3 {
    0% {
        opacity: 0;
    }
    25% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes letter4 {
    0% {
        opacity: 0;
    }
    37.5% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes letter5 {
    0% {
        opacity: 0;
    }
    50% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes letter6 {
    0% {
        opacity: 0;
    }
    62.5% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes letter7 {
    0% {
        opacity: 0;
    }
    75% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes letter8 {
    0% {
        opacity: 0;
    }
    87.5% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}