menu-bar {
    display: flex;
    flex-direction: column;
    flex: 20%;
}


body,.collapsible,a {
   font-family: 'Inconsolata';
    color: rgb(22, 22, 22);

}

section{
    display: flex;
}



@media screen and (max-width: 800px) {
section{
    display: flex;
    flex-direction: column;

}




}


.menu{
    margin-top: 40px;
}


.menu.a{
    flex: 20%;
    height: max-content;
    
}

li,.collapsible{
    list-style: none;
    text-decoration: none;
    padding: 5px;
    font-size: 15px;
}

a{
    text-decoration: none;
  
}

.menu.b{
    margin-left: 20px;
    margin-bottom: 20px;
    margin-right: 20px;
    
    flex: 80%;
    height: max-content;
    
}







.gallery img{
    margin: 2px;
   
}

.gallery.mobile{
    display: none;
}

.video.mobile{
    display: none;
}


@media screen and (max-width: 800px) {
    
.gallery.computer{
    display:none;
}

.video.computer{
    display: none;
}

.gallery.mobile{  
    margin: 0px;
    display: inline-block;
    }

.video.mobile{
    margin: 0px;
    display: inline-block;
}


}



li:hover,.collapsible:hover,a:hover{
   font-size: 102%;
   color: rgb(123, 123, 123);
}


.collapsible {
    background: none;
    cursor: pointer;
    border: none;
    
  }
  
 
  
 
  
  .content {
    margin-left: 10px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
        
  }