player-project/src/App.scss

@import "./styles/Sidebar.scss";
@import "./styles/Page.scss";
@import "./styles/Playerbar.scss";
@import "./styles/Forms.scss";

$maxWidth: 1280;
@mixin adaptive-font($pcSize, $mobSize) {
  $additionSize: $pcSize - $mobSize;
  $additionMobSize: $additionSize + $additionSize * 0.7;
  //  for all screen width less than 767px(iPad)
  @media (max-width: 767px) {
    font-size: calc(#{$mobSize + px} + #{$additionMobSize} * ((100vw - 350px) / #{$maxWidth}));
  }
  // for all screen width more than 767px
  @media (min-width: 767px) {
    font-size: calc(#{$mobSize + px} + #{$additionSize} * (100vw / #{$maxWidth}));
  }
}

body {
  background-color: #100d23;
  ::-webkit-scrollbar {
    width: 12px;

    &-track {
      background-color: transparent;
      border: 1px solid rgba(105, 105, 105, 0.384);
    }

    &-thumb {
      background-color: #534f7459;

      &:hover {
        background-color: #534f74c7;
      }
    }
  }

  :hover {
    transition: 0.1s;
  }
}

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

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

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

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

.highlightPaleGreen {
  background-color: #0e6147;
  color: #05f09b;
}

.lightText {
  font-weight: 300;
}