:root {
    --body-family: "Georgia", serif;
    --body-color: #252525;
    --background-color: white;
    --label-background-color: #999;
    --fyi-color: #a9cbff;
    --aside-color: #555;
    --link-color:  #385cc7;
    --red-suit: #990000;
    --black-suit: #252525;
}

html { 
    box-sizing: border-box;
    font: calc(15px + 0.2vw)/calc(1.2em + 0.15vw) var(--body-family);
    line-height: 1.3;
    color: var(--body-color);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}
*, *:before, *:after { box-sizing: inherit; }

[id] {
  scroll-margin-top: calc(50vh - 1em);
}

p, details { hyphens: auto; margin: 0.5em auto; text-align: justify; }
a { outline: none; text-decoration: none; color: var(--link-color); }
a:hover { text-decoration: underline; }
nav a:hover, header a:hover { text-decoration: none; }

h1, h2, h3 { font-weight: normal; line-height: 1; }
main section > h2, main section > h1 { border-bottom: 1.5px solid var(--body-color); padding-bottom: 4px; }
span.subtitle { font-size: 0.85em; font-style: italic; margin-top: 5px; }
span.paragraph-title {
    display: inline-block;
    font-weight: bold;
    margin-right: 0.5em;
    line-height: 1;
    font-size: 1em;
}

body {
    margin: 1em 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
main  {
    max-width: 40em;
    min-width: 45%;
    padding: 1em;
}

header {
    padding: 1em;
    text-align: center;
    & h1 {
        font-size: 1.2rem;
        text-transform: uppercase;
    }
    & img {
        height: 4rem;
        max-width: 50%;
        vertical-align: text-bottom;
    }
}

nav#lang {
    display: flex;
    flex-direction: row;
}
nav#lang div { margin: 0 0.5em; }
img.flag, img.icon { height: 0.85em; }

ol > li.optional::marker { content: "*" counters(list-item, ".") ".\a0"; }
li { margin: 0.25em auto; }
li > p:first-child { margin: 0; }
ol > li > ol > li::marker { content: counters(list-item, ".") ".\a0" }

.red { color: var(--red-suit); }

/* Tables */

table {
    border-collapse: collapse;
    border-top: 2px solid var(--body-color);
    border-bottom: 2px solid var(--body-color);
    margin: 1em auto;
}
td, th { padding: 3px; }
td:first-child, table th:first-child { padding-left: 0.5em; }
td:last-child, table th:last-child { padding-right: 0.5em; }
tbody tr:first-of-type { border-top: 1px solid var(--body-color); }
table.lr td:nth-child(1), table.lr th:nth-child(1) { text-align: left; padding-right: 0.5em;  }
table.lr td:not(:nth-child(1)), table.lr th:not(:nth-child(1)) { text-align: right; padding-left: 0.5em; }
table.c td, table.c th { text-align: center; padding-left: 0.5em; }
tr.newgroup { border-top: 1px solid var(--body-color); }

span.label {
    color: white;
    font-family: var(--body-family);
    border-radius: 4px;
    background-color: var(--label-background-color);
    padding: 1px 4px;
}

/* Asides */
aside {
    width: fit-content;
    font-size: 0.95em;
    background-color: var(--fyi-color);
    padding: 15px;
    margin: 10px auto;
    & h2 {
        font-size: 1.2em;
    }
    & img {
        float: left;
        max-height: 150px;
        max-width: 50%;
        padding: 5px 15px 5px 5px;

        @media (max-width: 768px) {
            float: none;
            max-width: 75%;
            padding: 5px;
        }
    }
}

main > aside:last-child {
    margin-top: 25px;
    margin-bottom: 0px;
}

/* ToC */
#toc { display: inline-block; margin: 1em 0; }
#toc > h2 { font-size: 1.2em; }
#toc ul { list-style-type: none; margin: 0; }
#toc li { margin: 0; }
#toc > ul { padding: 0; }

/* Footnotes */
main > footer { font-size: 0.8em; }
sup { vertical-align: top; font-size: 0.7em; }
sup > a { text-decoration: none; }

:target {
    animation: hilite 2.5s;
}

@keyframes hilite {
  0% { background: transparent; }
  10% { background: #f8f99a; }
  100% { background: transparent; }
}