:root{
    color-scheme:dark;

    --bg:#080808;
    --card:#111;
    --card2:#171717;

    --text:#eee;
    --muted:#999;

    --border:#292929;
    --border-light:#444;

    --radius:12px;
    --transition:.2s ease;
}

.light{
    color-scheme:light;

    --bg:#f3f3f3;
    --card:#fff;
    --card2:#fafafa;

    --text:#111;
    --muted:#666;

    --border:#ddd;
    --border-light:#bbb;
}


/* RESET */

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

html,body{
    background:var(--bg);
    color:var(--text);
}

body{
    font-family:Arial,sans-serif;
    transition:.3s;
}

a,
a:link,
a:visited,
a:hover,
a:active{
    color:var(--text);
    text-decoration:none;
}


/* HEADER */

header{
    position:sticky;
    top:0;
    z-index:10;

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

    padding:20px;

    background:var(--bg);

    border-bottom:1px solid var(--border);
}

.logo{
    font-weight:bold;
    letter-spacing:2px;
}

nav{
    display:flex;
    gap:20px;
}

nav a{
    color:var(--text);
}


/* BUTTONS */

button,
.download-btn,
.play,
.copy-btn,
.release-toggle{

    background:var(--card);

    color:var(--text);

    border:1px solid var(--border);

    border-radius:10px;

    padding:12px 18px;

    cursor:pointer;

    text-decoration:none;

    transition:var(--transition);

    appearance:none;
    -webkit-appearance:none;
}


button:hover,
.download-btn:hover,
.play:hover,
.copy-btn:hover,
.release-toggle:hover{

    background:var(--card2);

    border-color:var(--border-light);
}


.header-controls button{
    margin-left:10px;
}


#menuToggle{
    display:none;
}


/* MAIN */

main{

    max-width:1100px;

    margin:auto;

    padding:20px;
}


.section{

    margin-top:100px;

    border-top:1px solid var(--border);

    padding-top:30px;
}


.sectdescript{

    margin-bottom:30px;

}


.hero{

    min-height:400px;

    display:flex;

    align-items:center;
}


/* CARDS */

.card{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

    padding:25px;

}


.grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:25px;

}


.image-placeholder{

    height:180px;

    background:var(--bg);

    border:1px solid var(--border);

    border-radius:var(--radius);

    margin-bottom:20px;

}


/* FORMS */

input,
textarea{

    width:100%;

    margin:10px 0;

    padding:15px;

    border-radius:10px;

    border:1px solid var(--border);

    background:var(--bg);

    color:var(--text);

    appearance:none;
    -webkit-appearance:none;
}


textarea{

    min-height:120px;

}


.socials{

    display:flex;

    gap:20px;

    margin-top:20px;

}


/* DOWNLOAD BUTTON */

.download-btn{
    display:inline-block;
    margin-top:15px;
}


/* RELEASE INFO */

.release-info{
    display:none;
}

.release-info.open{
    display:block;
}


/* VIDEOS */

.videos-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(100px,1fr));

    gap:15px;

    max-width:800px;
}


.video-card{

    aspect-ratio:1/1;

    overflow:hidden;

    padding:0;

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

}


.video-card iframe{

    width:100%;

    height:100%;

    border:none;

}


/* MUSIC TRACKS */

.music-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:15px;

}


.track{

    display:flex;

    align-items:center;

    gap:20px;

    padding:15px;

    min-height:100px;

    background:var(--card);

    border:1px solid var(--border);

    border-radius:var(--radius);

}


.track-image{

    width:70px;

    height:70px;

    object-fit:cover;

    border-radius:10px;

    flex-shrink:0;

}


.track-info{

    flex:1;

}


.track-info h3{

    margin-bottom:5px;

}


.track-info p{

    margin:3px 0;

    font-size:14px;

}


.track .play{

    width:45px;

    height:45px;

    padding:0;

}


/* PACKS */

#packs .track{

    width:100%;

    gap:10px;

}


#packs .track-info{

    flex:1;

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

}


#packs .track-info h3{

    margin:0;

    white-space:nowrap;

}


#packs .track-code{

    display:flex;

    align-items:center;

    gap:3px;

    white-space:nowrap;

}


#packs .copy-btn{

    padding:3px 6px;

}


#packs .release-toggle{

    white-space:nowrap;

}


#packs .release-info{

    flex-basis:100%;

}


#packs .track-image{

    width:50px;

    height:50px;

}


/* RELEASES */

.releases-grid{

    display:grid;

    grid-template-columns:1fr;

    gap:15px;

}


.release-card{

    width:100%;

    position:relative;

}


#releases .track{

    width:100%;

    gap:15px;

}


#releases .track-image{

    width:150px;

    height:150px;

    object-fit:cover;

}


#releases .track-info{

    flex:1;

    display:flex;

    align-items:center;

    gap:10px;

    flex-wrap:wrap;

}


#releases .track-info h3,
#releases .track-info p{

    margin:0;

}


