@import "layout.css";

/* === body === */
 body {
     background: url("../images/beats/beatsbackground.jpg");
     background-position: center;
     background-repeat: no-repeat;
     background-size: cover;
     font-family: Helvetica, sans-serif;
     overflow-y: auto;
}
/* === links color === */
 a {
     color: #DEE2F6;
}
/*p color*/
 body p {
     color: #DEE2F6;
     text-align: center;
}
/* === info section === */
 #intro {
     align-items: center;
     display: flex;
     justify-content: center;
     margin: 10px auto 35px auto;
     max-width: 900px;
}
 .info {
     font-size: 14px;
     font-style: italic;
     margin-left: 40px;
     text-align: left;
     white-space: nowrap;
}
/* === main content === */
/* style VOLUME 1 - VOLUME 2 */
 .label {
     align-items: center;
     background-color: #000;
     color: #fff;
     display: inline-flex;
     height: 20px;
     justify-content: center;
     margin-left: 56px;
     margin-top: -8px;
     width: 445px;
}
 .vol1 {
     margin-left: 55px;
}
/* === style the whole container === */
 #container {
     align-items: center;
     display: flex;
     height: auto;
     justify-content: center;
     margin-right: 0;
     margin-top: -45px;
}
/*style single columns*/
 .column {
     margin-left: -20px;
     margin-top: 4vh;
     width: 500px;
}
/*purchase link*/
 .buy{
     color: #DEE2F6;
     font-size: 12px;
     font-style: italic;
     height: 65px;
     margin-left: 40px;
     margin-top: 8px;
     padding-top: 20px;
     width: auto;
     white-space: nowrap;
}
 .buy:hover {
     color: #D71A26;
}
/*style ul li*/
 .music-list {
     margin-top: 30px;
}
 .music-list li {
     align-items: center;
     background-color: #000;
     border: 1px solid #fff;
     display: flex;
     flex-direction: row;
     margin: -16px 0 8px 18px;
     opacity: 0.9;
    /*setting height col 1 and 2*/
}
/*songname container*/
 .title {
     margin-left: -5px;
     width: 200px;
}
/*Style the name of the song*/
 .songname {
     display: block;
     font-size: 14px;
     margin-left: 40px;
     margin-top: 10px;
}
/*set the play button*/
 .open {
     height: 29px;
     margin-left: 0;
     width: 28px;
}
/* === footer that hosts the player === */
 #footer {
     background-color: #000;
     bottom: 0;
     display: none;
     height: 60px;
     opacity: 0.9;
     position: relative;
     text-align: center;
     width: 100%;
}
 @media screen and (max-width: 1024px) {
    /*styling purchasing informations*/
     .info {
         font-size: 12px;
    }
     #container{
         flex-direction: column;
    }
}
 @media screen and (max-width: 672px) {
     .credits{
         font-size: 8px 
    }
     .buy {
         font-size: 11px;
         margin-left: 30px;
    }
     .info {
         font-size: 11px;
         white-space: normal;
    }
     #container {
         margin-right: -85px;
    }
     .column {
         margin-left: -130px;
         width: 400px;
    }
     .label {
         margin-left: 60px;
         width: 360px;
    }
     .vol1 {
         margin-left: 55px;
    }
     .music-list li {
         padding: 0 40px 0 0;
         width: 360px;
    }
     .open {
         height: 29px;
         margin-left: 30px;
         width: 28px;
    }
     .title {
         margin-left: 10px;
         width: 120px;
    }
}
 @media screen and (max-width: 450px) {
     .buy {
         font-size: 9px;
         margin-left: 20px;
         margin-top: 12px;
    }
     .vol1 {
         font-size: 14px;
         margin-left: 45px;
    }
     .open {
         margin-left: 15px;
    }
     #intro {
         margin-left: -50px;
    }
     .info {
         font-size: 10.5px;
    }
     .column {
         margin-left: 5px;
         margin-top: 4vh;
         width: 500px;
    }
     .label {
         margin-left: 40px;
         width: 320px;
    }
     .music-list li {
         margin: -10px 0;
         padding: 0 30px 0 0;
         width: 320px;
    }
}
 @media screen and (max-width: 321px) {
     .buy {
         margin-left: 15px;
    }
     .vol1 {
         margin-left: 0;
    }
     #container {
         margin-right: -70px;
    }
     #intro {
         margin-left: -50px;
         margin-right: 30px;
    }
     nav ul {
         padding-inline-start: 15px;
    }
     .label {
         margin-left: 77px;
         width: 250px;
    }
     .info {
         font-size: 9px;
    }
     .music-list li {
         margin: -10px 37px;
         padding: 0 30px 0 0;
         width: 250px;
    }
     .open {
         height: 29px;
         margin-left: 70px;
         width: 28px;
    }
     .title{
         margin-left: -15px;
         margin-right: -50px;
         width: 100px;
    }
     .songname {
         display: block;
         font-size: 12px;
         margin-left: 30px;
         margin-top: 10px;
    }
     footer {
         margin-left: 0;
    }
}
/* === starts player code === */
 #content{
     display: none;
}
 .player {
     align-items: center;
     clear: both;
     display: flex;
     flex-direction: column;
     justify-content: center;
     margin-top: 0;
     padding-top: 10px;
}
/* Using flex with the row direction to align items in a horizontal direction */
 .buttons {
     align-items: center;
     color: #fff;
     display: flex;
     height: 30px;
     margin-top: 1vh;
     opacity: 0.9;
}
 i.fa-volume-down, i.fa-volume-up {
     color: #fff;
     margin-top: 10px;
     padding: 10px;
}
 .playpause-track {
     opacity: 0.8;
     padding: 20px;
     transition: opacity .2s;
    /* Smoothly transition the opacity */
}
/* Change the opacity when mouse is hovered */
 .playpause-track:hover {
     cursor: pointer;
     float: right;
     opacity: 1.0;
}
/* Define the slider width so that it scales properly */
 .slider_container {
     align-items: center;
     color: #fff;
     display: flex;
     justify-content: center;
     max-width: 960px;
     opacity: 0.8;
     width: 120%;
}
/* Modify the appearance of the slider */
 input.seek_slider {
     appearance: none;
     background: #fff;
     height: 5px;
     opacity: 0.9;
     transition: opacity .2s;
     width: 18vw;
     -moz-appearance: none;
     -webkit-appearance: none;
     -webkit-transition: .2s;
}
 .volume_slider {
     appearance: none;
     background: #fff;
     height: 5px;
     margin-top: 12px;
     opacity: 0.9;
     transition: opacity .2s;
     width: 100px;
     -moz-appearance: none;
     -webkit-appearance: none;
     -webkit-transition: .2s;
}
/* Modify the appearance of the slider thumb */
 .seek_slider::-webkit-slider-thumb, .volume_slider::-webkit-slider-thumb {
     appearance: none;
     background: #fff;
     border-radius: 50%;
     cursor: pointer;
     height: 15px;
     width: 15px;
     -moz-appearance: none;
     -webkit-appearance: none;
}
/* Change the opacity when mouse is hovered */
 .seek_slider:hover, .volslide:hover {
     opacity: 1.0;
}
 .seek_slider {
     width: 100%;
}
 .current-time, .total-duration {
     color: #fff;
     padding: 10px;
}
/* Change the mouse cursor to a pointer when hovered over */
 i.fa-play-circle, i.fa-pause-circle, i.fa-step-forward, i.fa-step-backward {
     cursor: pointer;
}
 .slider_container.volume{
     margin-left: 0;
     margin-top: -10px;
}
 .playpause-track{
     margin-right: -5px;
}
/*player code media queries*/
 @media screen and (max-width: 672px) {
     .slider_container.volume{
         margin-left: -10px;
         margin-top: -10px;
    }
     .seek_slider {
         appearance: none;
         background: #fff;
         height: 5px;
         opacity: 0.9;
         transition: opacity .2s;
         width: 10vw;
         -moz-appearance: none;
         -webkit-appearance: none;
         -webkit-transition: .2s;
    }
     .volume_slider {
         width: 50px;
    }
     .player {
         margin-right: 0;
         margin-top: 2px;
    }
     i.fa {
         font-size: 12px;
    }
     .playpause-track {
         margin-right: -20px;
         margin-top: -2px;
    }
     i.fas.fa-play{
         font-size: 12px;
         margin-bottom: 2px;
    }
     i.fas.fa-pause{
         font-size: 12px;
         margin-bottom: 2px;
    }
     .track-name{
         font-size: 11px;
         margin-right: -10px;
    }
     .current-time, .total-duration {
         font-size: 12px;
    }
     .buttons {
         margin-left: 30px;
    }
     .playpause-track {
         opacity: 0.8;
         padding: 20px;
         transition: opacity .2s;
        /* Smoothly transition the opacity */
    }
}
 @media screen and (max-width: 450px) {
     .songname {
         font-size: 12px;
    }
     #footer {
         margin-top: 10px;
         position: static;
         width: auto;
    }
     #content {
         margin-right: 30px;
    }
     i.fa-volume-down, i.fa-volume-up {
         display: none;
    }
     .volume_slider {
         display: none;
    }
}
 @media screen and (max-width: 321px) {
     #footer {
         width: 280px;
    }
     #content {
         margin-right: 20px;
    }
     i.fa-volume-down, i.fa-volume-up {
         display: none;
    }
     .volume_slider {
         display: none;
    }
}