@import url("/style/index.css");

main {
        width: min(calc(100% - 4rem), 720px);
        min-height: calc(100vh - 10.3rem);
        margin: 0 auto 2rem auto;
        padding-top: 4rem;
}

div.music {
        margin-bottom: 1rem;
        padding: 1.5rem;
        display: flex;
        flex-direction: row;
        gap: 1.5em;
        border: 1px solid #222;
        border-radius: 4px;
        background-color: #ffffff08;
        transition: background-color .1s;
        text-decoration: none;
        cursor: pointer;
}

div.music:hover {
        background-color: #fff1;
}

div.music a {
        text-decoration: none;
}

.music h1:hover,
.music h2:hover,
.music h3:hover {
        background: initial;
}

.music-artwork img {
        border: 1px solid #888;
}

.music-title {
        margin: 0;
        color: #eee;
        font-size: 1.6em;
        line-height: 1.6em;
}

.music-year {
        color: #888;
}

.music-artist {
        margin: -.5rem 0 0 0;
        font-size: 1em;
        color: #aaa;
}

h3[class^=music-type] {
        margin: 0 0 1rem 0;
        font-size: .8em;
        color: #eee;
}

h3.music-type-single {
        color: var(--tertiary);
}

h3.music-type-compilation {
        color: var(--secondary);
}

h3.music-type-album {
        color: var(--primary);
}

h3.music-type-upcoming {
        color: #f47070;
}

.music-links {
        width: fit-content;
        margin: .5em 0;
        padding: 0;
        display: flex;
        gap: .5rem;
        flex-wrap: wrap;
        line-height: 1.7em;
        justify-content: center;
}

.music-links li {
        list-style: none;
}

.music-links li a {
        padding: .2em .5em;
        border: 1px solid #65b4fd;
        color: #65b4fd;
        border-radius: 2px;
        background-color: transparent;
        transition-property: color, border-color, background-color;
        transition-duration: .2s;
        animation: list-item-fadein .2s forwards;
        animation-delay: 0s;
        opacity: 0;
}


.music-links li a:hover {
        color: #eee;
        border-color: #eee;
        background-color: var(--links) !important;
        text-decoration: none;
}

h2.question {
        margin: 1rem 0;
        padding: 1rem 1.5rem;
        border-radius: 4px;
        cursor: pointer;
}

div.answer {
        margin: -1rem 0 1rem 0;
        padding: .5em 1.5em;
        border-radius: 4px;
}

@media screen and (max-width: 740px) {
        div.music {
                flex-direction: column;
        }

        .music-artwork,
        .music-details {
                text-align: center;
                align-items: center;
                display: flex;
                flex-direction: column;
        }
}