/*General style*/
*{
    margin: 0px;
    padding: 0px;
    height:100%;
    color: #dbe6fd;
    font-family: 'Mate SC', serif;
}

/*To remove scrollbar*/
::-webkit-scrollbar {
    width: 0;
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: #b2ab8c;
}

/*curved edges for image*/
img{
    border-radius: 10px;
}

/*Header section*/
header{
    height: 100px;
    background-color: #293b5f;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}
#header-music-player-container{
    display: inline-flex;
    padding: 30px;
    flex-direction: row;
    align-items: center;
    width: 60%;
}
#musicSvg{
    width: 55px;
    height: 55px;
}
#player-details{
    height: min-content;
    margin-left: 10px;
    user-select: none;
}
#heading{
    margin-left: 50px;
    height: min-content;
}
#searchBar-container{
    padding: 30px 30px 30px 0px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content:space-around;
    width: 40%;
}
#searchBar{
    height: 20px;
    display: flex;
    background-color: #47597e;
    padding: 5px;
    border-radius: 10px;
}
#bell-container{
    height: 20px;
    position: relative;
}
#notification{
    position: absolute;
    width: 5px;
    height: 5px;
    background-color: red;
    top: 3px;
    border-radius: 2px;
    right: 1px;
}

#searchBar div{
    margin: 0px 5px;
}
#search{
    background-color: #47597e;
    outline: none;
    border: none;
    width: 200px;
}
::placeholder {
    color: #dbe6fd;
}
#profile{
    border-radius: 50px;
    width: 55px;
    height: 55px;
}

/*Header Responsive design*/
@media screen and (min-width: 300px) and (max-width: 700px){
    #heading{
        display: none;
    }
 }
@media screen and (min-width: 300px) and (max-width: 1000px){
    #bell-container{
        display: none;
    }
}
@media screen and (min-width: 300px) and (max-width: 900px){
    #profile{
        display: none;
    }
}

/*Main Body section*/
#main-container{
    display: flex;
    height: calc(100% - 100px);
    flex-direction: row;
    background-color: #293b5f;
}
#playlist{
    width: 70%;
    overflow-y: scroll;
    overflow-x: hidden;
    background-color: #293b5f;
}


/*Home Screen Design*/
#playlist-container{
    width: 100%;
    margin: 10px 10px 0px 30px;
}

/*Category Selection*/
#radioSection{
    display: flex;
    width: 100%;
    height: 400px;
    justify-content: center;
    align-items: center;
}

/*Individual Categories Design*/
.radio{
    width: min-content;
    height: min-content;
    margin:20px;
}
.radio img{
    width: 275px;
    height: 225px;
}
.radio img:hover{
    width: 300px;
    height: 250px;
    transition: 0.5s;
}

/*Category Selection Responsive Design*/
@media screen and (min-width: 300px) and (max-width: 900px){
    #radioSection{
        overflow-x: scroll;
    }
}

/* Latest Release Design */
#latestAlbum{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    justify-content: space-around;
    align-items: center;
}
@media screen and (min-width: 300px) and (max-width: 900px){
    #latestAlbum{
        flex-direction: column;
    }
}

/*Latest Release Image*/
.latest-img {
  position: relative;
  width: 50%;
  max-width: 300px;
}

/*Latest Release Image Play*/
.overlay {
  position: absolute;
  bottom: 0;
  background: rgb(0, 0, 0);
  background: rgba(0, 0, 0, 0.5);
  color: #f1f1f1;
  width: 100%;
  height: 100%;
  transition: .5s ease;
  opacity:0;
  color: white;
  padding: 15.25px;
  text-align: center;
}
.latest-img:hover .overlay {
  opacity: 1;
}
.latest-img img{
    width: 83px;
    height: 50px;
}
.latest-img div{
    width: 30%;
    height: min-content;
}
.latest-text{
    width: 50%;
    padding-left: 10px;
    height: min-content;
}
.latest-more{
    width: 20%;
    text-align: right;
}
.latest-more i{
    height: min-content;

}
.latest-segment{
    display: flex;
    width: 40%;
    height: 50px;
    align-items: center;
    margin: 10px;
}
.heading{
    height: 30px;
    margin: 10px 0px;
}
#latestSection{
    height: min-content;
}

/*Latest Release Responsive Design*/
@media screen and (min-width: 300px) and (max-width: 900px){
    .latest-text span{
        display: none;
    }
}
@media screen and (min-width: 300px) and (max-width: 900px){
    .latest-more,.latest-text{
        margin-left: 60px;
    }
}

/*Popular Artists Section*/
.artist-img{
    height: min-content;
    text-align: center;
}
.artist-text{
    font-size: 13px;
}
.artist-img img{
    width: 70px;
    height:70px;
    border-radius: 50px;
}
#artists{
    display: flex;
    align-items: center;
    height: min-content;
    justify-content: space-around;
}
.artist-segment{
    width: 20%;
    height: 100px;
}

