:root {
    --navbar-background-color: #f2f2f2;
    --navbar-item-hovered-color:white;
    --navbar-separator-color:#ececec;
    --navbar-icon-color:#646c79;
    --navbar-text-color:black;
    --navbar-transition-speed: .2s;
    --primary-color:$color-8;
    --navbar-logo-background-color:#e2dfe4;
  }
  
  html, body {
    margin:0;
    font-family: 'Source Sans Pro';
    font-size:16px;
  }
  
  main {
    padding: 1rem 4rem;
    margin-left: 5rem;
    display: flex;
    flex-direction: row;
    justify-content: center;
  }

  .RightBar{
    width: 20%;
  }
  
  .navbar {
    width:5rem;
    position:fixed;
    top:0px;
    left:0px;
    bottom:0px;
    background:var(--navbar-background-color);
    box-shadow: rgba(12,43, 30, 0.2) 0 4px 14px;
    transition: width var(--navbar-transition-speed) ease;
    z-index: 11;
  }
  
  .navbar:hover {
    width:15rem;
  }
  
  .navbar-menu {
    list-style: none;
    padding:0;
    margin:0;
    display:flex;
    flex-direction: column;
    align-items: center;
    height:100%;
  }
  
  .navbar-item {
    width: 100%;
    border-bottom:solid 1px var(--navbar-separator-color);
    transition: background-color var(--navbar-transition-speed);
  }
  
  .navbar-item:hover {
    background-color:var(--navbar-item-hovered-color);
  }
  
  .navbar-item:last-child {
    margin-top:auto;
  }
  
  .navbar-link {
    display:flex;
    align-items: center;
    justify-content: flex-start;
    height:5rem;
    width:100%;
    text-decoration: none;
  }
  
  .navbar-icon {
    text-align: center;
    font-size: 1.5rem;
    min-width: 2rem;
    margin: 0 1.5rem;
    color:var(--navbar-icon-color);
    transition:var(--navbar-transition-speed);
  }
  
  .navbar-item:hover .navbar-icon {
    color:var(--primary-color);
  }
  
  .navbar-title {
    color:var(--navbar-text-color);
  }
  
  .navbar:not(:hover) .navbar-title {
    display:none;
  }
  
  .logo {
    background:var(--navbar-logo-background-color);
  }
  
  .logo .navbar-title {
    font-size:1.5rem;
    font-weight:bold;
    margin-left:1.5rem;
  }
  
  .navbar:hover .logo .navbar-icon {
    transform:rotate(180deg);
  }
  
  /*
  ** RESPONSIVE
  */
  
  @media only screen and (max-width:1024px) {
    .navbar {
      top:auto;
      width:100%;
      bottom:0px;
    }
  
    .navbar:hover {
      width:100%;
    }
  
    .navbar-menu {
      flex-direction: row;
    }
  
    .logo {
      display:none;
    }
  
    main {
      margin-left:0;
      margin-bottom:5rem;
    }
  
    .navbar:hover .navbar-title {
      display:none;
    }
  
    .navbar-icon {
      min-width:auto;
      margin:0;
    }
  
    .navbar-link {
      justify-content: center;
    }
  }