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

html,body{
    height:100%;
}

body{
    background:#111;
    color:#d5d5d5;
    overflow:hidden;
}

.video-background{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    z-index:-3;
}

.overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.87);
    z-index:-2;
}

.header{
    height:70px;
    display:flex;
    align-items:center;
    padding-left:25px;
    background:#1a1a1a;
    border-bottom:1px solid #303030;
    font-size:40px;
    font-weight:bold;

    box-shadow:
        0 0 15px rgba(139,197,63,.15),
        0 0 35px rgba(139,197,63,.08);
}

.white{
    color:white;
}

.green{
    color:#8bc53f;
}

.layout{
    display:flex;
    height:calc(100vh - 70px);
}

.sidebar{
    width:380px;
    min-width:380px;
    background:#171717;
    border-right:1px solid #303030;

    padding:15px;

    display:flex;
    flex-direction:column;
    gap:15px;

    box-shadow:
        0 0 25px rgba(139,197,63,.10);
}

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

    height:95px;

    padding-left:30px;

    color:#d5d5d5;
    text-decoration:none;

    background:#1f1f1f;

    border:1px solid #303030;

    border-radius:16px;

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

    transition:.15s;

    box-shadow:
        0 0 10px rgba(139,197,63,.08);
}

.nav:hover{
    background:#262626;

    transform:translateX(5px);

    box-shadow:
        0 0 20px rgba(139,197,63,.15);
}

.active{
    color:#8bc53f;
    border-color:#8bc53f;

    box-shadow:
        0 0 10px rgba(139,197,63,.25),
        0 0 20px rgba(139,197,63,.15),
        0 0 35px rgba(139,197,63,.08);
}

.content{
    flex:1;

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

    padding:40px;
}

.page{

    width:100%;
    max-width:1400px;

    animation:fadeIn .25s ease;
}

.card{
    width:100%;

    background:#1b1b1b;

    border:1px solid #303030;

    border-radius:18px;

    overflow:hidden;

    box-shadow:
        0 0 15px rgba(139,197,63,.10),
        0 0 35px rgba(139,197,63,.05);
}

.card-title{
    background:#252525;

    color:#8bc53f;

    padding:20px 25px;

    border-bottom:1px solid #303030;

    font-weight:bold;

    font-size:24px;

    text-shadow:
        0 0 8px rgba(139,197,63,.35);
}

.item{
    display:block;

    padding:28px 25px;

    color:#d5d5d5;

    text-decoration:none;

    border-bottom:1px solid #2a2a2a;

    font-size:24px;

    transition:.15s;
}

.item:last-child{
    border-bottom:none;
}

.item:hover{
    background:#242424;
    color:#8bc53f;

    box-shadow:
        inset 0 0 15px rgba(139,197,63,.12);
}

.home-card{
    text-align:center;
    padding:180px 80px;
}

.home-card h1{
    font-size:110px;
    margin-bottom:20px;

    text-shadow:
        0 0 10px rgba(139,197,63,.25),
        0 0 30px rgba(139,197,63,.15);
}

.home-card p{
    font-size:30px;
    color:#9a9a9a;
}

.view-counter{
    position:fixed;

    top:20px;
    right:25px;

    z-index:9999;

    background:#161616;

    border:1px solid #8bc53f;

    border-radius:14px;

    padding:15px 25px;

    box-shadow:
        0 0 10px rgba(139,197,63,.6),
        0 0 25px rgba(139,197,63,.4),
        0 0 50px rgba(139,197,63,.2);
}

.counter-title{
    color:#8bc53f;
    font-size:12px;
    letter-spacing:1px;
}

.counter-number{
    color:white;

    font-size:34px;

    font-weight:bold;

    text-shadow:
        0 0 5px rgba(139,197,63,.8),
        0 0 15px rgba(139,197,63,.5);
}

.music-bar{
    position:fixed;

    bottom:25px;

    left:calc(380px + ((100vw - 380px) / 2));

    transform:translateX(-50%);

    width:420px;

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

    gap:15px;

    padding:15px 25px;

    background:#161616;

    border:1px solid #8bc53f;

    border-radius:14px;

    z-index:9999;

    box-shadow:
        0 0 10px rgba(139,197,63,.6),
        0 0 25px rgba(139,197,63,.4),
        0 0 50px rgba(139,197,63,.2);
}

.music-bar span{
    color:#8bc53f;
    font-weight:bold;
    font-size:15px;

    text-shadow:
        0 0 8px rgba(139,197,63,.5);
}

.music-bar input[type="range"]{
    width:280px;
    cursor:pointer;
}
/* SOCIAL ICONS */

.social-icons{
    display:flex;
    justify-content:center;
    align-items:center;
    gap:100px;
    padding:100px 50px;
}

