.container{
min-height:100vh;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;

}
body{


}
.bg{
  /* background-image: url("https://i.gifer.com/2I3c.gif"); */
  background-color: #FAF1E6;
  /* background-image: url("https://wallpaperaccess.com/full/521120.jpg"); */
background-size: cover;
}


.player-box{
  width:80%;
  height:55%;
  background-color: #FFEAC9;
  box-shadow: 20px 5px 5px  #444444;
  border: 5px solid black;
  display: flex;
  flex-direction: column;
  border-radius: 10%;
  overflow: hidden;
  background-image: url("https://p4.wallpaperbetter.com/wallpaper/418/92/16/paper-crumpled-light-shadow-wallpaper-preview.jpg")
/* position:relative; */
}
.play{
  font-size:3rem;
margin-bottom:5%;
cursor: pointer;
}
.play:hover
{
  /* background-color: #E5D549; */
  /* border-radius:50%; */
  /* transform: scale(1.1); */
}
.play-btn{
  font-size:5rem;
  /* border-radius:50%; */
  /* background-color: yellow; */
  overflow: hidden;
  border-radius: 50%;
  /* background-blend-mode: darken; */

}

.song-img img{

width:100%;
height:60%;


margin: 0 auto;
}
.song-func{
  background-image: url("https://cdn.wallpapersafari.com/59/94/g7KCNA.jpg")
  width:100%;
  height:10%;
  position: relative;
  /* background-color: #DFEEEA; */
  display: flex;
justify-content: space-around;
align-items:center;
/* border-radius: 10%; */
/* box-shadow: 20px 20px 20px 20px black; */
background-image: url("https://cdn.wallpapersafari.com/59/94/g7KCNA.jpg")
position:absolute;
bottom:10px;

}
.functions{
  display:flex;
  justify-content: space-around;

}
.song-img{
  display: flex;
  flex-direction: column;
  object-fit: contain;
position: relative;
overflow: hidden;
/* margin-bottom: 1%;; */
  /* box-shadow: 20px 20px 20px 20px black; */

}
.track{
  text-align:center;
  letter-spacing:5px;
  font-family: 'Jomhuria', cursive;
  font-size:2rem;
  color:#343A40;
  box-shadow:  5px 5px 20px black;
  border-radius: 2%;
  text-transform:uppercase;
  /* background-color: #FFED99; */

}
.artist{
  text-align:center;
  color:#343A40;
  font-size:0.8rem;
  white-space:inherit;
  margin-bottom: 0;
}

/* progress bar */

.progress_container{
  width:100%;
  /* background-color: blue; */
padding: 0 2%;
border-radius:5%;
}
.time{
  display: flex;
  justify-content: space-between;
  padding:0 1%;

}
#progress_div{
  box-shadow:  20px 5px 20px black;
  margin-bottom: 5%;
height:0.6rem;
cursor: pointer;
background-color: white;

}
#progress{
  background-color: #393E46;
  width:0;
  height:100%;
pointer-events: none;
position: relative;

}
#circle{
  position: absolute;
  right:0;
  /* font-size: 3rem; */
  background-color: #393E46;
  color: #393E46;
}
.wave{
  background-image:url("waveform.GIF");
  /* opacity:0.5; */
background-size: cover;
background-blend-mode: multiply;
}

#replay{

/* color:#5AA897; */
font-size:2.5rem;
cursor: pointer;

}
.replay-button{
  outline:none;
  border:none;
}

#Loop{
  font-size:2.5rem;
  margin-bottom:5%;
  overflow: hidden;
  cursor: pointer;
  border-radius: 40%;
}
a{
  padding: 0;
  margin-bottom: 5%;
}
#spotify:hover{
  transform: scale(2);
}
.footer{
  margin-top:3.5%;
  font-size:0.8rem;
  color:#444444;


}
#loading{
  position: fixed;
  width:100%;
  height:100vh;
  background: #fff
  url("https://i.pinimg.com/originals/de/f5/82/def582384510684a44d878b1a287bd5e.gif")

  no-repeat center;
  z-index:9999;

}
@media (min-width:750px){

  .player-box{
    width:40%;
    height:10%;
  }
}
@media(max-width:450px){
  .playerbox{
    width:80%;
    height:55%;
  }
  #spotify{
    font-size: 1.5rem;
    align-items: baseline;
    margin-bottom: 0

  }
  #replay{
    font-size: 1.5rem;
    margin-top: 5%;

  }
  #replay:hover{
    transform: scale(1.0);
  }

  #Loop{
    margin-top:5%;
    font-size: 1.5rem;
  }
}