@media (max-width: 800px) {
    .welcome-title::before {
        content: "Vroxeria's Story";
        animation: welcome_title 5s steps(11) infinite;
        font-family: PixelGame;
        font-size: 80px;
        padding-top: 20px;
        color: #040a5f;
    }
}

@media (min-width: 801px) {
    .welcome-title::before {
        content: "Vroxeria's Story";
        animation: welcome_title 5s steps(11) infinite;
        font-family: PixelGame;
        font-size: 180px;
        padding-top: 20px;
        color: #040a5f;
    }
}

@keyframes welcome_title {
    10%, 100% {
        color: #020a94;
    }
    20%, 90% {
        color: #0800ff;
    }

    30%, 80% {
        color: #0044ff;
    }

    40%, 70% {
        color: #0080ff;
    }

    50%, 60% {
        color: #008cff;
    }
}

.welcome-text::before {
    content: "";
    animation: welcome_message 30s steps(11) infinite;
    font-family: Sddystopian;
    font-size: 50px;
    margin-bottom: 60px;
    padding-bottom: 60px;
}

@keyframes welcome_message {

    50%,
    51%,
    52%,
    53%,
    54% {
        content: " ";
    }

    0%,
    49% {
        content: "Y";
    }

    1%,
    48% {
        content: "Yo";
    }

    2%,
    47% {
        content: "You";
    }

    3%,
    46% {
        content: "Your";
    }

    4%,
    45% {
        content: "Your ";
    }

    5%,
    44% {
        content: "Your d";
    }

    6%,
    43% {
        content: "Your da";
    }

    7%,
    42% {
        content: "Your day";
    }

    8%,
    41% {
        content: "Your day,";
    }

    9%,
    40% {
        content: "Your day, ";
    }

    10%,
    39% {
        content: "Your day, y";
    }

    11%,
    38% {
        content: "Your day, yo";
    }

    12%,
    37% {
        content: "Your day, you";
    }

    13%,
    36% {
        content: "Your day, your";
    }

    14%,
    35% {
        content: "Your day, your ";
    }

    15%,
    35% {
        content: "Your day, your a";
    }

    16%,
    34% {
        content: "Your day, your ad";
    }

    17%,
    33% {
        content: "Your day, your adv";
    }

    18%,
    32% {
        content: "Your day, your adve";
    }

    19%,
    31% {
        content: "Your day, your adven";
    }

    20%,
    30% {
        content: "Your day, your advent";
    }

    21%,
    29% {
        content: "Your day, your adventu";
    }

    22%,
    28% {
        content: "Your day, your adventur";
    }

    23%,
    24%,
    25%,
    26%,
    27% {
        content: "Your day, your adventure";
    }
}