@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap');


* {
    box-sizing: border-box;
}


body {
    margin: 0;
    min-height: 100vh;
    font-family: "Inter", sans-serif;
    color: white;

    background:
        radial-gradient(circle at top left, #6a11cb, transparent 40%),
        radial-gradient(circle at bottom right, #2575fc, transparent 40%),
        #080808;
}


/* Header */

.hero {
    text-align: center;
    padding: 70px 20px 40px;
}


.hero h1 {
    font-size: clamp(2.5rem, 6vw, 4rem);
    margin: 0;
    font-weight: 800;
    letter-spacing: -2px;
}


.hero p {
    opacity: .7;
    font-size: 1.1rem;
}



/* Library */

.library {
    width: min(900px, 90%);
    margin: auto;

    display: grid;
    gap: 25px;
}



/* Cards */

.track-card {

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

    padding: 25px;

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

    backdrop-filter: blur(15px);

    border-radius: 20px;

    transition:
        transform .3s ease,
        background .3s ease;
}


.track-card:hover {

    transform: translateY(-6px);

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



.track-info h2 {

    margin:0 0 8px;

    font-size:1.3rem;

}


.track-info p {

    margin:0;

    opacity:.8;

}


.track-info span {

    display:block;

    margin-top:8px;

    font-size:.85rem;

    color:#b8b8ff;

}



/* Audio */

audio {

    width:280px;

    filter:
        invert(1)
        hue-rotate(180deg);

}



/* Footer */

footer {

    text-align:center;

    padding:60px 20px;

}


footer a {

    color:white;

    text-decoration:none;

    font-size:1.2rem;

    opacity:.8;

    transition:.3s;

}


footer a:hover {

    opacity:1;

}



/* Mobile */

@media(max-width:700px){

    .track-card {

        flex-direction:column;

        align-items:flex-start;

    }


    audio {

        width:100%;

    }

}