/* Music player courtesy of Rob Mulizzo */

/* =========================================
   MUSIC PLAYER
   ========================================= */
.music-player {
    width: 100%;
    max-width: 500px;
    margin: 0 auto;

    display: flex;
    align-items: center;
    gap: 15px;

    text-align: center;
}

/* =========================================
   ALBUM ART
   ========================================= */
.music-player-art {
    width: 40%;
    max-width: 180px;
    flex-shrink: 0;
    margin: 0;
}

.music-player-art img {
    width: 100%;
    height: auto;
    display: block;

    aspect-ratio: 1 / 1;
    object-fit: cover;
}

/* =========================================
   PLAYER INFORMATION / CONTROLS
   ========================================= */
.music-player-info,
.music-player-progress,
.music-player-controls,
.music-player-volume {
    width: 100%;
}

.music-player-info {
    margin-bottom: 15px;
}

/* =========================================
   RIGHT SIDE OF PLAYER
   ========================================= */
.music-player-art + .music-player-info {
    /* Keeps the information and controls grouped
       together on the right side */
}

/* =========================================
   SONG INFORMATION
   ========================================= */
#player-title {
    font-size: 18px;
    font-weight: bold;
}

#player-artist {
    font-size: 14px;
}

/* =========================================
   PROGRESS BAR
   ========================================= */
.music-player-progress {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin-bottom: 10px;
}

.music-player-progress span {
    font-size: 12px;
    min-width: 35px;
}

#player-current-time {
    text-align: right;
}

#player-duration {
    text-align: left;
}

#player-progress {
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

/* =========================================
   PLAYER CONTROLS
   ========================================= */
.music-player-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

.music-player-controls button {
    font-family:
        'Courier New',
        Courier,
        monospace;

    font-size: 16px;
    font-weight: bold;

    background: none;
    border: none;

    padding: 5px 10px;

    cursor: pointer;
}

.music-player-controls button:hover {
    background: #e7aa61;
    color: black;
}

/* =========================================
   VOLUME
   ========================================= */
.music-player-volume {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;

    margin-bottom: 15px;
}

#player-volume {
    width: 120px;
    cursor: pointer;
}

/* =========================================
   PLAYLIST
   ========================================= */
.music-player-playlist {
    width: 100%;
    margin-top: 10px;
}

.music-player-song {
    display: flex;
    align-items: center;
    gap: 10px;

    width: 100%;
    padding: 6px;

    cursor: pointer;
    text-align: left;
}

.music-player-song:hover {
    background: rgba(231, 170, 97, 0.5);
}

.music-player-song.active {
    background: rgba(180, 180, 180, 0.6);
    font-weight: bold;
}

.music-player-song img {
    width: 40px;
    height: 40px;

    object-fit: cover;
    flex-shrink: 0;
}

.music-player-song-info {
    min-width: 0;
}

.music-player-song-title {
    font-size: 14px;
}

.music-player-song-artist {
    font-size: 12px;
}

/* =========================================
   MOBILE
   ========================================= */
@media (max-width: 500px) {
    .music-player {
        gap: 10px;
    }

    .music-player-art {
        width: 35%;
        max-width: 120px;
    }

    .music-player-controls button {
        padding: 8px 6px;
    }

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

    #player-artist {
        font-size: 12px;
    }

    #player-volume {
        width: 80px;
    }
}

.music-player-controls-side {
    flex: 1;
    min-width: 0;
}