@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);
}

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

}

main {
    height: 100vh;
    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;
    }
}


@keyframes soon {

    0% {

        -webkit-text-stroke-color: red;
        color: green;
    }

    25% {
        color: black;
    }

   

    45% {
        color: rgb(199, 16, 147);
    }

    75% {
         color: black;
    }

    95%{
        color: orangered;
    }

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

}