:root{
    --bg:#09090b;
    --card:#1b1b22;
    --green:#d8ff3e;
    --pink:#ff6da8;
    --purple:#8b7cff;
    --text:#ffffff;
}

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    background:#111;
    min-height: 100vh;
    display:flex;
    justify-content:center;
    align-items:center;
    font-family:monospace;
}

.app{
    width:100%;
    max-width: 380px;
    background:var(--bg);

    border:3px solid var(--purple);
    border-radius:8px;

    padding:25px;
    color:white;
}

/* NAV */

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

    margin-bottom:30px;
}

nav a{
    text-decoration: none;
    color:white;
}

.logo{
    font-weight:bold;
    font-style:italic;
}

/* PROFILE */

.profile{
    text-align:center;
}

.avatar-frame{
    width:120px;
    height:120px;

    margin:auto;

    border:2px solid var(--green);
    border-radius:50%;

    padding:4px;
}

.avatar-frame img{
    width:100%;
    height:100%;
    border-radius:50%;
    object-fit:cover;
}

.mini-avatar{
    width:45px;
    height:45px;

    margin:15px auto;

    border:2px solid #666;
}

.mini-avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
}

.user-info{
    display:flex;
    justify-content:center;
    gap:8px;

    font-size:11px;
    color:#bbb;

    margin-top: 15px;
    margin-bottom: 35px;
}

/* SECTION */

.section-title{
    color:var(--green);

    font-size:10px;
    letter-spacing:2px;

    margin-bottom:15px;
}

/* LINKS */

.links{
    display:flex;
    flex-direction:column;
    gap:10px;

    margin-bottom:30px;
}

.social-links{
    color:white;
    text-decoration: none;
}

.card{
    background:linear-gradient(
        90deg,
        #23232b,
        #17171d
    );

    padding:14px;

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

    color:white;
    text-decoration: none;
}

.card:hover{
    opacity: 0.9;
}

.card span{
    color:#888;
    font-size:10px;
}

/* MUSIC */

.track-embed {
    margin-bottom: 16px;
    border-radius: 12px;
    overflow: hidden;
}

.track-embed iframe {
    width: 100%;
    border: none;
    display: block;
}

.music-card{
    background:#2d2d2d;

    padding:10px;
    margin-bottom:12px;

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

.album{
    width:50px;
    height:50px;
    background:var(--green);
}

.pink .album{
    background:#ffb3c7;
}

.white .album{
    background:#eee;
}

.music-card h3{
    font-size:20px;
}

.music-card p{
    font-size:10px;
    color:#ccc;
}

/* BUTTON */

.join-btn{
    width:100%;
    padding:16px;

    border:none;

    background:var(--green);
    color:black;

    font-weight:bold;

    margin-top:20px;
    margin-bottom:20px;

    cursor:pointer;
}

/* FOOTER */

footer{
    text-align:center;
    font-size:10px;
    color:#888;
}

@media (max-width: 480px) {

    body {
        padding: 0;
    }

    .app {
        max-width: 100%;
        min-height: 100vh;

        border-radius: 0;
        border-left: none;
        border-right: none;
    }
}