body{
    background-image:url(background.png);
    overflow-x:hidden;
    overflow-y:hidden;
    font-family: 'Open Sans', sans-serif;
}

#footer{
    background-color:black !important;
    position:absolute;
    bottom:-9px;
    left:0px;
    width:100%!important;
    height:15%;
    max-height:120px;/*Otherwise on mobile screens it stretches way too far*/
    color:white;
    z-index:4;
}
.track-art{
    background-size: cover;
    border-radius: 15%;
    height:90px;
    width:90px;
    margin-top:8px;
    margin-left:8px;
    display:inline;
    float:left;
}

.track-name{
    margin-left:10px;
    font-size:150%;
}
.track-artist{
    margin-left:10px;
    color:rgb(176, 176, 176);
    position:relative;
    bottom:10px;
}

.slider_container{
    display:flex;
    justify-content:center;
    position:relative;
    bottom:30px;
}

.seek_slider{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    height: 5px;
    background: rgb(255, 255, 255);
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
    width:40%;
}

.buttons {
    width:300px;
    margin: 0 auto;
    display:table;
    margin-top: -30px;
}
.shuffle_blue{
    color:rgb(69, 101, 158);
}
  
.playpause-track, .prev-track, .next-track, .shuffle-track {
    padding: 10px;
    opacity: 0.8;
  
    /* Smoothly transition the opacity */
    transition: opacity .2s;
}

.playpause-track:hover, .prev-track:hover, .next-track:hover, .shuffle-track:hover {
    opacity: 1.0;
}

i.fa-play-circle, i.fa-pause-circle, i.fa-step-forward, i.fa-step-backward, i.fa-shuffle {
    cursor: pointer;
}
i.fa-play-circle, i.fa-pause-circle{
    font-size:30px!important;
}
i.fa-step-forward, i.fa-step-backward, i.fa-shuffle{
    font-size:20px!important;
}

.playlist{
    width:400px;
    height:100px;
    border-radius:15px;
    background-color:rgb(65, 64, 64);
    opacity:1!important;
    display:inline-block;
    margin-left:5%;
    margin-right:4%;
    margin-top:50px;
}

.playlist:hover{
    filter:brightness(1.2);
    cursor:pointer;
}

.playlist_title{
    color:white;
    font-size:30px;
    display:inline;
    margin-left:50px;
    position:relative;
    top:30px;
}

.playlist_button{
    height:60px;
    width:60px;
    display:inline;
    margin-right:40px;
    margin-top:20px;
    float:right;
}

.playlist_button:hover{
    transform:scale(1.05);
}

.playlist_button:active{
    filter:brightness(0.8);
}

.playlist:hover .playlist_button{
    opacity:1 !important;
}
.playlist_container{
    background-color:rgba(98, 98, 246, 0.2);
    border-radius:15px;
    height:100%;
    margin-top:20px;
    padding-bottom:10%;
}

.playlist_image{
    height:80px;
    width:80px;
    display:inline;
    float:left;
    margin-left:10px;
    margin-top:10px;
    border-radius:5px;
}

#playlist_name{
    border-radius:15px;
    background-color:rgb(51, 51, 51);
    height:40px;
    padding-left:10px;
    color:white;
    border-color:none;
}
#playlist_name:focus{
    outline-color:white;
}
.create_button{
    border-radius:5px;
    color:white;
    background-color:rgb(51, 51, 51);
    height:25px;
}

.current-time{
    position:relative;
    bottom:5px;
    right:5px;
}
.total-duration{
    position:relative;
    bottom:5px;
    left:5px;
}

#playlist_header{
    color:white;
    font-size:30px;
    margin-left:7%;
    padding-top:5%;
    display:inline;
    margin-top:100px;
}

.playlist_viewer{
    background-color:rgba(98, 98, 246, 0.2);
    border-radius:15px;
    margin-top:20px;
    overflow:scroll !important;
    height:100%;
}

.invisible{/*To add to things in JS*/
    display:none !important;
}

