@import url('https://fonts.googleapis.com/css2?family=Cutive+Mono&display=swap');

:root {
    --background: black;
    --primary-text-color: blue;
    --primary-text-border: purple;
    --secondary-text-color: rgb(80, 53, 5);
    --tertiary-text-color: orangered;
    --quaternary-text-color:rgb(199, 16, 147);
    --quinary-text-color:green;
    --senary-text-color:red;
}

body {
    background-color: var(--background);
    font-family: Cutive Mono;
    margin: 0;

}

main {
    min-height: 100dvh;
    color: var(--primary-text-color);
    -webkit-text-stroke: 0.3vh;
    -webkit-text-stroke-color: var(--primary-text-border);
    display: flex;
    justify-content: center;
    align-items: flex-end;
    

    h1 {
        animation: soon 0.5s infinite;
        font-size: 14.5vw;
        white-space: nowrap;
        display: inline;
        margin: 0;
        user-select: none;
    }
}


@keyframes soon {

    0% {

        -webkit-text-stroke-color: var(--senary-text-color);
        color: var(--quinary-text-color);
    }

    25% {
        color: var(--background);
    }

   

    45% {
        color: var(--quaternary-text-color);
    }

    75% {
         color: var(--background);
    }

    95%{
        color: var(--tertiary-text-color);
    }

    100% {
        -webkit-text-stroke-color: var(--primary-text-border);
        color: var(--primary-text-color);
    }

}