/* RESPONSIVE */

/* MOBILE-S */
@media screen and (min-width:600px) {
    :root {
        --sidebar-width: 200px;
    }

    /* sidebar */

    #spotify-small {
        display: none;
        padding: 10px;
    }

    #spotify-big {
        display: block;
        width: 160px;
        padding: 5px 0;
    }

    .text {
        display: inline-block;

    }

    h4 {
        display: inline-block;
    }

    .nav-bar {
        height: 80px;
    }

    .square {
        display: flex;
    }

    .round {
        display: flex;
    }

    .sidebar {
        align-items: flex-start;
        padding-left: 10px;
    }

    .playlist-listflex {
        display: flex;
    }

    .sidefooter-display {
        display: inline;
    }

    .sidebar hr {
        width: 150px;
    }

    .flex-row {
        column-gap: 5px;
        text-align: center;
    }

    .sidebar hr {
        display: inline-block
    }

    .green-bar-vert {
        display: block;
    }

    



    /* main */
    .card {
        width: calc(100% / 2 - (10px * 2)) min-height: 200px;
    }


    /* bottom */
    .left {
        column-gap: 20px;
        padding: 0 15px;
    }

    .sub-info {
        display: flex;
        flex-direction: row;
        column-gap: 3px;

    }

    .left img {
        width: 40px;
        height: 40px;
    }

    .player {
        padding: 0 20px;
    }

    .right {
        padding: 0 5px;
    }

    .bar {
        width: 70%;
    }

    .bar-volume {
        width: 80px;
    }
}

/* TABLET-MD */

@media screen and (min-width: 700px) {

    .sidebar {
        width: 25%;
    }

    .main-content {
        width: 75%;
    }

    .nav-bar {
        height: 60px;
    }

    .card-box {
        justify-content: flex-start;

    }

    .card {
        width: calc(100% / 4 - (10px * 3) / 4);
    }

    .icons {
        flex-direction: row;
        column-gap: 10px;
    }

    .left img {
        width: 50px;
        height: 50px;
    }

    .right {
        column-gap: 20px;
        width: 250px;
    }

    .left {
        width: 250px;
    }

    .bar {
        width: 90%;
    }

    .bar-volume {
        width: 100px;
    }
}

/* DESKTOP-LG */

@media screen and (min-width: 1100px) {
    .sidebar {
        width: 20%;
    }

    .main-content {
        width: 80%;
    }

    .nav-bar {
        height: 30px;
        justify-content: space-evenly;
    }

    .nav-bar ul {
        flex-wrap: nowrap;
        gap: 40px;
    }

    .card {
        width: calc(100% / 6 - (10px * 5) / 6);
    }

    .player-top {
        justify-content: center;
        column-gap: 20px;
    }

    .right {
        width: 250px;
    }

    .left {
        width: 250px;
    }

    .bar-volume {
        width: 120px;
    }
}