@import url('https://fonts.googleapis.com/css2?family=Lato:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500&display=swap');
*{
 margin: 0;
 padding: 0;
 box-sizing: border-box;
 list-style: none;
}

body{
 background-color: #e0e0e0;
}

.music-player{
 display: flex;
 height: 100vh;
 justify-content: center;
 align-items: center;
}

.player{
 border-radius: 15px;
 height: 570px;
 text-align: center;
 width: 350px;
 font-family: 'Lato', sans-serif;
 box-shadow: 11px 11px 21px #a8a8a8,
 -11px -11px 21px #ffffff;
}

/*Top Section*/
.top-section {
 display: flex;
 margin: 25px 30px 25px 30px;
 justify-content: space-between;
}

/*middle section*/
.middle-section img{
 width: 250px;
 border-radius: 150px;
 border: 10px solid #e0e0e0;
}

.middle-section #title {
 text-align: center;
 margin-top: 30px;
 font-size: 20px;
}

.middle-section #artist{
 font-size: 15px;
}

#songArtist{
 margin-top: 5px;
 margin-bottom: 25px;
}

.song-album {
 box-shadow: 11px 11px 21px #bebebe,
  -11px -11px 21px #ffffff;
 width: 72%;
 border-radius: 500px;
 height: 250px;
 margin-left: 50px;
}

.disk{
 animation: rotatePlayer 4s linear infinite;
}

@keyframes rotatePlayer{
 from{
  transform: rotate(0deg);
 }
 to{
  transform: rotate(360deg);
 }
}

/*bottom section*/
.bottom-section{
 text-align: center;
}

.progress-area{
 height: 6px;
 width: 83%;
 background-color: #f0f0f0;
 border-radius: 50px;
 margin: 0px 30px 0px 30px;
 cursor: pointer;
 transition: 0.2s;
}

.progress-area .progress-bar{
 height: inherit;
 width: 0%;
 position: relative;
 border-radius: inherit;
 background-color: #0084FF;
 transition: 0.2s;
}

.progress-bar::before{
 content: "";
 position: absolute;
 height: 12px;
 width: 12px;
 background-color: #000;
 border-radius: inherit;
 top: 47px;
 right: -5px;
 transform: translateY(-50px);
 background: inherit;
 opacity: 0;
 transition: 0.2s ease;
}

.progress-area:hover .progress-bar::before{
 opacity: 1;
}

.progress-time{
 display: flex;
 justify-content: space-between;
 padding-top: 5px;
}

.bottom-controls {
 display: flex;
 justify-content: space-between;
 margin: 60px 35px 20px 35px;
}

.fas {
 cursor: pointer;
 transition: 0.3s;
}

.fa-play{
 font-size: 25px;
 margin: 0px 30px 0px 30px;
 margin-top: -12px;
 cursor: pointer;
 border-radius: 100px;
 padding: 15px 15px 15px 15px;
 color: white;
 transition: 0.3s;
 background-color: #0084FF;
 box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.fa-play:hover{
 box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
}

.fa-pause-circle{
 font-size: 55px;
 margin: 0px 30px 0px 30px;
 margin-top: -12px;
 cursor: pointer;
 box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
 border-radius: 50px;
 transition: 0.3s;
 color: #0084FF;
}

.fa-step-backward{
 font-size: 30px;
}

.fa-step-backward:hover{
 color: dimgray;
}

.fa-step-forward{
 font-size: 30px;
}

.fa-step-forward:hover{
 color: dimgray;
}

.shuffle-repeat-controls img{
 width: 20px;
 /*filter: invert(36%) sepia(97%) saturate(3502%) hue-rotate(196deg) brightness(105%) contrast(106%);*/
}

.play-pause-controls {
 display: flex;
 margin-top: -5px;
}

.playlist-btn img {
 cursor: pointer;
 width: 20px;
 /*filter: invert(36%) sepia(97%) saturate(3502%) hue-rotate(196deg) brightness(105%) contrast(106%);*/
}

.mywordcolor{
 color: #404040;
 font-family: 'Poppins', sans-serif;
}

#artist{
 margin-top: 5px;
 margin-bottom: 25px;
}