*{
    margin: 0;
}
body{
    width:100vw;
    height:100vh;
    background-color: #303F49;
    margin: 0;
    position: absolute;
    z-index: 0;
    left: 0;
    top:0;
    overflow: hidden;
}

#quote{
    color:#D6DFE2;
    position: absolute;
    z-index: 1;
    left: 5.25vw;
    top: 39vh;
    width:51vw;
}

#photo{
    width:40vw;
    height:85vh;
    position: absolute;
    right:0;
    top:5.5vh;
    z-index:1;
    object-fit: fill;
    overflow: hidden;
}
#overlay{
    width: 100vw;
    height:100vh;
    position: absolute;
    left:0;
    top:0;
    z-index: 2;
}
#name{
    color: #303F49;
    position: absolute;
    left:5.25vw;
    top:7vh;
    z-index: 3; 
}
h1{
    font-size: 9vw;
    font-family: "Aeternus Tall";
    letter-spacing: .1vw;
    font-weight: 400;
}
h2{
    font-size: 4vw;
    font-family: "ITC Souvenir Std Light";
    font-weight: lighter;
}
h3{
    font-size: 1vw;
    font-family: "Ruston Basic SemiBold Expanded";
    margin-top: -1vw;
}
.container{
    display:inline-block;
}
#question{
    font-size: 1.25vw;
    color: #ED7726;
    position: absolute;
    z-index: 1;
    left: 5.25vw;
    top: 86vh;
    font-family: "Ruston Basic SemiBold Expanded";
    white-space: nowrap;
    overflow: hidden;
}

@font-face {
    font-family: "Aeternus Tall";
    src: url('../assets/fonts/02\ aeternus\ tall\ variable\ weightitalic\ VF.ttf');
}

@font-face {
    font-family: "Ruston Basic SemiBold Expanded";
    src: url('../assets/fonts/RustonBasic-SemiBoldExpanded.otf');
}

@font-face {
    font-family: "ITC Souvenir Std Light";
    src: url('../assets/fonts/SouvenirStd-Light.otf');
}
.fadeout{
    animation:1s fadein reverse ease-out;
}
.nameFader{
    animation: 2s fadein;
}
.quoteGrower{
    animation: 1s grow;
}
.pictureBounce{
    animation: 1s bounce;
}
@keyframes fadein {
    from{
        opacity:0;
    }
    to{
        opacity:100;
    }
}
@keyframes typer {
    from{
        width:0;
    }
    to{
        width:100%;
    }
}

@keyframes grow {
    0%{
        scale:0%;
        -webkit-transform: scale(0,0);
    }
    75%{
        scale:125%;
        -webkit-transform: scale(1.25,1.25);
    }
    100%{
       scale:100%;
       -webkit-transform: scale(1,1);
    }

}

@keyframes bounce {
    0%{
        translate:40vw;
        -webkit-transform: translate(40vw,0);
    }
    75%{
        translate:-5vw;
        -webkit-transform: translate(-5vw,0);
    }
    100%{
       translate:0vw;
       -webkit-transform: translate(0,0);
        
    }
}