html { /* handles coloring */
    background-color: #222;
    color: #FFF;
}

body { /* hides the scrollbar, makes it look prettier! */
    overflow-y: hidden;
}

@keyframes CoreAnimation { /* some cool start animation, uses weird animation tricks */
    0% { /* initial state */
        padding-top: 10dvh;
        opacity: 0%;
        filter: blur(64px);
    }

    25% { /* make the text stay there */
        opacity: 100%;
        padding-top: 0dvh;
        filter: blur(0px);
    }

    50% { /* 100% visible now */
        opacity: 100%;
        line-height: 100dvh;
        filter: blur(0px);
    }

    75% {
        opacity: 0%;
        filter: blur(64px);
    }

    100% {
        line-height: 70dvh;
        opacity: 0%;
    }
}

#red {
    color: #F44;
}

h1 { /* weird tricks, explained below */
    font-family: 'Times New Roman', Times, serif; /* times new roman looks nice */
    text-align: center; /* aligns text to center horizontally */
    line-height: 100dvh; /* align text to center vertically */
    height: 100%; /* make h1 take all the space possible */
    font-size: 12.5dvw; /* bigger text */
    animation: CoreAnimation 4s infinite linear; /* play the animation */
    user-select: none; /* dont make the text selectable */
}