/* these are all the media queries for "Single Playlist.html" page with the desktop first approach*/
@media screen and (max-width: 1200px) {
    /* animated favourites text will be hidden for this viewport width*/
    .favs {
        display: none !important;
    }
    /* reduced size of search bar */
    .search-bar {
        width: 35%;
    }
    input {
        font-size: 11px !important;
    }
    .song-name-main h1 {
        font-size: 2.4vw;
    }
    .desc {
        font-size: 1.2vw;

    }
}
@media screen and (max-width: 900px) {
    /* jumbotron description */
    .desc {
        font-size: 1.6vw;

    }
    /* more button vil ve visible and section 2 will be hidden by default for this viewport */
    label {
        display: block;
    }
    /* hidden section 2 by default */
    .section-2 {
        visibility: hidden;
        opacity: 0;
        position: absolute;
        width: 300px;
        height: 68vh;
        background-color: #050043;
        box-shadow: 0px 0px 2px 1px white;
        right: 0px;
        top: 23.5%;
        overflow: scroll;
        padding-left:10px;
        z-index: 5;
        padding-right:5px;
        transition:visibility ease-in-out 0.3s;
        transition: opacity ease-in-out 0.3s;
    }
    /* more button */
    input[type="checkbox"]:checked ~ .section-2 {
        visibility: visible;
        opacity: 1;
    }
    .list {
        overflow: hidden;
        height: auto;
    }
    .list-item {
        background-color: #1a1e33;
    }
    /* hide section 2 scrollbar */
    .section-2::-webkit-scrollbar {
        display: none;
    }
    /* when the section 2 is hidden, section-1 width becomes 100% to cover the whole page */
    .section-1 {
        width: 100%;
    }
    /* jumbotron */
    .jumbotron {
        height: 30vw;
    }
    /* image in the jumbotron */
    .jumbotron-image {
        height: 30vw;
        width: 30vw;
    }
    /* buttons and all */
    .action-part p {
        font-size: 2vw;
    }
    .btns > button {
        height: 4vw;
        width: 11vw;
        font-size: 1.7vw;
    }
}
@media screen and (max-width: 700px) {
    /* in the screens of this width, generally volume buttons are provided at the side. */
    /* so there is no need for the volume slider at this width. so i have removed them from the display */
    /* followers and author */
    .followers,
    .author {
        font-size: 2vw;
    }
    /* jumbotron description */
    .desc {
        font-size: 1.8vw;

    }
    /* extra icons in the footer at the right hand side */
    .extras > div:nth-child(3) {
        display: none;
    }
    .extras > div:nth-child(4) {
        display: none;
    }
}
@media screen and (max-width: 550px) {
    /* this is the most important media query */
    /* navigation bar section */
    /* website image */
    .website-logo img {
        height: 30px;
        width: 30px;
    }
    /* website name */
    .website-name h1 {
        font-size: 3vw;
    }
    /* website name */
    .website-name h4 {
        font-size: 2vw;
    }
    
    /* notification bell */
    .notification-bell img {
        width: 20px;
        height: 20px;
    }
    /* profile picture */
    .profile-picture img {
        width: 30px;
        height: 30px;
    }
    /* notification bell and profile picture */
    .notification-bell{
        margin-top: 8px;
    }
    .profile-picture {
        margin-top: 8px;
    }
    .song-name-main h1 {
        font-size: 3vw;
    }
    /* followers and author */
    .followers,
    .author {
        font-size: 3vw;
    }
    /* jumbotron description */
    .desc {
        font-size: 3vw;

        padding-left: 4px;
    }
    /* buttons and all in the jumbotron */
    .action-part {
        padding-top: 0px;
    }
    /* jumbotron */
    .jumbotron {
        height: 60vw;
        text-align: justify;
    }
    /* image in the jumbotron */
    .jumbotron-image {
        height: 60vw;
        width: 60vw;
    }
    /* buttons and stuff */
    .btns > button {
        height: 8vw;
        width: 17vw;
        font-size: 3.2vw;
    }
    /* this is the image in the footer section of the page. due to less space, it has to be removed at such lower resolutions. */
    /* there is another option, but it will look messy and small */
    #song-image {
        display: none;
    }
}