.sidebar{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  flex: 0 0 12%;
  min-height:100vh;
  box-shadow: 5px 0 10px grey;
  background-color: #333;
  .divider{
    height: 2px;
    width: 100%;
    background-color: dimgray;
    margin: 12px 0 ;
  }
  &-logo{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  &-header{
    img{
      width: 100%;
    }
  }
  a{
    text-decoration: none;
    &.active{
      background-color: white;
      border-radius: 5px;
      color: dimgray;
      box-shadow: 3px 3px 3px grey;
    }
  }
  &-content{
    width: 90%;
    p{
      color: #313131;
      font-weight: 800;
      font-size: 1.2em;
      width: 100%;
      text-align: center;
      background-color: white;
      border-radius: 0 6px;
    }
    & ul{
      padding-left: 0;
      & li {
        list-style: none;
        &.active{
          background-color: rgba(255,255,255,0.5);
          border-radius: 3px;
          a{
            color: #313131;
            font-weight: 500;
          }

        }
        & a{
          padding:0.5rem 1.5rem;
          font-size: 1.1em;
          display: block;
          color:white;
          &:hover{
            color: #313131;
            background-color: rgba(255,255,255,0.5);
            border-radius: 3px;
          }
        }
      }
    }
  }
}