.music-player {
    background-color: rgba(118, 44, 128, 0.288);
    border: 1px solid whitesmoke;
    border-radius: 25px;
    width: 30rem;
    position: relative;
    margin: auto;
    margin-bottom: 25px;
    backdrop-filter: blur(5px);
    padding: 2rem;
    color: azure;
}

.music-player iframe {
    border-radius: 15px;
}

.player-controls button {
    background-color: #4caf4fb9;
    color: white;
    border: solid whitesmoke 2px;
    border-radius: 3px;
    padding: 5px 10px;
    cursor: pointer;
}

.song-info {
    margin-top: 10px;
}

.playlist {
    margin-top: 20px;
}

.playlist h3 {
    margin-bottom: 5px;
}

.playlist input {
    width: 200px;
    padding: 5px;
    margin-right: 10px;
}

.playlist button {
    padding: 5px 10px;
    cursor: pointer;
}

.playlist ul {
    list-style-type: none;
    padding: 5px;
    margin-top: 15px;
    border: 2px dotted azure;
    border-radius: 15px;
    margin-bottom: 15px;
}

.playlist li {
    margin-bottom: 5px;
    background-color: rgba(118, 44, 128, 0.726);
    padding: 5px;
    border-radius: 15px;
}

.playlist li .remove-btn {
    margin-left: 5px;
    margin-right: 2px;
    padding: 2px 5px;
    background-color: #ff4d4d;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}

.test {
    width: 90%;
}

@media (max-width: 500px) {
    .music-player {
        background-color: rgba(118, 44, 128, 0.288);
        border: 1px solid whitesmoke;
        border-radius: 25px;
        width: 90%;
        position: relative;
        margin: auto;
        margin-bottom: 25px;
        backdrop-filter: blur(5px);
        padding: 1.2rem;
        color: azure;
    }

}