:root {
  --orange: hsla(32, 100%, 50%, 1);
  --yellow: hsla(49, 99%, 50%, 1);
  --lime: hsla(82, 90%, 45%, 1);
  --green: hsla(127, 81%, 41%, 1);
  --red: hsla(342, 93%, 53%, 1);
  --pink: hsla(314, 85%, 45%, 1);
  --blue: hsla(211, 92%, 52%, 1);
  --purple: hsla(283, 92%, 44%, 1);
  --cyan: hsla(195, 98%, 55%, 1);
  --white: hsla(0, 0%, 95%, 1);
  --black: hsla(0, 0%, 10%, 1);

  /* abstract our colours */
  --boxMain: var(--blue);
  --boxSecond: var(--cyan);
  --boxHigh: var(--orange);

  --border: 1vmin solid var(--black);
  --borderRad: 2px;
}
* {
  box-sizing: border-box;
}
body {
  background-color: var(--white);
  padding: 4vmax;
  font-family: system-ui;
  color: var(--black);
}

#boombox {
  width: 82vw;
  max-width: 800px;
  margin: 0px auto;
}
@media screen and (max-width: 570px) {
  #boombox {
    max-width: 600px;
  }
}
.boombox-handle {
  margin: 0px 5vw;
  height: 12vh;
  background: var(--white)
    linear-gradient(
      180deg,
      var(--boxHigh) 4vmin,
      var(--black) 4vmin,
      var(--black) 5vmin,
      var(--white) 5vmin
    )
    no-repeat;
  border: var(--border);
  border-bottom-width: 0px;
  border-radius: var(--borderRad);
}
.boombox-body {
  /*gradient with two circles for speakers*/
  /* 	padding-top: 3vh; */
  background: var(--boxMain) repeat-x bottom left;
  background-image: radial-gradient(
    circle,
    var(--boxMain) 2vmin,
    var(--black) 2vmin,
    var(--black) 3vmin,
    var(--boxSecond) 3vmin,
    var(--boxSecond) 9vmin,
    var(--black) 9vmin,
    var(--black) 9.5vmin,
    var(--boxSecond) 9.5vmin,
    var(--boxSecond) 12vmin,
    var(--black) 12vmin,
    var(--black) 13vmin,
    var(--boxMain) 13vmin
  );
  background-size: 33.3% 70%;
  border: 6px solid var(--black);
  border-radius: var(--borderRad);
}
/*small screen with one circle*/
@media screen and (max-width: 570px) {
  .boombox-body {
    background-repeat: no-repeat;
    background-position: center top;
    background-size: 70% 70%;
    background-image: radial-gradient(
      circle,
      var(--boxMain) 4vmin,
      var(--black) 4vmin,
      var(--black) 5vmin,
      var(--boxSecond) 5vmin,
      var(--boxSecond) 21vmin,
      var(--black) 21vmin,
      var(--black) 21.5vmin,
      var(--boxSecond) 21.5vmin,
      var(--boxSecond) 24vmin,
      var(--black) 24vmin,
      var(--black) 25vmin,
      var(--boxMain) 25vmin
    );
  }
}

.master-controls {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-template-columns: repeat(2, 1fr);
  /*name our grid areas so they are more manipulative later*/
  grid-template-areas:
    "volin panin power"
    "vollab panlab power";
  justify-items: center;
  align-items: center;
  padding: 2vmax;
  background-color: var(--boxSecond);
  border-bottom: var(--border);
}
/* change control grid areas for smaller boom box */
@media screen and (max-width: 570px) {
  .master-controls {
    grid-gap: 10px;
    grid-template-columns: 16% 1fr 12%;
    grid-template-areas:
      "vollab volin power"
      "panlab panin power";
  }
}

.master-controls input,
.master-controls label {
  display: block;
}
.master-controls input::before,
.master-controls input::after {
  line-height: 5vh;
  color: var(--black);
}
.master-controls input::before {
  padding-right: 1vw;
}
.master-controls input::after {
  padding-left: 1vw;
}