.social-icon{
    width:140px;
    height:140px;

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

    text-decoration:none;

    color:#8bc53f;

    font-size:75px;

    border:1px solid #8bc53f;
    border-radius:20px;

    background:#1d1d1d;

    transition:.2s;

    box-shadow:
        0 0 15px rgba(139,197,63,.25),
        0 0 30px rgba(139,197,63,.15);
}

.social-icon:hover{
    transform:scale(1.08);

    color:white;

    box-shadow:
        0 0 20px rgba(139,197,63,.7),
        0 0 40px rgba(139,197,63,.4),
        0 0 70px rgba(139,197,63,.25);
}
/* CLOCK */

.clock-box{
    position:fixed;

    top:145px;
    right:25px;

    z-index:9999;

    background:#161616;

    border:1px solid #8bc53f;

    border-radius:14px;

    padding:15px 25px;

    min-width:120px;

    text-align:center;

    box-shadow:
        0 0 10px rgba(139,197,63,.6),
        0 0 25px rgba(139,197,63,.4),
        0 0 50px rgba(139,197,63,.2);
}

.clock-title{
    color:#8bc53f;
    font-size:12px;
    letter-spacing:1px;
}

.clock-time{
    color:white;

    font-size:28px;

    font-weight:bold;

    text-shadow:
        0 0 5px rgba(139,197,63,.8),
        0 0 15px rgba(139,197,63,.5);
}

/* NOW PLAYING */

.song-box{
    position:fixed;

    bottom:95px;

    left:calc(380px + ((100vw - 380px) / 2));

    transform:translateX(-50%);

    min-width:280px;

    background:#161616;

    border:1px solid #8bc53f;

    border-radius:14px;

    padding:12px 25px;

    z-index:9999;

    text-align:center;

    box-shadow:
        0 0 10px rgba(139,197,63,.6),
        0 0 25px rgba(139,197,63,.4),
        0 0 50px rgba(139,197,63,.2);
}

.song-title{
    color:#8bc53f;
    font-size:11px;
    letter-spacing:1px;
}

.song-name{
    color:white;
    font-size:18px;
    font-weight:bold;
}
/* MOUSE GLOW */

#cursorGlow{
    position:fixed;

    width:180px;
    height:180px;

    border-radius:50%;

    pointer-events:none;

    background:
        radial-gradient(
            circle,
            rgba(139,197,63,.60) 0%,
            rgba(139,197,63,.28) 30%,
            rgba(139,197,63,.12) 55%,
            transparent 80%
        );

    transform:translate(-50%,-50%);

    z-index:9998;

    filter:blur(14px);
}
/* ACCOUNT AVATARS */

.account-item{
    display:flex;
    align-items:center;
    gap:20px;

    padding:20px 25px;
}

.account-item span{
    color:#8bc53f;

    font-size:28px;

    font-weight:bold;

    text-shadow:
        0 0 8px rgba(139,197,63,.35);

    line-height:72px;
}

.avatar{
    width:72px;
    height:72px;

    border-radius:12px;

    object-fit:cover;

    border:1px solid #8bc53f;

    box-shadow:
        0 0 10px rgba(139,197,63,.4),
        0 0 20px rgba(139,197,63,.15);
}
@keyframes fadeIn{

    from{
        opacity:0;
        transform:translateY(8px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }
}
.footer{

    position:fixed;

    bottom:15px;
    right:25px;

    color:#777;

    font-size:13px;

    text-shadow:
        0 0 10px rgba(139,197,63,.15);
}
.featured-account{

    border:1px solid #8bc53f !important;

    box-shadow:
        0 0 15px rgba(139,197,63,.25),
        0 0 35px rgba(139,197,63,.10);
}

.featured-avatar{

    width:90px;
    height:90px;
}

.featured-badge{

    color:#8bc53f;

    font-size:12px;

    letter-spacing:1px;

    margin-bottom:5px;

    text-shadow:
        0 0 8px rgba(139,197,63,.4);
}
.green{

    color:#8bc53f !important;

    animation: logoGlow 2s ease-in-out infinite;

}

@keyframes logoGlow{

    0%{
        text-shadow:
            0 0 5px rgba(139,197,63,.3);
    }

    50%{
        text-shadow:
            0 0 10px rgba(139,197,63,.8),
            0 0 20px rgba(139,197,63,.6),
            0 0 40px rgba(139,197,63,.4);
    }

    100%{
        text-shadow:
            0 0 5px rgba(139,197,63,.3);
    }

}

@keyframes logoGlow{

    0%{
        text-shadow:
            0 0 8px rgba(139,197,63,.25),
            0 0 15px rgba(139,197,63,.15);
    }

    50%{
        text-shadow:
            0 0 15px rgba(139,197,63,.7),
            0 0 30px rgba(139,197,63,.4),
            0 0 50px rgba(139,197,63,.25);
    }

    100%{
        text-shadow:
            0 0 8px rgba(139,197,63,.25),
            0 0 15px rgba(139,197,63,.15);
    }

}