body{
  margin: 0px;
  padding: 0px;  
} 
#block_page {
    display: flex;
    background-image: url("wood1.jpeg");
    align-items: center;
    flex-direction: column;
    height: 99vh;
    width: 100%;
    

}

  @font-face

  {
    src: url("Royalacid.ttf");
   font-family: "Royalacid";
  } 
  
  header
  {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 20%;
    width: 100%;
  }
  h1
  {
    font: 40px Royalacid;
  }
  
 
#circle1 {
    display: flex;
    background-color: black;
    width: 270px;
    height: 270px;
    border-radius: 50%;
    padding: 5%;
    align-items: center;
    justify-content: center;
    margin-bottom: 1%;
    position: absolute;
    margin-top: 90px;
    margin-left: auto;
   
    box-shadow: 0 8px 0 0 #888686;
  } 


#circle2 {
    display: flex;

    position: absolute;
    background-color: brown;
    width: 250px;
    height: 250px;
    margin-top: 155px;
    margin-left: auto;
    border-radius: 50%;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 1%;
    border :white solid 1px;
    
  } 
  .control {
    background-color: black;
    height: 17px;
    width: 17px;
    border:10px solid rgb(46, 43, 43) ;
    border-radius: 50%;
    position: absolute;
    top:-16px;
    left:-16px;
  }
.tone_arm {
  height: 90px;
  width: 6px;
  background-color: rgb(112, 62, 62);
  position:absolute;
  margin-top: 120px;
  margin-right: -500px;
  transition: 1s;
  transform-origin: top;
  z-index: 1;
}
.tone_arm::before{
  content: "";
  height: 40px;
  width: 6px;
  background-color: rgb(112, 62, 62);
  position: absolute;
  transform: rotate(30deg);
  bottom: -36px;
  right:10px;
}
.tone_arm:after {
  content:"";
  position: absolute;
  height: 0;
  width: 10px;
  border-top: 18px solid #b2aea6;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  top: 108px;
  right:12.5px;
  transform :rotate(30deg);
 
  
}
.play {
  transform: rotate(30deg);
  transform-origin: top;
  transition: 1s;
}
.on {
  animation: spin 3s 1s linear infinite;
}
@keyframes spin {
  100%{
    transform:rotate(360deg)
  }
}
  #box1 {
    margin-top: 5%;
    width: 85%;
    height: 40%; 
    border-radius: 25%;
    background-color: rgb(145, 145, 236);
    border :black solid 1px;
    
    font-style:normal ;
    color: white;
        }
.details{
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: center;
}

  .now_playing{
    display: block;
    align-items: center;
  }
  .track-art{
    display: block;
    align-items: center;
  }
  .track_name{
    display: block;
    align-items: center;
  }
  .track_artist{
    display: block;
    align-items: center;
  }
  .slider_container{
    display: flex;
    justify-content: space-between;
    
  }
  .current-time{
    display: flex;
    flex-grow: 1;
    justify-content:flex-start;

  }
  .seek_slider{
    display: flex;
    flex-grow: 3;
    width: 60%;
    
  }
  .total-duration{
    display: flex;
    flex-grow: 1;
    justify-content:flex-end;
    
  }


#box2 {
  
    position: relative;
    width: 55%;
    height: 40%; 
    border :black solid 1px; 
    border-radius: 4px;
    background-size: 100% 100%;
    background-image: url("music/pexels-shonejai-1227511.jpg");

}
#box3{
    display: grid;
    background-image: url("wood.jpeg");
    border :black solid 1px; 
    border-radius: 8px;
    height: 29%;
    width: 100%;
    grid-template: 1fr 1fr/ 3fr 1fr;
    margin-top: 400px;
}

#deco_son{
  grid-area: 1/1/2/2;
  border: black solid 1px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
 

}
.slider_containerVolume{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.volume_slider{
  
  -webkit-appearance: none;
  appearance: none;
  width: 70%;
  border-radius: 8px;
  background-color: transparent;
  outline: none;
  border: 4px solid black;
  
}
.volume_slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  background-color: black;
  border-radius: 50%;
  cursor: pointer;
}
i.fa-volume-down,
i.fa-volume-up {
padding: 10px;
}


.box_playeur{
    
    grid-area: 2/1/3/2;
    border: black solid 1px;
    border-radius: 8px;
}



.buttons{
  display: flex;
  height: 100%;
  width: 100%;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 1%;
  
}
.play_list{
  grid-area: 1/2/3/3;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 20px;
  border: 1px solid black;
  border-radius: 8px;
  margin: 0px;
  font-family:  Royalacid;
  

}
  a:hover {
    color: black;
    font-size: 1.3em;
    background-color: greenyellow;
  

}



i,
i.fa-stop,
i.fa-play,
i.fa-pause,
i.fa-step-forward,
i.fa-backward-step,
p {
cursor: pointer;
}