/* reset css*/
*{padding: 0;margin: 0;border: 0;}
*,*:before,*:after{-moz-box-sizing: border-box;-webkit-box-sizing: border-box;box-sizing: border-box;}
:focus,:active{outline: none;}
a:focus,a:active{outline: none;}
nav,footer,header,aside{display: block;}
html,body{height:100%;width:100%;font-size:100%;line-height:1;font-size:14px;-ms-text-size-adjust:100%;-moz-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
input,button,textarea{font-family:inherit;}
input::-ms-clear{display: none;}
button{cursor: pointer;}
button::-moz-focus-inner {padding:0;border:0;}
a,a:visited{text-decoration: none;}
a:hover{text-decoration: none;}
ul li{list-style: none;}
img{vertical-align: top;}
h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight: inherit;}
/*--------------------*/

:root {
   --dark: #000;
   --white: #fff;
}

body {
   font-family: 'Roboto', sans-serif;
   color: var(--white);
}

.bg-site {
   background: url('../assets/img/bg.jpg') 50%/cover no-repeat;
   position: absolute;
   z-index: 1;
   top: 0px;
   right: 0px;
   bottom: 0px;
   left: 0px;
   box-shadow: 0 0 10px #000;
   height: 100vh;
}

/* Audio-player */
.audio-player {
   display: flex;
   justify-content: center;
   align-items: center;
   margin: auto;
   position: absolute;
   top: 0;
   right: 0;
   bottom: 120px;
   left: 0;
   z-index: 2;
   color: var(--white);
   background: rgba(0, 0, 0, 0.6);
   height: 600px;
   max-width: 420px;
   border-radius: 10px;
   overflow: hidden;
   border: 3px solid #df9253;
}

.cover {
   overflow: hidden;
   position: absolute;
   background-size: cover;
   padding: 15px;
   top: 0%;
}

img {
   max-width: 100%;
   max-height: 100%;
   filter: grayscale(1);
   transform: scale(0.8);
   transition: 0.3s;
}

.cover-effect {
   transform: scale(1);
   filter: grayscale(0);
   transition: 0.3s;
}

.timeline {
   background: #df9253;
   width: 100%;
   height: 10px;
   position: absolute;
   cursor: pointer;
   box-shadow: 0px 0px 10px 0px #0008;
   bottom: 27%;
   z-index: 4;
}

.progress {
   width: 0%;
   height: 100%;
   background: var(--dark);
   transition: 0.25s;
}

.audio-player-panel {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   position: absolute;
   padding: 10px;
   width: 100%;
   height: 27%;
   z-index: 3;
   bottom: 0%;
   background: rgb(63, 63, 63);
}

.time {
   display: flex;
   justify-content: space-between;
   color: white;
   z-index: 3;
}

.music-title {
   display: flex;
   justify-content: space-around;
   font-size: 15px;
}

.song-title {
   font-size: 20px;
}

.song-artist {
   font-size: 20px;
}

.player-buttons {
   display: flex;
   justify-content: center;
   align-items: center;
}

.play-btn {
   width: 52px;
   height: 52px;
   border: none;
   filter: invert();
   background: no-repeat;
   background-image: url('../assets/svg/play.svg');
   transition: all 0.5s ease;
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

.play-btn:hover {
   cursor: pointer;
   filter: invert(59%) sepia(79%) saturate(340%) brightness(92%) contrast(89%);
   transition: all 0.5s ease;
}

.pause {
   width: 52px;
   height: 52px;
   filter: invert();
   border: none;
   background-image: url('../assets/svg/pause.svg');
   transition: all 0.5s ease;
}

.play-prev {
   width: 35px;
   height: 35px;
   border: none;
   filter: invert();
   background: no-repeat;
   background-image: url('../assets/svg/backward.svg');
   transition: all 0.5s ease;
   margin: 0px 10px 0px 0px;
}

.play-next {
   width: 35px;
   height: 35px;
   border: none;
   filter: invert();
   background: no-repeat;
   background-image: url('../assets/svg/forward.svg');
   transition: all 0.5s ease;
   margin: 0px 0px 0px 10px;
}

.play-prev:hover, .play-next:hover {
   filter: invert(59%) sepia(79%) saturate(340%) brightness(92%) contrast(89%);
   cursor: pointer;
   transition: all 0.5s ease;
}

/* ------- footer ------- */
.footer {
   position: absolute;
   left: 0;
   bottom: 0;
   width: 100%;
   z-index: 2;
   background: rgba(0, 0, 0, 0.3);
}

.footer-data {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   font-size: 20px;
}

.footer__item:nth-child(2), .footer__item:nth-child(3) {
   margin-left: 25px;
}

.school-link {
   padding-left: 10px;
}

.github__icon {
   width: 100px;
}

.rs-school__icon {
   width: 100px;
}

@media (max-width: 640px){
   .audio-player {
      bottom: 120px;
      height: 600px;
   }
   .pause {
      background-image: url('../assets/svg/pause.svg');
   }
}

@media (max-width: 375px){
   .audio-player {
      bottom: 100px;
      height: 540px;
   }
}