.control-volume {
  grid-area: volin;
}
.control-volume::before {
  content: "min";
}
.control-volume::after {
  content: "max";
}
label[for="volume"] {
  grid-area: vollab;
  margin-top: 15px;
}
.control-frequency {
  grid-area: panin;
}
.control-frequency::before {
  content: "low";
}
.control-frequency::after {
  content: "high";
}
label[for="frequency"] {
  grid-area: panlab;
  margin-top: 15px;
}
@media screen and (max-width: 570px) {
  label[for="volume"],
  label[for="frequency"] {
    margin-top: 0px;
  }
  .control-volume {
    margin-bottom: 20px;
  }
}

.control-power {
  grid-area: power;
  align-self: center;
  width: 40px;
  height: 40px;
  border: 3px solid var(--black);
  border-radius: 20px;
  cursor: pointer;
}
.control-power span {
  display: none;
}

/* tape area ~~~~~~~~~~~~~~~~~~~~~~ */
.tape {
  display: grid;
  grid-template-rows: 24vh 6vh;
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas:
    "tape tape tape tape tape"
    "back rewind play ff next";

  width: 26vw;
  margin: 0px auto;
  background: var(--boxMain) no-repeat center center;
  background-image: radial-gradient(
      circle at 30%,
      var(--boxSecond) 2vh,
      var(--black) 2vh,
      var(--black) 2.5vh,
      transparent 2.5vh
    ),
    radial-gradient(
      circle at 70%,
      var(--boxSecond) 2vh,
      var(--black) 2vh,
      var(--black) 2.5vh,
      transparent 2.5vh
    ),
    linear-gradient(
      180deg,
      transparent 9.1vh,
      var(--black) 9.1vh,
      var(--black) 10.1vh,
      var(--boxHigh) 10.1vh,
      var(--boxHigh) 20vh,
      var(--black) 20vh,
      var(--black) 21vh,
      transparent 21vh
    ),
    radial-gradient(
      circle at 30%,
      var(--boxHigh) 5vh,
      var(--black) 5vh,
      var(--black) 6vh,
      transparent 6vh
    ),
    radial-gradient(
      circle at 70%,
      var(--boxHigh) 5vh,
      var(--black) 5vh,
      var(--black) 6vh,
      transparent 6vh
    );
  background-size: 100% 100%, 100% 100%, 40% 100%, 100% 100%, 100% 100%;
  border: var(--border);
  border-bottom-width: 0px;
  border-radius: var(--borderRad);
  max-width: 300px;
}
@media screen and (max-width: 570px) {
  .tape {
    width: 80%;
    margin-top: 30vh;
  }
}
audio {
  grid-area: tape;
}
/*TODO GIVE BUTTONS CLASSES*/
[class^="tape-controls"] {
  border: none;
}
[class^="tape-controls"] span {
  display: none;
}
.tape-controls-play {
  grid-area: play;
}

/* ~~~~~~~~~~~~~~~~ All the crazy range styling */
input[type="range"] {
  -webkit-appearance: none;
  width: 30vw;
  background: transparent;
}
/* set min & max for different screen sizes */
@media screen and (min-width: 1100px) {
  input[type="range"] {
    width: 270px;
  }
}
@media (max-width: 680px) {
  input[type="range"] {
    width: 180px;
  }
}
@media (max-width: 380px) {
  input[type="range"] {
    width: 130px;
  }
}

input[type="range"]::-ms-track {
  width: 100%;
  cursor: pointer;
  background: transparent;
  border-color: transparent;
  color: transparent;
}
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  margin-top: -1vh;
  height: 4vh;
  width: 2vw;
  border: 0.5vmin solid var(--black);
  border-radius: var(--borderRad);
  background-color: var(--boxMain);
  cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
  height: 4vh;
  width: 2vw;
  border: 0.5vmin solid var(--black);
  border-radius: var(--borderRad);
  background-color: var(--boxMain);
  cursor: pointer;
}
input[type="range"]::-ms-thumb {
  height: 4vh;
  width: 2vw;
  border: 0.5vmin solid var(--black);
  border-radius: var(--borderRad);
  background-color: var(--boxMain);
  cursor: pointer;
}

