:root {
    --black: #0d1b2a;
    --steel: #1B263B;
    --midblue: #415A77;
    --icy: #778DA9;
    --white: #E0E1DD;
}

* {
    margin: 0;
}

header {
    background-color: var(--black);
    color: var(--white);
    font-family: MS PGothic;

    min-height: 3em;
    display: flex;
    justify-content: center;
    align-items: center;
}

body {
    background: var(--white);
}

#main {
    display: flex;
    justify-content: space-evenly;
    margin: 1em;
}

nav {
    color: var(--black);
    background-color: var(--steel);
    font-family: MS PGothic;
    font-size: 1.2em;
    height: min-content;
    padding: 2em;
    border: 6px double var(--icy);
    background-clip: padding-box;
}

nav a {
    color: white;
    text-decoration: underline wavy var(--icy);
}

ul {
    margin-left: -1em;
}

li::marker {
    content: "♡︎ ";
    color: white;
}

main {
    display: flex;
    flex-direction: column;
    align-items: center;
}

summary {
    padding: 0.8em 0 0.8em 0;
    position: sticky;
    top: 0;
    z-index: 1;
    background-color: var(--midblue);
    border-bottom: 1px solid var(--black);
    font-family: MS PGothic;
}

br {
    margin-bottom: 0.4em;
}

summary span {
    font-style: italic;
}

zero-md {
    padding: 1em;
}

details:first-of-type summary::marker, :is(::-webkit-details-marker) {
    content: "⤵ ";
}

details[open]:first-of-type summary::marker {
    content: "⤴ ";
}

.filterDiv {
    background-color: var(--steel);
    color: #ffffff;
    width: 60em;
    margin: 0.3em;
    text-align: center;
    display: none;
    overflow: hidden;
    height: auto;
    border: 6px double var(--black);
    background-clip: padding-box;
}

.show {
    display: block;
}

.filterDiv:has(details[open]) {
    height: 40em;
    overflow: auto;
}

.btn {
    border: 6px double var(--black);
    background-clip: padding-box;
    outline: none;
    padding: 1em;
    background-color: var(--black);
    color: var(--white);
    margin-bottom: 1em;
    font-family: MS PGothic;
}

.btn:hover {
    background-color: var(--icy);
}

.btn.active {
    background-color: var(--midblue);
    color: white;
}

@media only screen and (max-width: 1200px) {

    header {
        min-height: 3em;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    #main {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 1em;
    }

    .filterDiv {
        width: 20em;
    }

}

@media (prefers-color-scheme: dark) {

    header {
        background-color: var(--white);
        color: var(--black);
    }

    body {
        background: var(--black);
    }

    nav {
        color: var(--white);
        background-color: var(--midblue);
        border: 6px double var(--icy);
    }

    nav a {
        color: var(--white);
        text-decoration: underline wavy var(--icy);
    }

    summary {
        background-color: var(--icy);
        border-bottom: 1px solid var(--white);
    }

    .filterDiv {
        background-color: var(--midblue);
        color: #ffffff;
        border: 6px double var(--white);
    }

    .btn {
        border: 6px double var(--icy);
        background-color: var(--white);
        color: var(--steel)
    }

    .btn:hover {
        background-color: var(--icy);
    }

    .btn.active {
        background-color: var(--midblue);
        color: white;
    }

}