html {
    font-size: 14px;
    background-color: #262a2d;
    scroll-behavior: smooth;
  }
  
  @media (min-width: 768px) {
    html {
      font-size: 16px;
    }
  }
  
  html {
    position: relative;
    min-height: 100%;
  }
  body {
    margin:0px;
  }
  #contentarea {
    position: relative;
    
    width:80vw;
    margin-left:12vw;
    padding: 50px;
  }
  #navigation {
    position: sticky;
    float:left;
    left:0px;
    top:0px;
    display:flex;
    flex-direction: column;
    background-color: #1C1F21;
    text-align: center;
    justify-content: space-evenly;
    align-content: center;
    height:100vh;
    width:12vw;
    transition: background-color 500ms;
    overflow-wrap: anywhere;
  }
  #navbod:hover{
    background-color: #1C1F21;
  }
  .material-symbols-outlined {
    font-size:50px !important;
  }
  
  #progbar {
    width:24vw;
    height:5px;
    margin:auto;
    border-radius: 5px;
    background-color:#B4D2E7;
    opacity:30%;
    overflow: show;
    position:sticky;
    top:calc(8vh + 28px);
  }
  
  .page-section{
    display:flex;
    justify-content: center;
    align-items: center;
    height:50px;
    font-family: 'Lato';
    font-size: 25px;
    color:#B4D2E7;
    opacity:30%;
    transition: color 500ms;
    transition: opacity 500ms;
    padding:17px;
  }
  .page-section:hover{color:#EFC88B;opacity:99%;}
  .page-section:hover > #sep{
    height:25px;
  }
  .page-section:hover > #exp  {
    width:145px;
  }
  .page-section:hover > #sk  {
    width:80px;
  }
  .page-section:hover > #ho  {
    width:88px;
  }
  .page-section:hover > #co  {
    width:110px;
  }
  
  .page-section.active {
    color:#EFC88B;opacity:99%;background-color: #262a2d;
  }
  .page-section.active > #sep{
    height:25px;
  }
  .page-section.active > #exp  {
    width:145px;
  }
  .page-section.active > #sk  {
    width:80px;
  }
  .page-section.active > #ho  {
    width:88px;
  }
  .page-section.active > #co  {
    width:110px;
  }
  #sep {
    width:2px;
    border-radius: 5px;
    height:0px;
    transition: height 500ms;
    margin-left:3px;
  }
  .page-label{
    position: relative;
    overflow:hidden;
    width: 0px;
    transition: width 600ms 500ms;
  }