body{
    background-color: black;
    overflow-x: hidden;
}
.special-gothic-expanded-one-regular {
    font-family: "Special Gothic Expanded One", sans-serif;
    font-weight: 400;
    font-style: normal;
}
.bebas-neue-regular {
    font-family: "Bebas Neue", sans-serif;
    font-weight: 400;
    font-style: normal;
    word-spacing: 50px;
}

.playfair-display-pfd {
    font-family: "Playfair Display", serif;
    font-optical-sizing: auto;
    font-weight: 650;
    font-style: normal;
}
.title{
    transition: 1s ease-in-out;
    animation: titleAnimation 1s ease-in-out;
}
.title_ending{
    transition: 1s ease-in-out;
    animation: titleAnimation2 1s ease-in-out;
}
.cascade-char{
    display: inline-block;
    will-change: transform;
    animation: letterFall 1.5s cubic-bezier(.22,.61,.36,1) forwards;
}

#thing{
    transition: width 0.3s ease-in-out;
}

#ending{
    color:black;
    animation: temp 5s ease-in-out;
    animation: infinite ending2 16s;
}
@keyframes letterFall {
    0%   { 
        transform: translateY(0) rotate(0deg);
        opacity: 1;
    }
    100% { 
        transform: translateY(120vh) rotate(15deg);
        opacity: 0.8;
    }
}

@keyframes titleAnimation {
    0% {
        transform: translateX(-1000px) skewX(25deg);
    }
    100% {
        transform: translateX(0) skewX(0deg);
        font-style: normal;
    }
}

@keyframes titleAnimation2 {
    0% {
        transform: translateX(2000px) skewX(-50deg);
    }
    100% {
        transform: translateX(0) skewX(0deg);
        font-style: normal;
    }
}
@keyframes temp {
    
}
@keyframes ending2 {
    0%{
        color:black
    }
    10%{
        color:blue;
    }
    20%{
        color:black;
    }
    30%{
        color:greenyellow;
    }
    40%{
        color:black;
    }
    50%{
        color:coral;
    }
    60%{
        color:black;
    }
    70%{
        color:violet;
    }
    80%{
        color:black;
    }
    90%{
        color:burlywood;
    }
}