/*Genre Section*/
#gen{
    display: flex;
    justify-content: space-around;
    margin-top: 40px;
    user-select: none;
}
#gen div{
    height: 100px;
    width: 275px;
    background-color: black;
    text-align: center;
    position: relative;
    background-position: center;
    background-size: cover;
}
#gen div:hover{
    background-size: auto;
    transition: 1s;
}
#gen div span{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: min-content;
}
#gen-party{
    background-image: url("../images/party.jpeg");
}
#gen-electronic{
    background-image: url("../images/electronic.jpeg");
}
#gen-roadTrip{
    background-image: url("../images/roadTrip.jpeg");
}

/*Latest Release in Different Language Section*/
.latestRelease{
    display: flex;
    width: 100%;
    justify-content: space-around;
    align-items: center;
}
.latestRelease-img{
    width: 100px;
    height: 100px;
}
.latestRelease-img:hover{
    margin-left: 10px;
    transition: 0.3s;
}
.latestRelease-text{
    margin-top: 5px;
    font-size: 10px;
}
#popularArtist{
    height: min-content;
}

.latestReleaseLanguage{
    height: min-content;
    padding-bottom: 20px;
}
.latestRelease-segment{
    width: 100px;
}

/*Latest Release in Different Language Responsive Design*/
@media screen and (min-width: 300px) and (max-width: 800px){
    .latestRelease{
        overflow-x: scroll;
    }
}


/*Queue Section*/

/*Queue Layout*/
#queue{
    width: 30%;
    overflow: hidden;
    background-color: #293b5f;
}
#queue-container{
    position: relative;
}

/*Queue Heading*/
#queue-header{
    height: 30px;
    width: 100%;
    display: flex;
    justify-content: space-between;
}
.mlr-15{
    margin-left: 15px;
    margin-right: 15px;
}
#queueSelect{
    background-color: #293b5f;
    outline: none;
    border: none;
    color: #b2ab8c;
}

#queueHeading{
    font-size: 22px;
}
.mr-50{
    margin-right: 50px;
}
.mt-20{
    margin-top: 20px;
}
#queueList{
    margin-left: 10px;
    overflow-y: scroll;
    overflow-x: hidden;
    height: 90%;
}

/*Queue Individual Song Design*/
.song{
    display: flex;
    height: 50px;
    user-select: none;
    align-items: center;
}
.song:hover{
    margin-left: 10px;
    margin-bottom: 10px;
    transition: 0.30s;

}
.song-no,.song-heart{
    width: 10%;
    height: min-content;
}
.song-no i {
    color: #b2ab8c;
}
.song-img{
    width: 20%;
    height: min-content;
}
.song-img img{
    width: 40px;
    height: 40px;
}
.song-text{
    width: 60%;
    height: min-content;
    font-size: 13px;
}
.song-text span{
    font-size: 10px;
    vertical-align: text-top;
}

/*Queu Responsive Design*/
@media screen and (min-width: 300px) and (max-width: 800px){
    .song-no,.song-heart, .song-add{
        display: none;
    }
}
@media screen and (min-width: 300px) and (max-width: 1100px){
    .song-img{
        display: none;
    }
}
@media screen and (min-width: 300px) and (max-width: 500px){
    .song-text span{
        display: none;
    }
}

/*Bottom Music Player*/

/*Bottom Music Player Layout*/
footer{
    display: flex;
    height: 75px;
    background-color: red;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    position: fixed;
    margin-top: -75px;
}

/*Bottom Music Player Current Song's Detail*/
#footer-playing-music{
    display: inline-flex;
    padding: 10px;
    padding-left: 109px;
    padding-top: 30px;
    flex-direction: row;
    align-items: center;
    width: 20%;
    justify-content: space-between;
}
#footer-song-image{
    margin-top: -13px;
    width: min-content;
    height: min-content;
}
#footer-song-image img{
    width: 60px;
    height: 60px;
}


/*Bottom Music Player Song controller*/
#audio-control{
    margin-left: 170px;
    display: inline-flex;
    flex-direction: row;
    width: 70%;
    justify-content: space-between;
}
#audio-control audio{
    width: 500px;
    margin-bottom: 10px;
}

/*Controller's Background color Changer*/
audio::-webkit-media-controls-panel{
background-color:red !important;
}

/*Bottom Music Player Responsive Design*/
@media screen and (min-width: 300px) and (max-width: 1100px){
    #footer-song-image,#footer-song-heart,#footer-song-block{
        display: none;
    }
}
@media screen and (min-width: 300px) and (max-width: 700px){
    #footer-song-text span{
        display: none;
    }
}
@media screen and (min-width: 300px) and (max-width: 700px){
    #audio-control{
        margin-left: -40px;
        width: 300px;
    }
}