body{
    font-family: 'montserrat', sans-serif;
    margin: 0;
    background-color: black;
    color: white;
    overflow: hidden;
}

.main{
    display: flex;
    height: 100vh;
    background: black;
}

.topnav{
    background: black;
    position: fixed;
    flex-direction: row;
    top: 0;
    height: 4rem;
    width: 100%;
    display: flex;
    justify-content: center;
}

.sp-logo{
    margin-top: 1.1rem;
    position: relative;
    right: 5rem;
}
.sp-logo img {
    height: 2rem;
}

.home{
    display: flex;
    margin-left: 20rem;
}

#home-logo{
    margin: 1.1rem;
    background: #121212;
    border-radius: 50%;
    color: rgb(203, 189, 189);
}

#search-logo{
    margin-top: .36rem;
    padding-top: .75rem;
    padding-left: .6rem;
    height: 3rem;
    background: #121212;
    color: rgb(236, 226, 226);
    border-top-left-radius: 4rem;
    border-bottom-left-radius: 4rem;
}

#search{
    margin-top: .36rem;
    font-size:larger;
    font-weight: 300;
    background: #121212;
    height: 3rem;
    width: 27rem;
    border-style: hidden;
}

#i{
    color: rgb(236, 226, 226);
    margin-top: .36rem;
    padding-top: .75rem;
    height: 3rem;
    padding-right: 0.30rem;
    background: #121212;
}

#brows{
    margin-top: .36rem;
    padding-top: .75rem;
    height: 3rem;
    padding-right: 3rem;
    color: rgb(203, 189, 189);
    border-top-right-radius: 4rem;
    border-bottom-right-radius: 4rem;
    background: #121212;
}

.install{
    display: flex;
    margin-left: 6rem;
}


#download-icon{
    margin-top: 1.8rem;
    height: 2rem;
    color: rgb(236, 226, 226);
}
.install p{
    color: rgb(236, 226, 226);
    margin-right: 2rem;
    margin-top: 1.7rem;
    font-size: 0.90rem;

}

#bell{
    color: rgb(236, 226, 226);
    margin-top: 1.8rem;
    margin-left: 3rem;
}

#group{
    color: rgb(236, 226, 226);
    margin-top: 1.8rem;
    margin-left: 1rem;
}

#spiderman{
    height: 2.5rem;
    width: 2.5rem;
    margin-top: 1rem;
    border-radius: 50%;
    right: 0;
    position: fixed;
    -webkit-box-shadow: 3px -1px 38px 12px rgba(39,47,47,0.93);
    box-shadow: 3px -1px 38px 12px rgba(39,47,47,0.93);
}



.sidebar{
    display: flex;
    flex-direction: column;
    width: 21.25rem;
    background: #121212;
    border-radius: 1rem;
    margin-right: 0.50rem;
}

.library{
    display: flex;
}

.library h2{
    color: white;
    margin-top: 5rem;
    font-weight: 500;
    margin-left: 1rem;
    font-size: 1rem;

}

#plus-icon{
    margin-left: 8rem;
    margin-top: 5.5rem;
    color: rgb(236, 226, 226);
    height: 1rem;
    width: 1rem;
}


#expand-icon{
    margin-left: 2rem;
    margin-top: 5.5rem;
    color: rgb(236, 226, 226);
    height: 1rem;
    width: 1rem;

}

.artist{
    width: 100%;
    display: flex;
    margin-top: 2rem;
    justify-content: center;
    margin-right: 2.5rem;
}

.artist .btn-secondary{
    height: 2rem;
    width: 4.5rem;
    margin-right: 1rem;
    border-radius: 1rem;
    background-color: rgb(47, 46, 46);

}

.search-side{
    width: 100%;
    display: flex;
    margin-top: 1.1rem;
    justify-content: space-around

}
#search-logo-side{
    color: grey;
}

.search-side p{
    margin-left: 12rem;
    color: grey;
}

.artist-photo-name{
    display: flex;
    justify-content: space-around;
}

.recent-pics{
    display: flex;
    flex-direction: column;
    width: 4.5rem;
    position: relative;
    right: 2rem;
    gap: .25rem;
}

.recent-pics img{
    border-radius: 1rem;
}

.artist-name{
    display: flex;
    flex-direction: column;
    color: rgb(236, 226, 226);
    gap: 1.25rem;
    position: relative;
    right: 6rem;
}

.artist-name p{
    color: grey;
    font-size: 1rem;
}

.fa-thumbtack{
    color: rgb(130, 234, 130);
    transform: rotate(35deg);
}