#create_playlist{
    display:inline;
    float:right;
    margin-right:50px;
    color:white;
    font-size:40px;
    position:relative;
    bottom:50px;
    cursor:pointer;
}
#create_playlist::after {
    content: "Create Playlist";
    font-size:20px;
    background-color:rgb(53, 47, 47);
    padding:10px;
    border-radius:4px;
    position: absolute;
    top: -40px; /* Adjust the distance from the button */
    left: 50%; /* Center the text */
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    white-space:nowrap;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}
  
#create_playlist:hover::after {
    opacity: 1;
    visibility: visible;
}

.playlist_form{
    position:absolute;
    right:170px;
    background-color:rgb(53, 47, 47);
    padding:15px;
    border-radius:4px;
    margin-top:15px;
}

.triangle {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 20px solid rgb(53,47,47); /* Adjust color and size as needed */
    margin-top:-35px;
    margin-left:83px;
}

#search_bar{
    float:right;
    display:inline;
    width:30px;
    height:30px;
    margin-right:15%;
    cursor:pointer;
}

.search_engine{
    background-color:rgba(98, 98, 246, 0.2);
    border-radius:15px;
    height:100%;
    margin-top:20px;
    overflow-x:scroll !important;
}

.backarrow{
    width:50px;
    margin:30px;
    cursor:pointer;
}

#search{
    width:35%;
    height:60px;
    border-radius:30px;
    background-color:rgb(51, 51, 51);
    color:white;
    padding-left:50px;
}

#search:focus{
    outline-color:white;
}
#search::placeholder{
    color:gray;
}
#searchbar_icon{
    position:absolute;
    left:15;
    top:-5;
    width:30px;
}
#search_container{
    position:relative;
    display:inline;
    top:22px;
    vertical-align:top;
}

.subtitle{
    color:white;
    font-size:28px;
    margin-left:100px;
}

.song_container{
    height:50px;
    border-radius:5px;
    margin-left:20px;
    margin-bottom:5px;
    width: 45%; /* Set the width to 50% for two columns per line */
    min-width:300px;
    box-sizing: border-box;
    cursor:pointer;
    position:relative;
}
.song_container:hover{
    background-color:rgb(51, 51, 51);
}

#song_display{
    width:75%;
    min-width:300px;
    display:flex;
    flex-wrap:wrap;
    margin-left:50px;
    padding-bottom:10%;
}

.song_image{
    height:40px;
    width:40px;
    vertical-align: middle;
    margin:5px;
    border-radius:2px;
}

.song_name{
    color:white;
    font-size:15px;
    margin-left:20px;
    position:relative;
    bottom:60px;
    left:40px;
}

.artist_name{
    color:rgb(176, 176, 176);
    font-size:12px;
    position:relative;
    bottom:70px;
    left:60px;
}

.playlist_ellipsis{
    font-size:30px;
    color:white;
    position:relative;
    bottom:155px;
    font-family:'Circular' !important;
    float:right;
    margin-right:10px;
}
.hidden{
    visibility:hidden;
}
.song_container:hover .playlist_ellipsis, .row:hover .more_button{
    visibility:visible;
}

.playlist_thumbnail{
    height:200px;
    width:200px;
    display:inline;
    margin-left:100px;
}
.playlist_label{
    color:white;
    font-size:small;
    display:inline;
    margin-left:30px;
    vertical-align:top;
    position:relative;
    top:30px;
}
.title_playlist{
    font-size:100px;
    display:inline;
    vertical-align:top;
    margin-left:-50px;
    position:relative;
    top:70px;
    color:white;
}
.playlist_details{
    height:210px;
    white-space: nowrap;
    overflow:hidden;
}

.playlist_songs{/*Container for all the playlist songs*/
    height:100%;
    margin-top:20px;
    width:90%;
    margin-left:auto;
    margin-right:auto;
    border-top:solid;
    border-color:white;
}

.playlist_song{/*Container for each individual song*/
    height:70px;
    border:solid;
}
.playlist_song:hover{
    background-color:rgb(51, 51, 51);
}

.song_number{
    color:gray;
    font-size:30px;
    display:inline;
    margin-left:15px;
    position:relative;
    top:15px;
    font-weight:lighter;
    margin-left:0px;
}

