/* Reset basic margins and padding */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    background-color: #20262e;
    font-family: Arial, sans-serif;
    line-height: 2;
    scrollbar-gutter: stable;
    max-width:100%;
}

/* Header Styling */
.wrapper{
    background-color: #20262e;
    width:100%;
}
.mode{
    display:flex;
    justify-content: center;
    align-items: center;
}
.header-bar{
    position:sticky;
    top:0;
    z-index: 10;
    background-color:#2a323d;
    max-width: 100%;
    color:white;
    text-align: center;
    padding-left:2px;
    padding-right:2px;
    border-bottom: 5px solid black; 
}
.header-bar h1{
    font-size: clamp(0.1em, 5vw, 3em);
    white-space: nowrap;
    overflow-y: auto;        
}
.nav-bar{   
    
    display: flex;
}
#menu{
    display:none;
}
.just-left{
    display:block;
    align-items: flex-start;
}
.just-right{
    margin-left: auto;
    display:flex;     
}
.nav-link{
    color:white;    
    padding-left: 1rem;
    padding-right: 1rem;
}
.nav-bar a{
text-decoration: none;
}
.nav-bar a:hover{
    text-decoration: underline;
    text-decoration-color: white;

}
.nav-link:hover{
    /*background-color:#526277;*/
    font-weight: bold;
}

.lower{    
    display:flex;
    flex-direction: row;    
    padding: 2em 0em;
    
}
.left{
    position: sticky;
    z-index: 10;
}
.left-bar{

    z-index: 10;
    background-color:#2a323d;
    margin-bottom: 2em;
    width:15rem;
    white-space: nowrap;
    color:white;
    padding-bottom: 1rem;
    border-color:black;
    border-top-style: solid;
    border-right-style: solid;
    border-bottom-style: solid;
    border-width: 1px;
    border-radius: 0px 25px 25px 0px;
    padding-left:6px;
    box-shadow: 10px 10px 10px black;
}
.left-bar a{
        text-decoration:none;
        color: white;
}
.left-bar a:hover{
        font-weight:bold;
}
.minor {
        line-height:1;
        padding: 0px 25px 0px 25px;
        list-style-type: none;
        font-size: 0.9em;
}
.minor-li{
    padding-top:0px;
}
.major {
    line-height:1;
    font-size: 1.2em;
    list-style-type: none;
}
.major-li{
    padding-top:25px;
}
.content{
    color:white;
    padding: 0rem 2rem;
    width:100%;
    display:flex;
    flex-wrap: wrap;
}
.top-nav-menu{
    display:none;
    
}
.top-nav-item {
    text-decoration: none;
    color:white;
    
}
.table{
    border-collapse: collapse;
}
.table th, .table td{
    padding: 0em .5em;
    border: 1px solid white;
}

option{
    text-align: center;
}
.modal{
    display:none;
}
.Menu-Modal-Content{
    display:flex;
    flex-direction:column;
    flex-grow: 1;
    padding: 0em 1em;    
}
.Menu-Modal-Content a{
    color:white;
    text-decoration: none;
}

.Menu-Modal-Box{
    width: 90%;
    max-width:350px;
}
.menu-modal-item{
    display:flex;
    justify-content: center;
    font-size:x-large;
    width:100%;
}

@media only screen and (max-width: 768px) {
  .nav-link{
    display:none;
  }
  .just-left{
    display:flex;
  }

    #menu{
    display: block;
  }
    #auth{
        display:block;
    }

  .left-bar{
    display:none;
  }
}