@font-face {
    font-family: 'UnifrakturMaguntia';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/static/font/UnifrakturMaguntia.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Underdog';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/static/font/Underdog.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
    font-family: 'Syne Mono';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(/static/font/Syne-Mono.woff2) format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.nowrap {
    white-space: nowrap;
}

#releases-calendar table, 
#releases table,
#band table, 
#album table, 
#label table {
    width: 100%
}

#releases a {
    color: var(--text);
}

#release-picker ul li {
    display: inline;
}

#logo-container {
    padding-top: 2rem;
    width: 25%;
}

#sigil-container {
    margin: 2rem;
    width: 20%;
}

#sigil-container > #sigil > path {
    stroke-width: 0px;
    fill: var(--accent);
    border: 5px solid var(--accent-bg);
}

div#page-picker {
    text-align: center;
}

div#page-picker > ul {
    list-style-type: none;
}

div#page-picker > ul > li {
    display: inline;
    font-size: 1.2rem;
}

.logo {
    stroke-width: 0px;
    fill: var(--accent);
}

body {
    font-family: 'Syne Mono', monospace;
    scroll-behavior: smooth;
}

main#releases {
    text-align: center;
}

main#releases form {
    text-align: left;
}

article {
    font-family: 'Syne Mono', monospace;
    text-align: center;
}

details {
    display: flexbox;
    filter: drop-shadow(.0em .4em var(--text-light));
}

details > summary::marker {
    content: '⛤ ';
    font-size: 1rem;
}

details[open] > summary::marker {
    content: '⛧ ';
    font-size: 1rem;
}

ul.links {
    list-style-type: none;
    margin: 0em;
    padding: 0em;
    font-style: normal;
}

.grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-auto-rows: minmax(100px, auto)
}

.center {
    grid-column: 2 / span 2;
    grid-row: 1
}

.left-half {
    grid-column: 1 / span 2;
    grid-row: 1;
}

.right-half {
    grid-column: 2 / span 2;
    grid-row: 1;
}

.date-header {
    width: 90%;
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr;
}

.release-header {
    width: 90%;
    display: inline-grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 2fr;
}

.release-header-band, .date-header-date {
    font-size: 1.5rem;
    text-align: left;
    grid-column: 1 / span 1;
    grid-row: 1;
    word-break: break-word;
}

.release-header-type, .date-header-release-count {
    text-align: right;
    grid-column: 2 / span 1;
    grid-row: 1;
}

.release-header-album {
    text-align: left;
    grid-column: 1 / span 1;
    grid-row: 2;
    word-break: break-word;
}

.release-header-genre {
    font-style: italic;
    text-align: right;
    grid-column: 2 / span 1;
    grid-row: 2;
    word-break: break-word;
}

table.release-info td {
    vertical-align: top;
    border-style: none;
}

table.release-info td.attribute {
    font-weight: bold;
    text-align: right;
    vertical-align: top;
    border-style: none;
}

table.release-info td.value {
    font-style: italic;
}

#form-release-date .date-picker-label {
    display: inline;
}

/* medium screens */
@media screen and (max-width: 1024px) {
    #logo-container {
        width: 50%;
    }

    main {
        font-size: 1.2rem;
        text-align: center;
    }

    summary {
        text-align: left;
    }
    
    .center {
        grid-column: 1 / span 4;
        grid-row: 1;
    }
       
    .release-header {
        text-align: left;
        display: inline-grid;
        grid-template-columns: 1fr;
        grid-template-rows: 4fr;
    }

    .release-header-band {
        grid-column: 1 / span 1;
        grid-row: 1;
        word-break: break-word;
    }

    .release-header-album {
        grid-column: 1 / span 1;
        grid-row: 2;
        word-break: keep-all;
        text-overflow: ellipsis;
    }

    .release-header-type {
        text-align: left;
        grid-column: 1 / span 1;
        grid-row: 3;
    }
    
    .release-header-genre {
        font-style: italic;
        text-align: left;
        grid-column: 1 / span 1;
        grid-row: 4;
        word-break: keep-all;
        text-overflow: ellipsis;
    }
}

@media screen and (max-width: 666px) {
    body {
        font-size: .8rem;
    }
    
    main {
        font-size: 1rem;
    }

    details > summary::marker {
        font-size: 1.2rem;
    }
    
    details[open] > summary::marker {
        font-size: 1.2rem;
    }
}

@media screen and (max-width: 444px) {
    .release-header {
        width: 80%;
    }
}