.song_picture{
    height:60px;
    width:60px;
    display:inline;
    margin-left:5%;
    position:relative;
    top:5px;
}
.table {
    display: grid;
    color:white;
    margin-bottom:15%;
}
  
.row {
    display: grid;
    grid-template-columns: 0.4fr 2fr 1fr 1fr 1fr; /* Adjust the number of columns as needed */
    cursor:pointer;
}
@media (max-width:950px){
    .row{
        grid-template-columns: 0.4fr 2fr 1fr 0fr 1fr;/*getting rid of date added column*/
    }
    .row2{
        grid-template-columns: 0.4fr 2fr 1fr 0fr 1fr;
    }
}

@media (max-width:730px){
    .row{
        grid-template-columns: 0.4fr 3fr 0fr 0fr 0.6fr !important;/*getting rid of date added column*/
    }
    .row2{
        grid-template-columns: 0.4fr 3fr 0fr 0fr 0.6fr !important;
    }
    .more_button{
        margin-right:0px;
    }
}
@media (max-width:575px){
    .row{
        grid-template-columns: 0fr 3fr 0fr 0fr 1fr !important;/*getting rid of date added column*/
    }
    .row2{
        grid-template-columns: 0fr 3fr 0fr 0fr 1fr !important;
    }
}
.row:hover{
    background-color:rgb(51, 51, 51);
}
.row2{/*I made a duplicate row intentionally for the header so that you can't hover over it(let me know if theres an easier way to do this*/
    display: grid;
    grid-template-columns: 0.4fr 2fr 1fr 1fr 1fr; /* Adjust the number of columns as needed */
    cursor:pointer;
}
.cell,.cell1,.cell2,.cell3,.cell4, .cell5{
    padding: 8px;
}
.cell1{/*Song Number*/
    grid-column:1;
    min-width:50px;
}
.cell2{/*Album Cover and Title*/
    margin-left:5px;
    grid-column:2;
    min-width:300px;
    width:110%;
    white-space: nowrap;
    overflow:hidden;
}
.cell4{/*Date Added*/
    width:45%;
}
.cell5{/*...*/
    float:right;
    position:relative;
    margin-right:0px;
}
.songlist_title{
    display:inline;
    margin-left:15px;
    font-size:24px;
    position:relative;
    bottom:15px;
}
.songlist_artist{
    position:relative;
    top:5px;
}

.rightclick_container{
    width:150px;
    position:absolute;
    right:-55px;
    top:40px;
    z-index:3;
    border-radius:3px;
    background-color:rgb(51, 51, 51);
    box-shadow: 1.5rem 1.5rem 5rem #0003;
}
.playlist_rightclick_container{
    width:200px;
    position:absolute;
    right:0px;
    top:40px;
    z-index:3;
    border-radius:3px;
    background-color:rgb(51, 51, 51);
    box-shadow: 1.5rem 1.5rem 5rem #0003;
}
.add_to_playlist{
    color:white;
    font-size: 17px;
    margin-left:15px;
}

.rightclick_subcontainer{
    margin:2px;
    border-radius:3px;
    padding-top:1px;
    padding-bottom:1px;
    position:relative;
}
.addtoplaylist_subcontainer{
    color:white;
    font-size:20px;
    margin:5px 5px 0px 5px;
    padding-top:10px;
    padding-bottom:10px;
    border-radius:3px;
    padding-left:10px;
}

.rightclick_subcontainer:hover, .addtoplaylist_subcontainer:hover{
    background-color:rgb(81, 81, 81);
}

.choose_playlist{
    width:150px;
    position:absolute;
    top:0px;
    right:-150px;
    background-color:rgb(51, 51, 51);
    opacity:0;
    padding-bottom:5px;
}
.choose_playlist:hover, #add_to_playlist:hover .choose_playlist{
    opacity:1;
}

.more_button{
    font-size:30px;
    color:white;
    font-family:'Circular' !important;
    float:right;
    margin-top:5px;
    margin-right:50px;
}

.date_added{
    position:relative;
    top:5px;
}