body {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    height: 100dvh;
    width: 100dvw;
}

@font-face {
    font-family: 'tbFont';
    font-style: normal;
    font-weight: 400;
    src: url(/assets/fonts/Phosphate.ttf);
}

/************** SPINNER ********************/

#spinwrap{
    height: 100dvh;
    width: 100dvw;
    display: flex;
    justify-content: center;
    align-items: center;
}
#spinner {
    height: 20vh;
    padding: 0 4dvw;
    border-radius: 20px;
    background: linear-gradient(304deg, rgba(0, 0, 0, 0.619), rgba(68, 68, 68, 0.877));
    display: flex;
    align-items: center;
    -webkit-box-shadow: 7px 12px 20px -2px rgba(226, 226, 226, 0.66);
    -moz-box-shadow:    7px 12px 20px -2px rgba(226, 226, 226, 0.66);
    box-shadow:         7px 12px 20px -2px rgba(226, 226, 226, 0.66);
}
.tb{
    display: flex;
}
.letter{
    font-family: tbFont;
    font-size: clamp(2rem, 0.72rem + 6.4vw, 6rem);
    color: red;
    --timing: 2s;
}

.one {
    mix-blend-mode: lighten;
    animation: slide1 var(--timing) linear infinite ; 
}
.two {
    mix-blend-mode: lighten;
    animation: slide2 var(--timing) 0.15s linear infinite ; 
}
.three {
    mix-blend-mode: lighten;
    animation: slide3 var(--timing) 0.3s linear infinite ; 
}


@keyframes slide1 {
    25% { 
        transform: translateY(60px); 
        color: red;
    }
    50% {color: orange;}
    75% { 
        transform: translateY(-50px);
        color: yellow;
    } 
}

@keyframes slide2 {
    25% { 
        transform: translateY(-65px); 
        color: yellow;
    }
    50% {color: green;}
    75% { 
        transform: translateY(+50px);
        color: rgb(97, 97, 255);
    } 
}
@keyframes slide3 {
    25% { 
        transform: translateY(40px); 
        color: rgb(97, 97, 255);
    }
    50% {color: blue;}
    75% { 
        transform: translateY(-55px);
        color: purple;
    } 
}