*{
    margin: 0px;
    font-family: Arial, Helvetica, sans-serif;
    border: border-box;
    font-size: 20px;
}
body{
    background-color: black;
}
header{
    display: flex;
    height: 64px;
    width: 100%;
    background-color: black;
    align-items: center;
    justify-content: space-evenly;
}
.logo-container{
    background-image: url(Logo.png);
    background-size: cover;
    height: 40px;
    width: 40px;
    justify-self: left;
    
}
.home{
    height: 50px;
    width: 50px;
    font-size: 2rem;
    background-color: #1f1f1f;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: white;
    
}
.search-bar{
    display: flex;
    height: 50px;
    width: 500px;
    align-items: center;
    background-color: #1f1f1f;
    border-radius: 25px;
    justify-content: space-evenly;
}
.search{
    height: 50px;
    width: 64px;
    background-color: #1f1f1f;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #b3b3b3;
    border-top-left-radius: 25px;
    border-bottom-left-radius: 25px;
    

}
.browse{
    height: 50px;
    width: 64px;
    background-color: #1f1f1f;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #b3b3b3;
    border-top-right-radius: 25px;
    border-bottom-right-radius: 25px;
}
input{
    all:unset
}
.search-box{
    border: none;
    width: 100%;
    background-color: #1f1f1f;
    height: 50px;
    align-items: center;
    display: flex;
    
    align-items: center;
}
.search-box input{
    height: fit-content;
    width: 100%;
    color: #b3b3b3;
    font-size: 0.9rem;
    font-weight: bold;
}
.tags{
    display: flex;
    justify-content: space-evenly;

}
.tags a{
    text-decoration: none;
    color: #b3b3b3;
    font-weight: bold;
    margin-left: 3px;
    margin-right: 3px;
    font-size: 0.8rem;
}
.install{
    display: flex;
    justify-content: space-evenly;
}
.install a{
    text-decoration: none;
    color: #b3b3b3;
    font-weight: bold;
    margin-left: 3px;
    margin-right: 3px;
    font-size: 0.8rem;
}
.install i{
    color: #b3b3b3;
    font-weight: bold;
    margin-left: 3px;
    margin-right: 3px;
    font-size: 0.8rem;
}
.sign-up{
    display: flex;
    justify-content: space-evenly;
}
.sign-up a{
    text-decoration: none;
    color: #b3b3b3;
    font-weight: bold;
    margin-left: 3px;
    margin-right: 3px;
    font-size: 0.8rem;
}
.log-in{
    display: flex;
    justify-content: space-evenly;
    background-color: white;
    border-radius: 25px;
    height: 50px;
    width: 100px;
    align-items: center;
}
.log-in a{
    text-decoration: none;
    color: black;
    font-weight: bold;
    margin-left: 3px;
    margin-right: 3px;
    font-size: 0.8rem;
}

.main-page{
    margin-top: 10px;
    width: 100%;
    height: auto;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;
}
.library{
    height: 550px;
    width: 25%;
    background-color: #121212;
    border-radius: 10px;
    align-items: center;
}
.title-card-library{
    display: flex;
    width: 100%;
    margin-bottom: 20px;
    padding-top: 10px;
    align-items: center;
    justify-content: space-between;
}
.title-card-library span{
    color: white;
    font-weight: bold;
    margin-left: 5px;
}
.create{
    height: 40px;
    width: 120px;
    background-color: #1f1f1f;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    justify-self: right;
    padding-right: 10px;
    margin-right: 5px;
    

}
.create a{
    text-decoration: none;
    color: white;
    margin-left: 3px;
    margin-right: 3px;
    font-weight: bold;
}
.create i{
    color: white;
    font-weight: lighter;
    font-size: 1.5rem;
}

.contents-library{
    height: fit-content;
    width: 90%;
    margin: 10px;
    border-radius: 10px;
    background-color: #1f1f1f;
    justify-self: center;
    padding-block: 10px;
}
.create2{
    height: 40px;
    width: fit-content;
    background-color: #ffffff;
    border-radius: 25px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin :10px;
    
}
.create2 a{
    text-decoration: none;
    color: #1f1f1f;
    margin-left: 3px;
    margin-right: 3px;
    font-weight: bold;padding-inline: 5px;
}

.heading{
    font-weight: bold;
    color: white;
}
.desc{
    color: #b3b3b3;
    font-size: 0.9rem;
}
.contents-library p{
    margin: 10px;
}
.legal{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 5px;
}
.legal a{
    text-decoration: none;
    color: #b3b3b3;
    margin: 5px;
    font-size: small;
}
.bold{
    font-weight: bold;
    color: #ffffff;
}
.lang{
    height: 40px;
    width: 120px;
    border-radius: 20px;
    border-color: #b3b3b3;
    border-width: 1px;
    border-style: solid;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 10px;
    align-self: flex-end ;

}
.lang a{
    text-decoration: none;
    color: #b3b3b3;
    margin: 5px;
}
.lang i{
    color: #b3b3b3;
    margin: 5px;
}
.recommendation{
    height: 550px;
    width: 73%;
    background: linear-gradient(to bottom,#4e4e4e,#1f1f1f, #1f1f1f,#121212);
    border-radius: 10px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.content-row-recomendations{
    width: 100%;
    height: 300px;
    background-color: transparent;
    display: flex;
    flex-direction: column;
}
.title-bar-content-row{
    display: flex;
    width: 100%;
    height: 50px;
    background-color: transparent;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 5px;
}

.title-bar-content-row a{
    text-decoration: none;
    margin-inline: 30px;

}
.light{
    color: #b3b3b3;
}

.album-list-content-row{
    display: flex;
    width: 100%;
    height: 100%;
    background-color: transparent;
    align-items: center;
    margin-inline: 10px;
    overflow-x: scroll;
}

.album{
    background-color: transparent ;
    height: 100%;
    width: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.cover{
    background-image: url(SampleAlbumCover.png);
    background-size: cover;
    background-color: aquamarine;
    border-radius: 5px;
    width: 180px;
    height: 180px;
    margin-top: 10px;
}
.album-name a{
    text-decoration: none;
    color: #ffffff;
    
}
.album-name{
    margin-top: 10px;
}
.cover-artists{
    background-image: url(SampleAlbumCover.png);
    background-size: cover;
    background-color: aquamarine;
    border-radius: 50%;
    width: 180px;
    height: 180px;
    margin-top: 10px;
}
.pls-pay{
    height: 80px;
    width: 99%;
    background: linear-gradient(to right, rgb(255, 60, 92), rgb(121, 213, 255));
    margin-top: 10px;
    align-items: center;
    display: flex;
    justify-content:space-between ;
    border-radius: 10px;
    
}
.pls-pay p{
    color: white;
    font-weight: bold;
    margin-inline-start: 20px;
}