html { font-size: 22px; }
body 
{ 
  padding: 1rem; 
    display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;


}

body, html {
background-color: black;
height: 100%;

}

.toggle-up {
    animation-play-state: paused;
  animation-name: toggle-up;
  animation-delay: 0.25s;
  animation-duration: 0.75s;
  animation-fill-mode: forwards;
}
.toggle-down {
  animation-play-state: paused;
  animation-name: toggle-down;
  animation-delay: 0.25s;
  animation-duration: 0.75s;
  animation-fill-mode: forwards;
}


.toggle-up:hover,
.toggle-up:active {
  animation-play-state: running;
}


.toggle-down:hover,
.toggle-down:active {
  animation-play-state: running;
}

/*animations*/
@keyframes toggle-up {
  100% {
    transform: rotate(180deg);
  }
}
@keyframes toggle-down {
  100% {
    transform: rotate(180deg);
  }
}



.radiohead{

  height: 500px;
  width: 300px;
  background-image: url("baselayer.png");
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;


position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  
}

.audiowave {

  position: absolute;
  top: 115px;
}


.radiometer{
  position: absolute;
  top: 56px;
}



.dials {
  display: flex;
  justify-content: space-between;
/* write 90% rule here as well as as space between */ 
width: 80%;
  /*make this 90% of radio head width 
      space-between (so dials are seperated) 
*/
}


.dials img {

 position: absolute;
  bottom: 20px;       /* Sets the distance from the bottom edge */
  /* other positioning (e.g., left: 0; or right: 0; for horizontal alignment) */
}

#Ldial{
bottom: 45px;
right: 25px;

}

#Rdial {
  bottom: 45px;
  left: 25px;

}