style.css

:root {
  font-family: 'Montserrat Alternates', sans-serif;
font-family: 'Roboto', sans-serif;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.87);

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
@keyframes glow {
  0% {
      text-shadow: 0 0 5px rgb(0, 255, 102);
  }
  50% {
      text-shadow: 0 0 20px rgb(255, 0, 0), 0 0 30px rgb(255, 0, 0);
  }
  100% {
      text-shadow: 0 0 5px rgb(255, 255, 0);
}
}
.disc{
  position: relative;
  top: 5%;
  left: 43%;
  height: 200px;
  border-radius: 100px;
  animation: spin 7s linear infinite;
}
body {
  position: absolute;
  margin: 0;
  top: 0;
  left: 0;
  width: 1128px;
  height: 627px;
  object-fit: cover;
  align-items: center;
  place-items: center;
}
.desk{
  position: relative;
  top: 46%;
  left: 100%;
  box-sizing: content-box;
  height: 200px; 
  width: 100px; 
  
}
.slider{
  width: 250px;
  height: 12px;
  -webkit-appearance: none;
  border-radius: 5px;
  background: #a1aee5;
  outline: none;
  
}
.label{
  bottom: 0%;
  /* transform: rotate(270deg); */
  color: aliceblue;
  border: 2px;
  font-weight: bolder;
  border-color:rgb(229, 46, 165) ;
  text-shadow:
  0 0 10px #00f,
  0 0 20px #00f,
  0 0 30px #00f,
  0 0 40px rgb(255, 255, 255),
  0 0 50px rgb(255, 255, 255),
  0 0 60px rgb(242, 242, 242);
  
}
.slider::-moz-range-thumb {
  color: beigex;
}

.speedC{
  transform: rotate(270deg);
  display: flex;
  position: absolute;
  top: 32%;
  align-items: center;
  left: 5%;
}
.volC{
  position: relative;
  top: -45%;
  display: flex;
  left: 30%;
  transform: rotate(270deg);
  align-items: center;

}
.bassC{
  position: relative;
  top: -85%;
  
  display: flex;
  left: 20%;
  transform: rotate(270deg);
  align-items: center;

}
#seek-bar{
  position:relative;
  top: 20px;
  width: 600px;
  left: 270px;
  

}
.trebleC{
  position: absolute;
  top: 32.5%;
  display: flex;
  left: 18%;
  transform: rotate(270deg);
  align-items: center;

}
.controls{
  position: absolute;
  top: 28%;
  left: 0%;
}
video {
  position: absolute;
  top: 0;
  left: 0;
  width: 1128px;
  height: 627px;
  object-fit: cover;
  z-index: -2;
}
.bg{
  height:500px;
  width: 100%
}

h1{
  width: 100px;
  font-weight: bolder;
  font-size: 30px;
  color: blanchedalmond;
  animation: glow 5s ease-in-out infinite;

  
}


:root {
  --backgroundColor: rgba(246, 241, 209);
  --colorShadeA: rgb(106, 163, 137);
  --colorShadeB: rgb(121, 186, 156);
  --colorShadeC: rgb(187, 240, 191);
  --colorShadeD: rgb(187, 232, 211);
  --colorShadeE: rgb(126, 217, 233);
}
*::before,
*::after {
  box-sizing: border-box;
}
button {
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  font-size: 1.5rem;
  color: var(--colorShadeA);
  font-weight: 700;
  text-transform: uppercase;
  font-family: inherit;
  top: 80px;
  left: -25%;

}

button.big-button {
  padding: 1em 2em;
  border: 2px solid var(--colorShadeA);
  border-radius: 1em;
  background: var(--colorShadeE);
  transform-style: preserve-3d;
  transition: all 175ms cubic-bezier(0, 0, 1, 1);
}
button.big-button::before {
  position: absolute;
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--colorShadeC);
  border-radius: inherit;
  box-shadow: 0 0 0 2px var(--colorShadeB), 0 0.75em 0 0 var(--colorShadeA);
  transform: translate3d(0, 0.75em, -1em);
  transition: all 175ms cubic-bezier(0, 0, 1, 1);
}
.buttons{
  position: absolute;
  display: flex;
  left:40%;
  bottom:20%
}

button.big-button:hover {
  background: var(--colorShadeD);
  transform: translate(0, 0.375em);
}

button.big-button:hover::before {
  transform: translate3d(0, 0.75em, -1em);
}

button.big-button:active {
  transform: translate(0em, 0.75em);
}

button.big-button:active::before {
  transform: translate3d(0, 0, -1em);

  box-shadow: 0 0 0 2px var(--colorShadeB), 0 0.25em 0 0 var(--colorShadeB);
}