*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
#navbar{
  position: sticky;
  top: 0;
  background-color: #F6D25A !important;
  color: black !important;
}
.nav-link:hover{
  background-color: black !important;
  color: #F6D25A !important;
}
.main-container{
  display: flex;

}
.sidebar-container{
  width: 15%;
  max-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #F6D25A;
  position: sticky;
  top: 0;

 
}

.sidebar-container  .side-item{
  
  width: 100%;
  list-style: none;
  text-decoration: none;
  color: black;
  margin-top: 1px solid black;
  margin-bottom: 1px solid black;
  
}
.sidebar-container  .side-item:hover{
    background-color: black;
    color: #F6D25A;
    transition-duration: 0.3s;
}
.sidebar-container  .side-item:focus{
    background-color: black;
    color: #F6D25A;
    transition-duration: 0.3s;
}
.section-container{
  width: 100%;
 
  display: flex;
  flex-direction: column;
  
}
.section-container .one{
  min-height: 100vh;
  background-color: salmon;
  text-align: center;
  padding-top: 50vh;
  
}
.section-container .two{
  min-height: 100vh;
  background-color: salmon;
  text-align: center;
  padding-top: 50vh;


}
.section-container .three{
  min-height: 100vh;
  background-color: salmon;
  text-align: center;
  padding-top: 50vh;

}













@media (min-width:770px){
  .sidebar-container{
    display: block;
  }
  #navbar{
    display: none;
  }
}
@media (max-width:770px){
  #navbar{
    display: block;
  }
  .sidebar-container{
    display: none;
  }
}