@charset "utf-8";
/* CSS Document */

body{
    margin: 0px;
    overflow: hidden; 
    background-color: #b9b9b9;
}

#vid video{
    position: absolute;
    min-width: 104%;
    margin-left: -2%;
    opacity: 0.5;
    z-index: 1;
    
}

#name {
    width: 100vw;
    height: 20vh;
    margin-top: 0px;
    background-image: url(links/name.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position: absolute;
}


#sub{
    z-index: 2;
    bottom: 4vh;
    position: absolute;
    width: 100vw;
    height: 10vh;
    background-image: url(links/gs.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0.8;
    
    animation-name: subanimation;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out	;

}

@keyframes subanimation{
    0% {transform: translate(0px, 0px);}
    50% {transform: translate(0px, -12px);}
    100% {transform: translate(0px, 0px);}
}

#cat {
    height: 38vh;
    width: 50vh;
    position: absolute;
    
    left: 55%; 
    bottom: 0;
    transform: translate(-45%, 0%);
    
    background-image: url(links/Catboii.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    
    animation-name: catanimation;
    animation-duration: 4.5s;
    animation-timing-function: ease-out;
}

@keyframes catanimation{
    0% {bottom: -100vh}
    70% {bottom: -100vh}
    100% {bottom: 0}
}

#toon{
    height: 83vh;
    width: 100vh;
    position: absolute;
    
    left: 50%; 
    bottom: 0;
    transform: translate(-50%, 0%);
    
    background-image: url(links/toon.png);
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
    
    animation-name: toonanimation;
    animation-duration: 3s;
    animation-timing-function: ease-out;
}

@keyframes toonanimation{
    0% {transform: translate(-300%, 0%);}
    40% {transform: translate(-300%, 0%);}
    100% {transform: translate(-50%, 0%);;}
}