body{
  margin: 0;
  width:100vw;
  height:100vh;
  background-color: #181C21;
  overflow-x: hidden;
  display: flex;
  align-items:center;
  justify-content: center;
  column-gap: 50px;
}

input{ display: none; }
label{ cursor: pointer; }

/*------- Sound icon -------*/
.soundIcon{
  width:max-content;
  height: 30px;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  position: relative;
}

.soundIcon > span{
  margin: 0 2px;
  background: #e7e9e6;
  height: 100%;
  width: 2px;
  display: block;
  border-radius: 30px;
  animation-duration: 1.5s;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-play-state: play;
}

.soundIcon > span:first-of-type,
.soundIcon > span:last-of-type,
.soundIcon > span:nth-of-type(5){
  height: 40%;
  animation-name: scaleAnim_1;
}

.soundIcon > span:nth-of-type(2),
.soundIcon > span:nth-last-of-type(2) {
  height: 70%;
  animation-name: scaleAnim_2;
}

.soundIcon > span:nth-of-type(4),
.soundIcon > span:nth-last-of-type(3) {
  height: 80%;
  animation-direction: alternate-reverse;
  animation-name: scaleAnim_3;
}

.soundIcon > span:nth-of-type(3){
  animation-name: scaleAnim_2;
  animation-direction: alternate-reverse;
}

.soundIcon .muteBar{
  width: 0;
  display: block;
  position: absolute;
  height: 1.7px;
  background: #e7e9e6;
  border-radius: 30px;
  transform: rotate(-50deg);
  transition: width 0.3s ease-out, border 0.1s linear;
  border: solid 0px #181C21;
}

#soundicon:checked ~ label[for='soundicon'] .muteBar{
  width: 120%;
  border-width: 3px;
}

#soundicon:checked ~ label[for='soundicon'] > span{
  animation-play-state:paused;
}

.soundIcon:hover > span{
  animation-play-state: running;
}


@keyframes scaleAnim_1 {

  0%{    height: 70%;  }
  40%{   height: 30%;  }
  70%{   height: 80%;  }
  100%{  height: 20%;  }

}

@keyframes scaleAnim_2 {

  0%{    height: 40%;  }
  40%{   height: 80%;  }
  70%{   height: 20%;  }
  100%{  height: 60%;  }

}

@keyframes scaleAnim_3 {

  0%{    height: 50%;  }
  40%{   height: 30%;  }
  70%{   height: 80%;  }
  100%{  height: 30%;  }

}

/*------- Slider icon -------*/

.sliderIcon{
  height: 30px;
  display: flex;
  flex-direction: column;
  position: relative;
  width: 30px;
  justify-content: space-around;
}

.sliderIcon > div{
  display: flex;
  position: relative;
  align-items: center;
  height: 2px;
}

.sliderIcon > div::before{
  content:'';
  width: 100%;
  height: 100%;
  background: #e7e9e6;
  display: block;
  border-radius: 30px;
}

.sliderIcon .dot{
  width: 6px;
  height: 6px;
  display: block;
  background: #e7e9e6;
  position: absolute;
  border-radius: 100%;
  animation-iteration-count: infinite;
  animation-duration: 1s;
  animation-direction: alternate;
  animation-play-state: paused;
  animation-timing-function: ease-in-out;
}

.sliderIcon > div:first-of-type .dot{
  animation-name: sliderAnim_1;
  left: 30%;
}
.sliderIcon > div:nth-of-type(2) .dot{
  animation-name: sliderAnim_2;
  left: 80%;
}
.sliderIcon > div:last-of-type .dot{
  animation-name: sliderAnim_3;
  left: 4%;
}

.sliderIcon:hover .dot{ animation-play-state: running; }

@keyframes sliderAnim_1{

  0%{    left: 2%;   }
  50%{   left: 70%;   }
  100%{  left: 20%;  }

}

@keyframes sliderAnim_2{

  0%{    left: 70%;   }
  50%{   left: 20%;   }
  100%{  left: 80%;  }

}

@keyframes sliderAnim_3{

  0%{    left: 30%;   }
  50%{   left: 70%;   }
  100%{  left: 8%;  }

}

/*------- Slider icon -------*/

.phoneIcon{
  border-radius: 100%;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: solid rgba(255 255 255 / 30%) 1px;
  padding: 3px;
  position: relative;

}

.phoneIcon img{
  transition: transform 0.3s ease-out;
}

.phoneIcon > span{
  opacity: 0.4;
  transform: scale(0);
  position: absolute;
  width: 100%;
  height: 100%;
  background: #e7e9e6;
  animation-duration: 0.8s;
  animation-timing-function: ease-out;
  border-radius: 100%;
}

.phoneIcon > span:nth-of-type(2){ animation-delay: 0.3s; }
.phoneIcon > span:nth-of-type(3){ animation-delay: 0.6s; }

.phoneIcon:hover > span{ animation-name: phoneAnim; }
.phoneIcon:hover img{ transform: scale(1.3); }
@keyframes phoneAnim {
  to{ transform: scale(1); opacity: 0; }
}