@import "normalize.css";
@import "fonts.css";

:root {
    --accent-color: rgb(43, 208, 216);
    --font-sans: Atkinson Hyperlegible Next, ui-sans-serif, sans-serif;
    --font-serif: Libertinus, ui-serif, serif;
    --font-mono:
        Fantasque Sans Mono, Atkinson Hyperlegible Mono, Julia Mono, ui-monospace, monospace;
    --grey-borders: rgb(233, 235, 238);
    --blockquote-grey: rgb(4, 35, 11);
}

p {
    margin-bottom: 0.75em;
    margin-top: 0;
}

blockquote {
    margin: 0;
    padding: 0 1em;
    color: var(--blockquote-grey);
    border-left: 0.25em solid var(--grey-borders);

    > :first-child {
        margin-top: 0;
    }

    > :last-child {
        margin-bottom: 0;
    }
}

ul,
ol {
    padding-left: 0;
    margin-top: 0;
    margin-bottom: 0;
}

ol ol,
ul ol {
    list-style-type: lower-roman;
}

ul ul ol,
ul ol ol,
ol ul ol,
ol ol ol {
    list-style-type: lower-alpha;
}

dd {
    margin-left: 0;
}

tt,
code {
    font-family: var(--font-mono);
}

kbd {
    display: inline-block;
    padding: 3px 5px;
    color: #444d56;
    vertical-align: middle;
    background-color: #fafbfc;
    border: solid 1px rgb(197, 202, 209);
    border-bottom-color: #959da5;
    border-radius: 3px;
    box-shadow: inset 0 -1px 0 #959da5;
}

pre {
    border-radius: 3px;
    font-family: var(--font-mono);
    margin-top: 0;
    margin-bottom: 0;
    overflow: auto;
    padding: 0.5em;
    word-wrap: normal;
}

pre code,
pre tt {
    background-color: transparent;
    border: 0;
    display: inline;
    max-width: auto;
    margin: 0;
    overflow: visible;
    padding: 0;
    white-space: pre;
}

a {
    color: var(--accent-color);
    text-decoration: underline dotted;

    &:hover,
    &:focus {
        text-decoration: underline;
    }
}

#banner {
    line-height: 1.25;
    margin-bottom: 1.5rem;
    padding-bottom: 0.3em;
    #title {
        font-size: 2em;
        a {
            text-decoration: none;
            &:hover,
            &:focus {
                text-decoration: none;
            }
        }
    }
    #subtitle {
        font-size: 1.25em;
        max-width: 28em;
        text-align: left;
    }
}

.container {
    font-family: var(--font-sans);
    hyphens: auto;
    line-height: 1.5;
    margin-bottom: 2rem;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
    max-width: 90rex;
    padding-left: 2rem;
    padding-right: 2rem;
    text-align: justify;
    word-wrap: break-word;
}

.container::before {
    content: "";
    display: table;
}
.container::after {
    clear: both;
    content: "";
    display: table;
}
.container > *:first-child {
    margin-top: 0;
}
.container > *:last-child {
    margin-bottom: 0;
}

.container a:not([href]) {
    color: inherit;
    text-decoration: none;
}

.container p,
.container blockquote,
.container ul,
.container ol,
.container dl,
.container table,
.container pre {
    margin-top: 0;
    margin-bottom: 1em;
}
.container hr {
    background-color: #e1e4e8;
    border: 0;
    height: 0.25rem;
    margin: 2rem 0;
    padding: 0;
}

.container h1,
.container h2,
.container h3,
.container h4,
.container h5,
.container h6 {
    font-weight: normal;
    line-height: 1.25;
    margin-bottom: 0.75rem;
    margin-top: 1.25rem;
}
.container h1 tt,
.container h1 code,
.container h2 tt,
.container h2 code,
.container h3 tt,
.container h3 code,
.container h4 tt,
.container h4 code,
.container h5 tt,
.container h5 code,
.container h6 tt,
.container h6 code {
    font-size: inherit;
}
.container h1 {
    border-bottom: 1px solid var(--grey-borders);
    font-size: 2em;
    padding-bottom: 0.3em;
}
.container h2 {
    border-bottom: 1px solid var(--grey-borders);
    font-size: 1.5em;
    padding-bottom: 0.3em;
}
.container h3 {
    font-size: 1.25em;
}
.container h4 {
    font-size: 1em;
}
.container h5 {
    font-size: 0.875em;
}
.container h6 {
    font-size: 0.85em;
    color: #6a737d;
}

.container ul,
.container ol {
    padding-left: 2em;
}

.container ul ul,
.container ul ol,
.container ol ol,
.container ol ul {
    margin-bottom: 0;
    margin-top: 0;
}
.container li {
    word-wrap: break-all;
}
.container li > p {
    margin-top: 1em;
}
.container li + li {
    margin-top: 0.25rem;
}
.container dl {
    padding: 0;
}
.container dl dt {
    font-style: italic;
    font-weight: 600;
    margin-top: 1em;
    padding: 0;
}
.container dl dd {
    margin-bottom: 1rem;
    padding: 0 1rem;
}

.container table {
    display: block;
    overflow: auto;
    width: 100%;
}
.container table th {
    font-weight: 600;
}
.container table th,
.container table td {
    border: 1px solid rgb(223, 226, 229);
    padding: 0.5em 1em;
}
.container table tr {
    background-color: #fff;
    border-top: 1px solid rgb(198, 203, 209);
}
.container table tr:nth-child(2n) {
    background-color: #f6f8fa;
}
.container table img {
    background-color: transparent;
}

.container img {
    background-color: white;
    box-sizing: content-box;
    max-width: 100%;
}
.container img[align="right"] {
    padding-left: 1.25rem;
}
.container img[align="left"] {
    padding-right: 1.25rem;
}

.container code,
.container tt {
    background-color: rgba(27, 31, 35, 0.05);
    border-radius: 3px;
    margin: 0;
    padding: 0.2em 0.4em;
}
.container code br,
.container tt br {
    display: none;
}
.container del code {
    text-decoration: inherit;
}