input[type="range"]::-webkit-slider-runnable-track {
  height: 2vh;
  cursor: pointer;
  background-color: var(--black);
  border-radius: var(--borderRad);
}
input[type="range"]::-moz-range-track {
  height: 2vh;
  cursor: pointer;
  background-color: var(--black);
  border-radius: var(--borderRad);
}
input[type="range"]::-ms-track {
  height: 2vh;
  cursor: pointer;
  background-color: var(--black);
  border-radius: var(--borderRad);
}

input[type="range"]:focus {
  outline: none;
}
input[type="range"]:focus::-webkit-slider-runnable-track {
  background: var(--boxMain);
}

/*~~~~~~~~~~~~~~~~ the play pause & power icons*/
[data-playing] {
  background: transparent
    url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" fill="black" /></svg>')
    no-repeat center center;
  background-size: 60% 60%;
  cursor: pointer;
}
[data-playing]:hover {
  background: transparent
    url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M424.4 214.7L72.4 6.6C43.8-10.3 0 6.1 0 47.9V464c0 37.5 40.7 60.1 72.4 41.3l352-208c31.4-18.5 31.5-64.1 0-82.6z" fill="hsla(32, 100%, 50%, 1)" /></svg>')
    no-repeat center center;
  background-size: 60% 60%;
}
[data-playing="true"] {
  background: transparent
    url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z" fill="black" /></svg>')
    no-repeat center center;
  background-size: 60% 60%;
}
[data-playing="true"]:hover {
  background: transparent
    url('data:image/svg+xml;charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path d="M144 479H48c-26.5 0-48-21.5-48-48V79c0-26.5 21.5-48 48-48h96c26.5 0 48 21.5 48 48v352c0 26.5-21.5 48-48 48zm304-48V79c0-26.5-21.5-48-48-48h-96c-26.5 0-48 21.5-48 48v352c0 26.5 21.5 48 48 48h96c26.5 0 48-21.5 48-48z" fill="hsla(32, 100%, 50%, 1)" /></svg>')
    no-repeat center center;
  background-size: 60% 60%;
}
[data-power] {
  background: var(--boxSecond)
    url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M400 54.1c63 45 104 118.6 104 201.9 0 136.8-110.8 247.7-247.5 248C120 504.3 8.2 393 8 256.4 7.9 173.1 48.9 99.3 111.8 54.2c11.7-8.3 28-4.8 35 7.7L162.6 90c5.9 10.5 3.1 23.8-6.6 31-41.5 30.8-68 79.6-68 134.9-.1 92.3 74.5 168.1 168 168.1 91.6 0 168.6-74.2 168-169.1-.3-51.8-24.7-101.8-68.1-134-9.7-7.2-12.4-20.5-6.5-30.9l15.8-28.1c7-12.4 23.2-16.1 34.8-7.8zM296 264V24c0-13.3-10.7-24-24-24h-32c-13.3 0-24 10.7-24 24v240c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24z" fill="black" /></svg>')
    no-repeat center center;
  background-size: 60% 60%;
}
[data-power]:hover,
[data-power="on"] {
  background: var(--boxHigh)
    url('data:image/svg+xml; charset=utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M400 54.1c63 45 104 118.6 104 201.9 0 136.8-110.8 247.7-247.5 248C120 504.3 8.2 393 8 256.4 7.9 173.1 48.9 99.3 111.8 54.2c11.7-8.3 28-4.8 35 7.7L162.6 90c5.9 10.5 3.1 23.8-6.6 31-41.5 30.8-68 79.6-68 134.9-.1 92.3 74.5 168.1 168 168.1 91.6 0 168.6-74.2 168-169.1-.3-51.8-24.7-101.8-68.1-134-9.7-7.2-12.4-20.5-6.5-30.9l15.8-28.1c7-12.4 23.2-16.1 34.8-7.8zM296 264V24c0-13.3-10.7-24-24-24h-32c-13.3 0-24 10.7-24 24v240c0 13.3 10.7 24 24 24h32c13.3 0 24-10.7 24-24z" fill="black" /></svg>')
    no-repeat center center;
  background-size: 60% 60%;
}