#releases .release-links{

    display:flex;

    align-items:center;

    gap:6px;

    margin-left:auto;

}


#releases .release-toggle{

    white-space:nowrap;

}


#releases .release-info{

    width:100%;

    margin-top:15px;

}


#releases .release-info p{

    margin:8px 0;

}


.release-image{

    position:absolute;

    top:15px;

    right:15px;

    height:100px;

    border-radius:5px;

}


/* ICON */

.releaseicon{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:2px;

    background:#000;

    border-radius:8px;

    color:#fff;

}


.releaseicon img{

    height:25px;

    width:auto;

    display:block;

}

/* MOBILE */

.mobile-hide{
    display:block;
}

.desktop-hide{
    display:none;
}


@media(max-width:700px){


    header{

        padding:15px;

    }


    nav{

        position:absolute;

        top:65px;

        left:0;

        width:100%;

        display:none;

        flex-direction:column;

        gap:15px;

        background:var(--card);

        border-top:1px solid var(--border);

        border-bottom:1px solid var(--border);

        padding:20px;

    }


    nav.active{

        display:flex;

    }


    #menuToggle{

        display:inline-block;

    }


    main{

        padding:15px;

    }


    .section{

        margin-top:60px;

        padding-top:20px;

    }


    .hero{

        min-height:250px;

    }


    .card{

        padding:18px;

    }


    .mobile-hide{

        display:none;

    }


    .desktop-hide{

        display:block;

    }


    /* TRACKS */


    .track{

        gap:10px;

        padding:10px;

    }


    .track-image{

        width:45px;

        height:45px;

        border-radius:8px;

    }


    .track-info h3{

        font-size:14px;

    }


    .track-info p{

        font-size:12px;

    }


    .track .play{

        width:35px;

        height:35px;

        padding:0;

        font-size:12px;

    }



    /* PACKS MOBILE */


    #packs .track{

        gap:5px;

        padding:8px;

    }


    #packs .track-image{

        width:30px;

        height:30px;

    }


    #packs .track-info{

        gap:5px;

    }


    #packs .track-info h3{

        font-size:12px;

    }


    #packs .track-code{

        font-size:11px;

    }


    #packs .copy-btn{

        padding:2px 5px;

        font-size:11px;

    }


    #packs .release-toggle{

        display:none;

    }



    /* RELEASE MOBILE */


    #releases .track{

        align-items:flex-start;

        gap:10px;

    }


    #releases .track-image{

        width:50px;

        height:50px;

    }


    #releases .track-info{

        gap:5px;

        font-size:13px;

    }


    #releases .release-links{

        margin-left:0;

    }


    .release-image{

        height:50px;

        top:10px;

        right:10px;

    }



    /* VIDEOS */


    .videos-grid{

        grid-template-columns:repeat(2,1fr);

        gap:10px;

    }


    .mobile-description{

        display:block;

        width:100%;

        margin-top:10px;

        flex-basis:100%;

    }

}



/* FOOTER */


footer{

    text-align:center;

    padding:30px;

    margin-top:80px;

    border-top:1px solid var(--border);

}


.hero-content{

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

    gap:40px;
    width:100%;

}


.hero-text{

    flex:1;
    min-width:0;

}


.hero-text h1{

    font-size:clamp(42px,6vw,80px);

    letter-spacing:5px;

    margin-bottom:20px;

}


.hero-text p{

    color:var(--text2);

    font-size:18px;

    line-height:1.6;

    max-width:500px;

    margin-bottom:30px;

}



/* HERO BUTTONS */

.hero-buttons{

    display:flex;

    gap:15px;

    flex-wrap:wrap;

}


.hero-btn{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    padding:12px 22px;

    background:var(--card);

    color:var(--text);

    border:1px solid var(--border);

    border-radius:12px;

    text-decoration:none;

    transition:.2s ease;

}


.hero-btn:hover{

    background:var(--card2);

    border-color:var(--border-light);

}



/* SPOTIFY PLAYER */

.spotify-player{

    width:320px;

    height:150px;

    flex-shrink:0;

    background:#0b0b0b;

    border:1px solid var(--border);

    border-radius:16px;

    overflow:hidden;

    line-height:0;

}


.spotify-player iframe{

    display:block;

    width:100%;

    height:260px;

    border:0;

    margin:0;

    transform:translateY(0);

}

@media(max-width:700px){

    .hero-content{

        display:flex;

        flex-direction:column;

        align-items:stretch;

        gap:25px;

    }


    .hero-text{

        width:100%;

        order:1;

    }


    .hero-text h1{

        font-size:42px;

    }


    .hero-text p{

        width:100%;

        max-width:none;

        display:block;

        margin-bottom:25px;

    }


    .hero-buttons{

        width:100%;

        display:flex;

        gap:10px;

    }


    .hero-btn{

        flex:1;

    }


    .spotify-player{

        width:100%;

        order:2;

    }

}