div.player {
    background-color: #eee;
    border-radius: 10px;


    width: 410px;
    height: auto;
    margin-top: -8%;

    transition: margin-top 0.6s ease, margin-bottom 0.6s ease;
}

div#info {
    color: black;

    padding-left: 5px;

    height: 80px;
}

h3#title {
    font-size: 15px;
}

p#desc {
    font-size: 13px;
}

ul#playlist {
    color: black;
}

.controls {
    display: flex;
    align-items: center;

    gap: 8px;

    width: 95%;
}

.player audio {
    flex: 1;
}

.player button {
    background: #d8d8d8;
    border: 1px solid #ccc;
    border-radius: 10px;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
}

.player button:hover {
    border-radius: 10px;
}

#playlist {
    margin-top: 0px;
    list-style: none;
    padding: 0;
}

#playlist li {
    cursor: pointer;
    padding: 4px 6px;

    border-bottom: 1px solid rgba(0, 0, 0, 0.164);
    border-radius: 10px;
}

#playlist li:hover {
    background: #f0f0f0;
}

@media (max-width: 576px) {
    div.player {
        width: auto;
    }
}