/* Reset */

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:'Poppins',sans-serif;
}

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
}

/* ==========================
   BACKGROUND VIDEO
========================== */


.online{
    position: fixed;
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999;

    padding: 6px 14px;
    border-radius: 20px;

    background: rgba(0,0,0,.35);
    backdrop-filter: blur(10px);

    color: #fff;
    font-size: 14px;
    font-weight: 600;

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

#onlineCount{
    color: #65ff8a;
    font-weight: 700;
}
 
 
 
 
 
.bg-video{
    position: fixed;
    top: 0;
    left: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center center;

    transform: scale(1);   /* Zoom */
    transform-origin: center center;

    z-index: -3;
}

/* Dark Overlay */

.video-overlay{
    position:fixed;
    inset:0;

    background:rgba(0,0,0,.20);

    z-index:-2;
}

/* Rain Glass */

.glass{
    position:fixed;
    inset:0;

    background:url("images/rain.png") center center/cover no-repeat;

    opacity:.28;

    pointer-events:none;

    z-index:-1;

    animation:rainMove 20s linear infinite;
}

@keyframes rainMove{

    from{
        transform:translateY(0);
    }

    to{
        transform:translateY(25px);
    }

}

/* ==========================
   BODY
========================== */

body{

    display:flex;

    justify-content:center;

    align-items:flex-end;

    padding-bottom:30px;

    color:#fff;
}

/* ==========================
   MINI PLAYER
========================== */

.player{

    width:260px;

    padding:15px;

    border-radius:18px;

    background:rgba(255,255,255,.08);

    border:1px solid rgba(255,255,255,.15);

    backdrop-filter:blur(15px);
    -webkit-backdrop-filter:blur(15px);

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

    text-align:center;

    z-index:100;
}

/* Song */

.player h2{

    font-size:18px;

    font-weight:600;
}

.player p{

    margin-top:4px;

    font-size:12px;

    color:#ddd;
}

/* Progress */

#progress{

    width:100%;

    margin:14px 0;

    accent-color:#ff6b1a;

    cursor:pointer;
}

/* Buttons */

.buttons{

    display:flex;

    justify-content:center;

    align-items:center;

    gap:15px;
}

.buttons button{

    width:40px;

    height:40px;

    border:none;

    border-radius:50%;

    background:rgba(255,255,255,.15);

    color:#fff;

    font-size:17px;

    cursor:pointer;

    transition:.25s;
}

.buttons button:hover{

    transform:scale(1.1);

    background:rgba(255,255,255,.25);
}

#play{

    width:55px;

    height:55px;

    font-size:24px;

    background:#ff6b1a;
}

#play:hover{

    background:#ff7a2f;
}

/* Hide Volume */

.volume{

    display:none;
}