body {
    background-color: #1d1c1c;
    color: #ffffff;
    font-family: sans-serif;
}

a {
    text-decoration: none;
}

.container {
    width: 700px;
    max-width: 80%;
    margin: 0 auto;
    padding: 32px 0;
}

h1 {
    font-size: 2rem;
    text-align: center;
    color: #edf2f7;
    margin-bottom: 32px;
    font-family: serif;;
}

.track-list {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.track-card {
    background-color: #37312e;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 8px #0000001a;
}

.track-card img {
    max-height: 100%;
    max-width: 100%;
    aspect-ratio: 1;
    object-fit: cover;
    background-color: #544b47;
}

.track-info {
    height: 200px;
    display: flex;
    align-items: center;
    gap: 16px;
}

.track-info h2 {
    font-size: 1.5rem;
    font-weight: 500;
    color: #c5ccd6;
    font-family: serif;
}

.track-info p {
    font-size: 0.875rem;
    color: #cbd5e0;
    margin-bottom: .5em;
}

.track-timestamp {
    font-size: 0.875rem;
    color: #edf2f7;
}
@media only screen and (max-width: 600px) {
    .track-info {
        height: 100px;
        gap: 8px;
    }
    .track-list {
        gap: 16px;
    }
    .container {
        width: calc(100% - 16px);
        max-width: 100%;
    }
}