/* === FONT === */
@font-face { font-family: Rubik; src: url("assets/Rubik/Rubik-Regular.ttf"); font-weight: normal; }
@font-face { font-family: Rubik; src: url("assets/Rubik/Rubik-Light.ttf"); font-weight: 100; }
@font-face { font-family: Rubik; src: url("assets/Rubik/Rubik-Bold.ttf"); font-weight: bold; }
@font-face { font-family: Rubik; src: url("assets/Rubik/Rubik-Italic.ttf"); font-weight: normal; font-style: italic; }
@font-face { font-family: Rubik; src: url("assets/Rubik/Rubik-LightItalic.ttf"); font-weight: 100; font-style: italic; }
@font-face { font-family: Rubik; src: url("assets/Rubik/Rubik-BoldItalic.ttf"); font-weight: bold; font-style: italic; }
/* === GENERAL === */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Rubik, sans-serif;
    /*filter: grayscale(1);*/
}
/* === BODY === */
body {
    min-height: 100vh;
    display: flex;
    justify-content: center;
}
@media screen and (orientation: portrait) and (max-device-width: 800px) {
    body {
        flex-direction: column;
        align-items: stretch;
    }
    body.navbar {
        display: initial;
        overflow: hidden;
    }
}
/* === HEADER === */
header {
    position: sticky;
    top: 0;
    display: none;
    align-items: center;
    z-index: 100;
}
@media screen and (orientation: portrait) and (max-device-width: 800px) {
    header {
        display: flex;
        font-size: 75%;
        transition: margin-left 0.2s;
    }
    body.navbar header {
        margin-left: 16em;
        top: 0;
    }
    body.navbar header > *:not(:first-child):not(span) {
        display: none;
    }
    body.navbar header > span {
        height: 4em;
        background-color: var(--overlay)
    }
}
header * {
    display: inline;
}
header a {
    padding: 1em;
}
header a svg, header a img {
    width: 2em;
    height: 2em;
    vertical-align: middle;
    user-select: none;
    -webkit-user-select: none;
}
header h1, header h2 {
    line-height: 0.75em;
    border: none;
    margin: 0;
    vertical-align: bottom;
}
header span {
    flex-grow: 1;
}
header a:hover {
    text-decoration: none;
}
/* === NAVBAR === */
nav {
    width: 12em;
    max-width: 12em;
    min-width: 12em;
    height: 100vh;
    position: sticky;
    top: 0;
    padding-bottom: 1em;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    z-index: 100;
    overflow-y: auto;
}
@media screen and (orientation: portrait) and (max-device-width: 800px) {
    body nav {
        transition: margin-left 0.2s;
        margin-top: -4em;
    }
    body:not(.navbar) nav {
        margin-left: -12em;
    }
}
@media screen and (orientation: landscape) and (max-device-height: 800px) {
    nav {
        font-size: 75%;
    }
}
nav a.logo {
    display: contents;
}
nav a.logo img {
    filter: none;
    width: 12em;
    height: auto;
    flex-shrink: 0;
    padding: 2.5em;
    margin: 0;
}
nav p {
    font-size: 0.75em;
    line-height: 0.75em;
    font-weight: bold;
    padding-bottom: 0.25em;
    border-bottom: 1px solid;
    margin: 2em 1.5em 0.5em 1.5em;
}
nav a.logo + p {
    margin-top: 0;
}
nav a svg, nav a img {
    width: 1em;
    min-width: 0;
    height: 1em;
    min-height: 0;
    margin-right: 1em;
    vertical-align: bottom;
    user-select: none;
    -webkit-user-select: none;
}
nav > a {
    display: block;
    font-size: 1em;
    line-height: 1em;
    padding: 0.75em 1.5em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    flex-shrink: 0;
}
nav a:hover {
    text-decoration: none;
}
nav span {
    flex-grow: 1;
}
body.navbar article * {
    pointer-events: none;
}
/* === ARTICLE === */
article {
    width: 1088px;
    max-width: 1088px;
    min-width: 0;
    min-height: 100vh;
    padding: 0.75em 1.5em;
}
@media screen and (orientation: portrait) and (max-device-width: 800px) {
    article {
        max-width: 100%;
        min-height: calc(100vh - 4em);
        font-size: 75%;
        margin-top: calc((4em / 0.75) - 100vh);
    }
    body.navbar article {
        filter: brightness(25%);
    }
    body.navbar article * {
        user-select: none;
        -webkit-user-select: none;
    }
}
@media screen and (orientation: landscape) and (max-device-height: 800px) {
    article {
        max-width: 100%;
        font-size: 50%;
    }
}
p {
    font-size: 1em;
    line-height: 1.5em;
    text-align: justify;
    margin: 0.75em 0;
}
sup, sub {
    vertical-align: baseline;
    position: relative;
    top: -0.4em;
}
sub { 
    top: 0.4em; 
}
a {
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
h1 {
    font-size: 2.5em;
    line-height: 1.5em;
    font-weight: lighter;
    margin: 0.5em 0;
}
@media screen and (orientation: landscape) and (max-device-height: 800px) {
    article h1 {
        font-size: 3.75em !important;
    }
}
h2 {
    font-size: 1.5em;
    line-height: 1.5em;
    font-weight: bold;
    border-bottom: 1px solid;
    margin: 1em 0 0.5em 0;
}
h3 {
    font-size: 1.25em;
    line-height: 1.5em;
    font-weight: bold;
    margin: 0.5em 0;
}
hr {
    border: 0px;
    border-bottom: 1px solid;
    margin: 1em 0;
}
ul {
    margin: 1em 0 1em 1.5em;
}
ul ul {
    margin: 0 0 0 1.5em;
}
@media screen and (orientation: portrait) and (max-device-width: 800px) {
    ul {
        margin-left: 2em;
    }
}
@media screen and (orientation: landscape) and (max-device-height: 800px) {
    ul {
        margin-left: 3em;
    }
}
li {
    font-size: 1em;
    line-height: 1.5em;
    text-align: justify;
    margin: 0.25em 0;
}
article > img, article > *.centred {
    display: block;
    margin: auto;
}
@media screen and (orientation: portrait) and (max-device-width: 800px) {
    article > img, article > *.centred {
        max-width: calc(100vw - 3em);
    }
}
@media screen and (orientation: landscape) and (max-device-height: 800px) {
    article > img, article > *.centred {
        max-width: calc(100vw - 21em);
    }
}
iframe {
    width: 560px;
    height: 315px;
}
@media screen and (orientation: portrait) and (max-device-width: 800px) {
    iframe {
        max-width: 560px;
        max-height: 315px;
        width: calc(100vw - 3em);
        height: calc((100vw - 3em) / (16 / 9));
    }
}
@media screen and (orientation: landscape) and (max-device-height: 800px) {
    iframe {
        max-width: 560px;
        max-height: 315px;
        width: calc(100vw - 21em);
        height: calc((100vw - 21em) / (16 / 9));
    }
}
*.quote {
    text-align: center;
    margin-bottom: 0em;
    font-style: italic;
}
*.quote::before {
    content: '"';
    font-style: initial;
}
*.quote::after {
    content: '"';
    font-style: initial;
}
*.citation {
    text-align: right;
    margin-top: 0em;
    margin-bottom: 1.5em;
}
/* === FIGURE === */
figure {
    max-width: 24em;
    float: right;
    clear: both;
    text-align: center;
    margin: 0 0 0.75em 1.5em;
    border-radius: 0.25em;
    overflow: hidden;
}
figure img {
    max-width: 100%;
    vertical-align: middle;
}
figure figcaption {
    font-size: 0.75em;
    text-align: left;
    padding: 0.5em 0.75em;
}
@media screen and (orientation: portrait) and (max-device-width: 800px), screen and (orientation: landscape) and (max-device-height: 800px) {
    figure {
        width: 100%;
        max-width: 100%;
        float: none;
        margin: 0.5em 0 1em 0;
    }
    figure figcaption {
        font-size: 1em;
    }
}
/* === PROGRESS BAR === */
progress[value] {
    display: inherit;
    width: 24em;
    height: 1.5em;
    margin: -0.5em auto -0.5em auto;
    appearance: none;
    -webkit-appearance: none;
}
progress[value]::-webkit-progress-bar {
    border-radius: 0.75em;
    overflow: hidden;
}
progress[value]::-webkit-progress-value {
    border-radius: 0.75em;
}
progress.smooth[value]::-webkit-progress-value {
    transition : width 0.5s;
}
/* === ARTICLE LINK === */
div.articles {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 1em;
    margin-bottom: 1.5em;
}
div.articles a {
    display: inline-block;
    width: 12em;
    height: 12em;
    text-align: center;
    overflow: hidden;
}
div.articles a img {
    width: 12em;
    height: 10em;
    object-fit: cover;
    object-position: center;
    margin-bottom: 0.5em;
}
/* === IMAGE GRID === */
div.images {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 1em;
    margin-top: 1.5em;
    margin-bottom: 1.5em;
}
div.images img {
    height: 12em;
    flex-grow: 1;
    object-fit: cover;
    object-position: center;
}
div.images img:hover {
    object-fit: contain;
    object-position: center;
}
/* === TABLE === */
article > table {
    border-collapse: collapse;
    margin: 0.75em 0;
}
article > table td, article > table th {
    padding: 0.5em 0.75em;
    text-align: left;
}
article > table td.expandable, article > table td.expanded {
    text-align: center;
}
article > table td.expandable, article > table td.expanded, article > table tr th.sortable, article > table tr th.sorted {
    min-width: 40px;
    height: 38px;
    cursor: pointer;
}
@media screen and (orientation: portrait) and (max-device-width: 800px), screen and (orientation: landscape) and (max-device-height: 800px) {
    article > table, article > table thead, article > table tbody, article > table th, article > table td, article > table tr {
        display: block;
    }
    article > table thead tr, article > table td.expandable, article > table td.expanded, article > table td.expanded-row, article > table table iframe {
        display: none;
    }
    article > table td {
        position: relative;
        padding-left: calc(50% + 0.75em);
    }
    article > table td:before {
        position: absolute;
        top: 0;
        left: 0;
        width: calc(50% - 1.5em);
        padding: 0.5em 0.75em;
        padding-right: 0.75em;
        font-weight: bold;
        text-align: right;
        white-space: nowrap;
    }
    /*article > table td.expandable, article > table th.expandable, article > table td.expanded, article > table td.expanded-row, article > table table iframe {
        display: none;
    }*/
}
@media screen and (orientation: landscape) and (max-device-height: 800px) {
    article > table td:before {
        font-size: 150%;
    }
}
/* === ASIDE === */
aside {
    max-width: 24em;
    float: right;
    clear: both;
    margin: 0 0 0.75em 1.5em;
    border-radius: 0.25em;
    overflow: hidden;
}
aside table {
    table-layout: fixed;
    border-collapse: collapse;
    margin: 0;
}
aside th:first-child:last-child {
    font-size: 1.25em;
    text-align: center;
}
aside td:has(img) {
    padding: 0;
    text-align: center;
}
aside img {
    max-width: 100%;
    vertical-align: middle;
}
aside th, aside td {
    font-size: 0.75em;
    padding: 0.5em 0.75em;
    text-align: left;
}
aside th:first-child:not(:last-child) {
    text-align: right;
}
@media screen and (orientation: portrait) and (max-device-width: 800px), screen and (orientation: landscape) and (max-device-height: 800px) {
    aside {
        width: 100%;
        max-width: 100%;
        float: none;
        margin: 0.5em 0 2em 0;
    }
    aside table {
        width: 100%;
    }
    aside th, aside td {
        font-size: 1em;
    }
}
/* === CATEGORIES === */
ul.categories {
    list-style-type: none;
    margin-left: 0px;
    column-count: 3;
}
ul.categories li {
    break-inside: avoid;
    margin: 0;
    margin-bottom: 1em;
    text-align: left;
}
ul.categories b, ul.categories a {
    display: block;
    margin: 0;
}
ul.categories b {
    border-bottom: 1px solid;
    margin-bottom: 0.5em;
}
@media screen and (orientation: portrait) and (max-device-width: 800px) {
    ul.categories {
        column-count: 2;
    }
}
/* === WARNING === */
article div.warning {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding: 0.5em 1em;
    border-radius: 0.5em;
    margin: 1.5em 0;
}
article div.warning * {
    text-align: center;
}
/* === IMAGE VIEWER === */
[onclick="openImage(this)"] {
    cursor: pointer;
}
dialog {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    line-height: 100vh;
    border: none;
    text-align: center;
    overflow: auto;
    z-index: 999;
}
dialog img:first-child {
    display: inline-block;
    vertical-align: middle;
    margin: 0 auto;
}
dialog p {
    color: var(--white);
    background-color: var(--overlay);
    position: fixed;
    bottom: 2em;
    right: 0;
    left: 0;
    width: fit-content;
    max-width: calc(100% - 4em);
    margin: 0 auto;
    padding: 12px 16px;
}
@media screen and (orientation: portrait) and (max-device-width: 800px) {
    dialog p {
        font-size: 75%;
    }
}
dialog img:last-child {
    position: fixed;
    top: 0;
    right: 0;
    width: 2em;
    height: 2em;
    cursor: pointer;
    margin: 2em;
}