@font-face {
    src: url("Roboto-Regular.ttf");
    font-family: Roboto;
}

body {
    background: black;
}

.main {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 0;
    color: white;
}

#main-text {
    font-family: Roboto;
    font-size: 32pt;
    opacity: 0;
    animation: animation 30s infinite linear, fade-in 3s forwards linear;
}

#main-subtext {
    font-family: Roboto;
    font-size: 18pt;
    opacity: 0;
    animation: fade-in 3s forwards linear;
    animation-delay: 500ms;
}

@keyframes animation {
    0% { color: royalblue }
    25% { color: cornflowerblue }
    50% { color: dodgerblue }
    75% { color: lightblue }
    100% { color: royalblue }
}

@keyframes fade-in {
    0% { opacity: 0 }
    100% { opacity: 1 }
}