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

body{

    background:#262626;
    color:#ddd;
    font-family:"IBM Plex Mono",monospace;
    padding:60px;
}

h1{

    font-size:64px;
    font-weight:300;
    margin-bottom:80px;
}

.columns{

    display:flex;
    gap:70px;
    justify-content:center;
    align-items:flex-start;
    flex-wrap:wrap;
}

.category{

    width:360px;

    border:3px solid #d9d9d9;

    padding:14px;

    min-height:560px;

    transition:.3s;
}

.category>summary{

    list-style:none;
    cursor:pointer;

    font-size:20px;

    margin-top:-28px;

    display:inline-block;

    padding:0 8px;

    background:#262626;
}

.category summary::-webkit-details-marker{
    display:none;
}

.tracks{

    margin-top:30px;

    display:flex;
    flex-direction:column;
    gap:18px;
}

.track{

    background:#1d1d1d;

    overflow:hidden;

    transition:.25s;
}

.track:hover{

    transform:translateY(-2px);

    box-shadow:0 0 0 1px #777;
}

.track>summary{

    list-style:none;

    display:flex;

    align-items:center;

    padding:14px;

    cursor:pointer;

    gap:14px;
}

.track summary::-webkit-details-marker{
    display:none;
}

.cover{

    width:58px;
    height:58px;


    object-fit: cover;
    overflow: hidden;
    position: relative;

    background:#d4d4d4;
}

.cover img{
    width: 100%;
    height: 100%;
}
.info{

    flex:1;
}

.info h2{

    font-weight:500;
    font-size:18px;
}

.info p{

    color:#aaa;

    font-size:15px;
}

.time{

    color:#aaa;
}

.note{

    max-height:0;

    overflow:hidden;

    padding:0 14px;

    color:#ddd;

    line-height:1.6;

    transition:
    max-height .35s ease,
    padding .35s ease;
}

.track[open]{

    background:#343434;

    border-left:3px solid #dcdcdc;

    transition:.25s;
}

.track[open] h2{

    color:white;
}

.track[open] .note{

    max-height:300px;

    padding:14px;
}

.note a{

    display:inline-block;

    margin-top:18px;

    color:white;

    text-decoration:none;

    border-bottom:1px solid #999;
}

.note a:hover{

    color:#bbb;
}

.category:not([open]){

    min-height:0;
}

.category:not([open]) .tracks{

    display:none;
}

@media(max-width:1200px){

    .columns{

        flex-direction:column;
        align-items:center;
    }

    h1{

        font-size:48px;
    }

}
.player{

    display:grid;

    grid-template-columns:34px 1fr;

    gap:12px;

    margin:18px 0;
}

.play{

    width:34px;
    height:34px;
}

.progress{

    height:3px;

    align-self:center;

    background:#5c5c5c;

    cursor:pointer;

    position:relative;
}

.progress-fill{

    height:100%;

    width:0%;

    background:#d8d8d8;

    position:relative;
}

.progress-fill::after{

    content:"";

    position:absolute;

    right:-5px;
    top:-4px;

    width:10px;
    height:10px;

    border-radius:50%;

    background:#ddd;
}

.player-time{

    grid-column:2;

    font-size:13px;

    color:#aaa;
}
audio::-webkit-media-controls-enclosure {
    background: transparent;
    border: none;
    filter: invert(1) hue-rotate(180deg);
}