.main-content{
    flex: 1;
    background-image: linear-gradient(to top, #000000, #0e0b0d, #161316, #1c1a1f, #202128);    
    border-radius: 1rem;
    flex-direction: column;
    margin-top: 1rem;
    overflow: auto;
}
.top-main-container{
    display: flex;
    flex-direction: column;
    height: 35%;
    width: 100%;

}

.all-music-podcast{
    display: flex;
    width: 100%;
    height: 15%;
    margin-top: 3rem;
}

.btn-a-m-p{
    display: flex;

    margin-top: .25rem;
    margin-left: .50rem;
}

.btn-a-m-p .btn-sm{
    border-radius: 1rem;
    background-color: rgb(47, 46, 46);
    margin-right: 0.58rem;
}

#btn-all{
    background: white;
    color: black;
    margin-right: .60rem;
    width: 3rem;
}
.top-main-artist{
    display: flex;
    height: 42.5%;
    justify-content: space-evenly;
}

/* .top-main-artist .artist-div{
    height: .1rem;
    width: 1rem;
} */


.top-main-artist2{
    display: flex;
    height: 42.5%;
    justify-content: space-evenly;
}









.sidebar2{
    display: flex;
    flex-direction: column;
    width: 21.25rem;
    background: #121212;
    border-radius: 1rem;
}

.top-side2{
    display: flex;
    justify-content: column;
    height: 10rem;
    width: 100%;
    justify-content: space-around;

}

.top-side2 p{
    color: white;
    margin-top: 4.5rem;
    margin-left: 1rem;
}

.top-side2 img{
    margin-top: 6.5rem;
    right: 5.2rem;
    position: relative;
    height: 21rem;
    width: 100%;
    border-radius: .90rem;
}

.name-share{
    display: flex;
    height: 3rem;
    width: 100%;
    margin-top: 17.5rem;
}

.name-share p {
    color: white;
    margin-left: 2rem;
    font-size: 1.7rem;
    font-weight: 500;
}

#share-btn{
    color: rgb(221, 213, 213);
    margin-left: 2.5rem;
    margin-top: .50rem;
}

#add-btn{
    color: rgb(221, 213, 213);
    margin-left: .25rem;
    margin-top: .50rem;
}


.rel-music{
    display: flex;
    height: 2rem;
    width: 100%;
    color: white;
    margin-top: 1rem;
    margin-left: 1rem;
}

.videos{
    display: flex;
    justify-content: space-between;
    flex-direction: row;
    height: 100%;
    width: 100%;
}

.music-player{
    background: black;
    position: fixed;
    bottom: 0;
    height: 4.5rem;
    width: 100%;
    display: flex;
    flex-direction: row;
}

.player1{
    display: flex;
    flex-direction: row;
    height: 100%;
    width: 21.25rem;
}

.player1 img{
    border-radius: .50rem;
    margin: .1rem;
}

.artist-title-song{
    display: flex;
    flex-direction: column;
    width: 10rem;
    height: 100%;
    gap: 0;
}

#title-song{
    font-size: .88rem;
    font-weight: 300;
    color: white;
    margin-left: .25rem;
    padding-top: 1rem;
}

#title-artist{
    font-size: .80rem;
    font-weight: 200;
    margin-left: .25rem;
    color: grey;
    margin-top: -1rem;
}

#title-add{
    margin-left: 14rem;
    margin-top: -2.5rem;
    color: white;
}

.main-player{
    display: flex;
    flex: 1;
    flex-direction: column;

}


.play-pause{
    display: flex;
    height: 60%;
    justify-content: center;
    gap: 1rem;
}

.icon-backward{
    margin-top: .33rem;
    gap: 1;
    color: grey;
}

.play-pause img{
    height: 85%;
}

.icon-forward{
    margin-top: .33rem;
    gap: 1;
    color: grey;
}


.play-pause-bar{
    display: flex;
    justify-content: center;
    height: 40%;
    width: 100%;
}

.play-pause-bar span{
    color: grey;
    font-size: 1rem;
    margin-top: -.75rem;
}


.main-bar-music{
    width: 55%;
    margin-left: .40rem;
    margin-right: .40rem;
    appearance: none;
    background: white;
    border-radius: 1rem;
    height: .25rem;
}

.main-bar-music::-webkit-slider-thumb{
    appearance: none;
    height: 1rem;
    width: 1rem;
    border-radius: 50%;
    background: green;
}




.player-box{
    display: flex;
    width: 21.25rem;
    cursor: pointer;
}
.player-box img{
    height: 2.3rem;
    margin-top: .85rem;
    margin-right: -.10rem;
}