player-project/src/styles/Sidebar.scss

@import './adaptivefont.scss';

.sidebar {
    background-color: #1e1d45;
    width: 30%; 
    overflow:auto;
  
    &__link {
      @include adaptive-font(20, 12);
      //font-size: medium;
      display: block;
      text-decoration: none;
      border-left: 5px solid #05f09b;
      background-color: #100d23;
      color: #05f09b;
      margin: 5px;
      padding: 5px;
  
      &:hover {
        background-color: #323151;
      }
    }
  
    &__button {
      //font-size: medium;
      @include adaptive-font(20, 12);
      width: 100%;
      border-style: none;
      padding: 10px;
  
      &:active {
        background-color: #05f09b;
        color: #0e6147;
      }
    }
  
    &__addpanel {
      display: flex;
      width: 95%;
      margin: 0 auto;
      border: 1px solid #05f09b;
      padding: 0.5%;
      
      input {
        @include adaptive-font(20, 12);
        //font-size: medium;
        outline: none;
        background-color: transparent;
        width: 80%;
        color: #05f09b;
        border-style: none;
      }
  
      .btnWrapper {
        display: inline-block;
        width: 20%;
        border: none;
  
        button {
          border: none;
          background-color: transparent;
          @include adaptive-font(20, 15);
          //font-size: large;
          padding: 4% 5% 2% 5%;
          margin: 0 2%;
        }
      }
    }
  
    &__profile {
      margin: 0 auto;
      @include adaptive-font(25, 13);
      
      img {
        max-width: 45%;
        //max-width: 100px;
        height: auto;
        border-radius: 10%;
        border: 2px solid #70b2e7;
        box-shadow: 0 0 15px black;
      }
    }
  }