@media (max-width: 432px) {
    .buttons {
        display: flex;
        align-items: flex-end;
        gap: 0px;
        margin-right: 10px;
        padding: 0 0 2px 1px;
    }
    .loginbtn{
    background-color: white;
    color: black;
    border-radius: 24px;
    padding: 10px;
    font-size: 13px;
    white-space: nowrap;
    cursor: pointer;
    width: auto;
}
.signupbtn{
    font-weight: bold;
    background-color: rgb(34,34,34);
    color: rgb(82, 81, 81);
    border: 2px solid rgb(34,34,34);
    padding: 10px;
    border-radius: 4px;
    width: auto;
    white-space: nowrap;
    cursor: pointer;
    font-size: 13px;
}
.songbtn{
    gap: 7px;
}
.vol img{
    width:18px;
}
.vol{
    flex-direction: column;
}
}

@media (max-width:1400px) {
    .left{
        background-color: rgb(0, 0, 0);
        position: absolute;
        left: -100%;
        transition: all .3s;
        z-index: 3;
        width: 233px;
    }
    .left .close{
        position: absolute;
        right: 24px;
        display: block;
        top:  24px;
        width: 24px;
    }
    .seekbar{
        width: 80%;
    }
    .playbar{

    }
    .right{
        width: 100vw;
    }
    .playbar{
        width: 100vw;
    }
    .hamburger{
        display: block;
    }
}
@media (max-width: 432px) {
  .songbtn { gap: 7px; }
  .vol img { width: 18px; }
  .vol input[type="range"] { width: 80px; }
}