player-project/src/App.scss

body { background-color: #100d23; }

.App {
  text-align: center;
  color: #70b2e7;
}

.sidebar {
  background-color: #1e1d45;
  width: 30%; 
  overflow:auto;

  &__link {
    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 {
    background-color: #0e6147;
    color: #05f09b;
    font-size: medium;
    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 {
      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;
        font-size: large;
        padding: 4% 5% 2% 5%;
        margin: 0 2%;
      }
    }
  }

  &__profile {
    //width: 40%;
    margin: 0 auto;
    //border-radius: 10%;
    img {
      max-width: 125px;
      height: auto;
      border-radius: 10%;
      border: 2px solid #70b2e7;
    }
  }
}

.highlightYellow {
  color: yellow;
  border-color: yellow;
}

.highlightRed {
  color: red;
  border-color: red;
}

.highlightGreen {
  color: #05f09b;
  border-color: #05f09b;
}