#navbar{
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: rgb(226, 226, 226);
    width: 100vw;
    height:8rem;
    border-bottom:1px solid black;

    min-width: 40em;

    padding-left: 2rem;
    padding-right: 2rem;

    position:fixed;
    top:0;
    left:0;
    right:0;
    z-index:1000;

    overflow:hidden;

    transition: height 0.5s ease-in-out, transform 0.5s ease;
}
#navbar.hidden{
    transform: translateY(-100%);
    transition: transform 0.5s;
}
#navbar.open{
    height:60rem;
}

#menu-button{
    position: relative;
    flex-shrink: 0;                   
    height: 3rem;
    width: 3rem;
    margin:3rem;
    transition:transform 0.5s ease-in-out;
}
#menu-button:hover{
    transform: scale(1.5);
    transition: transform 0.5s ease-in-out;
}
.slideshow-wrapper{
    height:25rem;
    width:100%;
    overflow: hidden;
    padding-top:1rem;
    padding-bottom:1rem;
    border-top:0.1rem solid black;
    border-bottom:0.1rem solid black;
    flex: 0 0 auto;
}
#slideshow-strip{
    display: flex;
    height:25rem;
    width:fit-content;
}
.slideshow-picture{
    border-left: 0.5rem solid black;
    height:100%;
    width:50rem;
    object-fit: cover;
    object-position: center;
    display: block;
    flex-shrink: 0;
}
#main-menu{
    box-sizing: border-box;
    height:0;
    background-color: rgb(238, 238, 238);
    border: 2px solid black;
    padding-right:1cm;
    padding-left:1cm;
    padding-top: 0cm;
    padding-bottom:0cm;
    transition: all 0.5s ease-in-out;
    transform: translateY(-20rem);
}
#main-menu.open{
    height:40rem;
    padding-top: 1cm;
    padding-bottom:1cm;
    transition: all 0.5s ease-in-out;
    transform: translateY(0);
    margin-bottom: 5rem;
    background-color: rgb(238,238,238);
}
#hamburger-top{
    transform:
        translate(-50%,0.5rem);
    transition: all 0.5s ease-in-out;
}
#hamburger-bottom{
    transform: 
        translate(-50%,-0.5rem);
    transition: all 0.5s ease-in-out;
}
#hamburger-top.open{
    transform:
        translate(-50%,-50%)
        rotate(calc(360deg + 45deg));
    transition: all 0.5s ease-in-out;
}
#hamburger-bottom.open{
    transform: 
        translate(-50%,-50%)    
        rotate(calc(360deg + 45deg + 90deg));
    transition: all 0.5s ease-in-out;
}
ul{
    line-height: 2rem;
}