/* ===========================
   GLOBAL PLAYER
=========================== */

#ofm-player{

    position:fixed;

    left:0;
    right:0;
    bottom:0;

    height:96px;

    background:#151515;

    border-top:1px solid rgba(255,255,255,.06);

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 32px;

    z-index:9999;

    backdrop-filter:blur(18px);

    box-shadow:0 -10px 35px rgba(0,0,0,.45);

    transition:.3s ease;
}

#ofm-player:hover{

    box-shadow:0 -15px 45px rgba(0,0,0,.6);

}
/* ===========================
   LEFT
=========================== */

.player-left{

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

    width:320px;
}

#player-cover{

    width:64px;
    height:64px;
	transition:.35s ease;
    border-radius:12px;

    object-fit:cover;

    box-shadow:0 8px 20px rgba(0,0,0,.35);
}

#player-title{

    margin:0;

    font-size:1.1rem;

    color:#fff;

    font-weight:700;
}

#player-artist{

    margin-top:4px;

    color:#999;

    font-size:.9rem;
}

/* ===========================
   CENTER
=========================== */

.player-center{

    display:flex;
    align-items:center;
    gap:18px;
}

.player-center button{

    width:48px;
    height:48px;

    border:none;

    border-radius:50%;

    background:#fff;

    color:#111;

    cursor:pointer;

    font-size:18px;

    transition:.25s;
}

.player-center button:hover{

    transform:scale(1.08);

    background:#f4c430;
}

#player-play{

    width:68px;
    height:68px;

    font-size:28px;

    background:#f4c430;

    color:#111;

    box-shadow:0 0 25px rgba(244,196,48,.35);
}

#player-play:hover{

    transform:scale(1.08);

    box-shadow:0 0 35px rgba(244,196,48,.55);
}

.player-center button:active{

    transform:scale(.92);

}

#player-cover.playing{

    animation:spinAlbum 12s linear infinite;

}

@keyframes spinAlbum{

    from{

        transform:rotate(0);

    }

    to{

        transform:rotate(360deg);

    }

}