#card {
    display: flex;
    width: 100%;
    height: 300px;
    justify-content: center;
    align-items: stretch;
}
#card #display {
    width: 100%;
    overflow-x: hidden;
    border-radius: 20px 0 0 20px;
    background: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(30px) hue-rotate(20deg);
    backdrop-filter: blur(30px) hue-rotate(20deg);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 1em;
}
#card h1 {
    font-size: 20px;
}
#card #list h3 {
    font-size: 12px;
}
#card #list p {
    font-size: 10px;
}
#card #display > * {
    text-align: center;
    max-width: 100%;
}
#card #display > audio {
    width: 100%;
}
#card #display #art {
    height: 60px;
    margin: 1rem auto;
}
#card #list {
    width: 0%;
    max-height: 100%;
    overflow-x: hidden;
    overflow-y: auto;
    border-radius: 0 20px 20px 0;
    background: transparent;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
}
#card #list .item {
    padding: 0 1em;
    background: white;
    transition: all 0.3s ease;
}
#card #list .item:first-of-type {
    border-radius: 0 20px 0 0;
}
#card #list .item:last-of-type {
    border-radius: 0 0 20px 0;
}
#card #list .item.is-active {
    background: rgba(255, 255, 255, 0.5);
    -webkit-backdrop-filter: blur(30px) hue-rotate(20deg);
    backdrop-filter: blur(30px) hue-rotate(20deg);
    transition: all 0.3s ease;
}
#card #list .item:hover {
    cursor: pointer;
}