@keyframes nav_opening {
    0% {
        background-color: rgba(0,0,0,0);
        top:-3.5rem;
    }
    0% {
        background-color: rgba(0,0,0,0);
        top:-3.5rem;
    }
    100% {
        top:0rem;
    }
}

@keyframes name_opening {
    0% {
        opacity: 0;
    }
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

body > header{
    position: relative;
    animation-name: nav_opening;
    animation-duration: 4s;
    background-color: rgba(0, 0, 0, 0);
}

#banner{
    margin-top:-3.5rem;
    width:100vw;
    height:100vh;
    overflow: hidden;
    color:white;
}

#banner_name{
    position: absolute;
    bottom: 10vh;
    height:20vh;
    width:40vw;
    left:30vw;
    text-align: center;
    animation-name: name_opening;
    animation-duration: 4s;
}

@media screen and (max-width: 800px){
    #banner_name{
        width:95vw;
        left:2.5vw;
    }
}
#banner_name hr{
    margin-top: 2rem;
    margin-bottom: 1rem;
}
#banner_background{
    position: absolute;
    left: 0px;
    top: 0px;
    z-index: -1000;
    width:100vw;
    height:100vh;
    filter:brightness(.5);
    background-image: url('/img/opening.jpg');
    background-size:cover;
    background-position: center center;
}
#banner_content{
    z-index: 5;
    margin-top:-100vh;
    width:100vw;
    height:100vh;
    overflow: hidden;
}