@charset "UTF-8";

:root {
    color-scheme: light dark;

    --left-gutter-width: var(--sp-default);
    --left-gutter-gap: var(--sp-default);

    /* Fonts */
    --font-serif: "Libertinus Serif", "Linux Libertine O", "Linux Libertine", serif;
    --font-sans:  "Libertinus Sans", "Linux Biolinum O", "Linux Biolinum", -apple-system, sans-serif;
    --font-mono: "JetBrains Mono", monospace;
    --font-mono-apl: "APL385 Unicode", monospace;
    --font-mono-settings: "ss02", "zero";
    --font-comic: "Comic Sans Mono", "Comic Sans", cursive;
    --font-icons: var(--font-math);
    --font-kbd: "Libertinus Keyboard";
    --font-math: "STIX Two Math", math;
    --font-display: var(--font-sans);

    /* Font sizes */
    --fs-footnotesize: 0.78rem;
    --fs-small: 1.05rem;
    --fs-normal: 1.4rem;
    --fs-large: 1.87rem;
    --fs-xlarge: 2.5rem;

    --fs-code-small: calc(0.78 * var(--fs-small));
    --fs-code-normal: calc(0.78 * var(--fs-normal));

    --fs-math-small: calc(0.92 * var(--fs-small));
    --fs-math-normal: calc(0.92 * var(--fs-normal));
    
    /* Colors */
    --page: #FBF7EE;
    --page-sunk: #F3EDDF;

    --ink: #1B1814;
    --ink-subtle: #55504A;
    --ink-faint: #8A857B;

    --rule: #D6CDBB;
    --rule-soft: #E8E0CD;

    --accent-1: #A6392B;
    --accent-1-ink: #8A2F24;

    --accent-2: #1F6B6B;
    --accent-2-ink: #1A5A5A;
    --selection: #F2D8B6;

    --code-good: #3E6A3A;
    --code-good-bg: #E9EFDE;
    --code-bad: #A6392B;
    --code-bad-bg: #F4E4DE;


    /* Spacing */
    --sp-tight: 0.25rem;
    --sp-inline: 0.5rem;
    --sp-default: 1rem;
    --sp-para-gap: 1.4rem;
    --sp-line: 2rem;
    --sp-large: 2.8rem;

    /* Line heights */
    --lh-compact: 1.12rem;
    --lh-medium: 1.5rem;
    --lh-body: var(--sp-line);
}

/* Font faces */

@font-face {
    font-family: "Libertinus Serif";
    font-style: normal;
    font-weight: 400;
    src:
        local(Libertinum Serif),
        local(Linux Libertine O),
        url("/fonts/LibertinusSerif-Regular.otf") format("opentype"),
        url("/fonts/LibertinusSerif-Regular.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Libertinus Serif";
    font-style: italic;
    font-weight: 400;
    src:
        local(Libertinus Serif Italic),
        url("/fonts/LibertinusSerif-Italic.otf") format("opentype"),
        url("/fonts/LibertinusSerif-Italic.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Libertinus Serif";
    font-style: italic;
    font-weight: 400;
    src:
        local(Libertinus Serif Italic),
        url("/fonts/LibertinusSerif-Italic.otf") format("opentype"),
        url("/fonts/LibertinusSerif-Italic.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Libertinus Sans";
    font-style: normal;
    font-weight: normal;
    src:
        local("Libertinus Sans"),
        local("Linux Biolinum O"),
        url("/fonts/LibertinusSans-Regular.otf") format("opentype"),
        url("/fonts/LibertinusSans-Regular.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Libertinus Sans";
    font-style: italic;
    font-weight: normal;
    src:
        local("Libertinus Sans Italic"),
        local("Linux Biolinum O"),
        url("/fonts/LibertinusSans-Italic.otf") format("opentype"),
        url("/fonts/LibertinusSans-Italic.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Libertinus Sans";
    font-weight: bold;
    src:
        local("Libertinus Sans Bold"),
        local("Linux Biolinum O"),
        url("/fonts/LibertinusSans-Bold.otf") format("opentype"),
        url("/fonts/LibertinusSans-Bold.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Libertinus Keyboard";
    font-style: normal;
    font-weight: normal;
    src:
        local("Libertinus Keyboard"),
        url("/fonts/LibertinusKeyboard-Regular.otf") format("opentype"),
        url("/fonts/LibertinusKeyboard-Regular.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "STIX Two Math";
    font-style: normal;
    font-weight: normal;
    src:
        local(STIX Two Math),
        url("/fonts/STIXTwoMath-Regular.otf") format("opentype");
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: normal;
    src:
        local(JetBrains Mono),
        url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: bold;
    src:
        local(JetBrains Mono),
        url("/fonts/JetBrainsMono-Bold.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: italic;
    font-weight: normal;
    src:
        local(JetBrains Mono),
        url("/fonts/JetBrainsMono-Italic.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "JetBrains Mono";
    font-style: italic;
    font-weight: bold;
    src:
        local(JetBrains Mono),
        url("/fonts/JetBrainsMono-SemiBoldItalic.woff2") format("woff2");
    font-display: swap;
}

@font-face {
    font-family: "Comic Sans Mono";
    font-style: normal;
    font-weight: 400;
    src: url("/fonts/ComicMono.ttf") format("truetype");
}

@font-face {
    font-family: "APL385 Unicode";
    font-style: normal;
    font-weight: 400;
    src:
        local(APL385 Unicode),
        url("/fonts/Apl385.ttf") format("truetype");
    font-display: swap;
}

::selection {
    background-color: var(--selection);
}

a:link, a:visited {
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    color: var(--accent-2-ink);
}

.post-icons {
    white-space: nowrap;
}

a.icon-link:link,
a.icon-link:visited {
    text-decoration: none;
    background: none;
    vertical-align: middle;
}

.social-icon {
    height: var(--fs-small);
    width: var(--fs-small);
    margin-right: var(--sp-inline);
    vertical-align: text-bottom;
}

.lobsters-icon {
    background-color: #880000;
}

.post-attrs {
    font-size: var(--fs-small);
    line-height: var(--lh-compact);
    color: var(--ink-subtle);
    font-variant-numeric: oldstyle-nums;
}

.post-attrs .attr-date {
    margin-right: var(--sp-default);
    white-space: nowrap;
}

.post-attrs .icon {
    margin-right: var(--sp-inline);
    font-family: var(--font-icons);
    font-size: var(--fs-normal);
    line-height: var(--lh-compact);
    vertical-align: sub;
}

.posts .article-title {
    font-weight: normal;
    margin: 0 0 0 0;
    line-height: var(--lh-body);
}

.article-title {
    font-family: var(--font-sans);
    font-variant-caps: small-caps;
}

.article-subtitle {
    font-family: var(--font-sans);
    font-size: var(--fs-small);
    line-height: var(--lh-medium);
    color: var(--ink-subtle);
 }

figure > div.source-container {
    width: 100%;
}

div.source-container > pre > code {
    padding: var(--sp-default);
}

div.source-container > pre.linenumbers > code {
    padding: var(--sp-default) 0;
}

ul.posts {
    padding-left: 0px;
    margin-top: 0px;
    width: 55%;
}
ul.posts li {
    padding-top: var(--sp-default);
    padding-bottom: var(--sp-default);
}
ul.posts li:nth-child(1) {
    padding-top: 0px;
}
ul.posts li:nth-last-child(1) {
    padding-bottom: 0px;
}
ul.posts li:nth-child(n+2) {
    border-top: 1px solid var(--rule-soft);
}

.left-gutter-anchor {
    position: relative;
}

.left-gutter-anchor::before {
    position: absolute;
    right: calc(100% + var(--left-gutter-gap));
    width: var(--left-gutter-width);
    text-align: right;
    color: var(--accent-1);
    font-family: var(--font-icons);
}

ul.posts > li {
    list-style: none;
}

/* Icons for future use: ⏱ ☀ ⏾*/

/* Chapter Epigraphs */

figure.epigraph {
    position: relative;
    border-left: 1px solid var(--rule);
    color: var(--ink-subtle);

    padding-left: var(--sp-para-gap);
    margin-right: var(--sp-para-gap);
    margin-top: var(--sp-default);
    margin-bottom: var(--sp-large);

    width: 50%;
}

figure.epigraph > blockquote,
figure.epigraph > blockquote > p {
    font-size: var(--fs-small);
    font-style: italic;
    line-height: var(--lh-medium);
    width: 100%;
}

figure.epigraph > blockquote > figcaption > cite {
    font-style: italic;
}

figure.epigraph figcaption::before,
figure.bq figcaption::before {
    content: "— ";
}

figure.epigraph figcaption, figure.bq figcaption {
    float: none;
    margin-top: var(--sp-inline);
    text-align: right;
    font-family: var(--font-sans);
    font-variant-caps: small-caps;
    letter-spacing: 0.04em;
    font-size: var(--fs-footnotesize);
    color: var(--ink-faint);
    max-width: 100%;
}

figure.epigraph blockquote {
    margin: 0;
}

figure.bq::before, figure.epigraph::before {
    line-height: var(--lh-medium);
    color: var(--ink-faint);
    font-size: var(--fs-large);
    content: "❝";
}

figure.bq::before {
    line-height: var(--lh-body);
}

figure.bq {
    width: 50%;
    padding-left: var(--sp-para-gap);
    padding-right: var(--sp-para-gap);
}

figure.bq blockquote {
    margin: 0;
}

figure.bq figcaption {
    color: var(--ink-subtle);
    margin: 0;
}

figure.bq cite, .epigraph cite {
    font-style: italic;
    /* italic work title, not small caps */
    font-variant-caps: normal;
    letter-spacing: 0;
}

.featured-marker::before {
    content: "★";
    font-size: var(--fs-normal);
    line-height: var(--lh-body);
    vertical-align: top;
}

.advice-anchor::before {
    /* content: "§"; */
    content: "☞";
}

/* Compact article list (index page, similar articles) */
ul.article-list {
    padding-left: 0;
    list-style: none;
}

ul.article-list > li {
    line-height: var(--lh-medium);
}

.compact-title {
    font-family: var(--font-sans);
    font-variant-caps: small-caps;
    font-size: var(--fs-normal);
}

.compact-date {
    font-size: var(--fs-small);
    font-variant-numeric: oldstyle-nums;
    color: var(--ink-subtle);
    margin-left: var(--sp-inline);
}

img.logo {
    height: 100%;
    width: 28px;
    vertical-align: middle;
    padding-right: var(--sp-default);
}

nav ul {
    padding: 0px;
}

dt {
    font-style: italic;
}

nav li {
    display: inline;
    margin: 0 1.5em 0 0;
    font-feature-settings: "smcp" on;
    text-transform: lowercase; 
    font-family: var(--font-sans);
}

nav a:link, nav a:visited {
    background: none;
    text-decoration: none;
    color: var(--ink);
}

img.portrait {
    float: left;
    margin: 0px var(--sp-default) var(--sp-tight) 0px;
}

figure.medium-size svg {
    width: 50%;
}

.center {
    text-align: center;
}

figure.left p {
    text-align: left;
}

.right {
    text-align: right;
}

figure.p25 img {
    width: 25%;
}

figure.medium-size img {
    width: 50%;
}

figure.p75 img {
    width: 75%;
}

ul.arrows > li:before,
ul.checklist > li:before,
ol.circled > li:before {
    position: absolute;
    margin-left: calc(-1 * var(--sp-line));
    font-family: var(--font-icons);
    vertical-align: text-top;
}

ul.arrows > li:before {
    content: "→";
    vertical-align: sup;
}

ul.checklist > li:before {
    content: "☐";
}

ol.circled > li:before {
    content: attr(data-num-glyph);
}

ul.arrows > li,
ul.checklist > li,
ol.circled > li {
    list-style: none;
    clear: both;
}

.circled-ref {
    font-family: var(--font-icons);
    font-size: var(--fs-normal);
    vertical-align: text-top;
    color: var(--accent-1);
}

code .circled-ref {
    font-size: var(--fs-code-normal);
    vertical-align: middle;
}

li.toc {
    list-style: none;
    line-height: var(--lh-compact);
}

ul.toc a:link, ul.toc a:visited {
    font-feature-settings: normal;
    text-transform: initial;
    text-decoration: none;
    background: none;
    font-family: var(--font-sans);
    color: var(--ink);
    font-size: var(--fs-small);
}

ul.toc-level-1 {
    padding-left: 0px;
}

ul.toc-level-1 > li > a {
    font-weight: bold;
}

ul.toc-level-2 {
    padding-left: var(--sp-default);
}

a.anchor {
    display: inline-block;
    width: 0;
    font-size: 0.8em;
    text-decoration: none;
    vertical-align: baseline;
}

a.license, a.github-link {
    background: none;
    line-height: var(--lh-medium);
}

a[rel=license] {
    vertical-align: middle;
}

.github-link::before {
    background-size: 16px 16px;
    width: 16px;
    height: 16px;
    display: inline-block;
    vertical-align: sub;
    content: "";
    margin-right: var(--sp-tight);
    line-height: var(--lh-medium);
}

.github-link::before {
    background-image: url(/images/GitHub-Mark-32px.png);
}

a > code {
    text-transform: none;
}

a {
    text-decoration-color: initial;
    hyphens: none;
}

div.advice {
    padding: 5px 0px;
}

div.advice > p {
    position: relative;
    width: 100%;
    font-style: italic;
    text-align: center;
}

.advice-anchor {
    position: absolute;
    top: 0;
    left: 0;
}

div.advice code {
    font-style: italic;
}

footer {
    text-align: center;
    width: 55%;
}

pre.good > code {
    color: var(--code-good);
    background-color: var(--code-good-bg);
}

pre.bad > code {
    color: var(--code-bad);
    background-color: var(--code-bad-bg);
}

pre.apl > code {
    font-family: var(--font-mono-apl);
    font-size: var(--fs-large);
}

.math {
    font-family: var(--font-math);
    white-space: nowrap;
    font-variant-numeric: normal;
    font-size: var(--fs-math-normal);
}

.marginnote .math {
    font-size: var(--fs-math-small);
}

kbd {
    font-family: var(--font-kbd);
}

body {
    width: 87.5%;
    margin-left: auto;
    margin-right: auto;
    padding-left: 12.5%;
    font-family: var(--font-serif);
    background-color: var(--page);
    color: var(--ink);
    max-width: 1400px;
    counter-reset: sidenote-counter;
}

/* Adds dark mode */
@media (prefers-color-scheme: dark) {
    :root {
        --page: #15120F;
        --page-sunk: #1D1915;

        --ink: #EDE5D2;
        --ink-subtle: #BCB3A0;
        --ink-faint: #7F7868;

        --rule: #3A342A;
        --rule-soft: #2A251E;

        --accent-1: #E2695A;
        --accent-1-ink: #E89B8E;

        --accent-2: #6FC3C3;
        --accent-2-ink: #9AD7D7;
        --selection: #453219;

        --code-good: #7FB76A;
        --code-good-bg: #1E2A1B;
        --code-bad: #E2695A;
        --code-bad-bg: #2A1A16;
    }

    .github-link::before {
        background-image: url(/images/GitHub-Mark-Light-32px.png);
    }

    figure.grayscale-diagram svg,
    figure.grayscale-diagram img,
    img.grayscale {
        filter: invert(100%);
    }
}

h1 {
    font-weight: 400;
    margin-top: var(--sp-large);
    margin-bottom: var(--sp-inline);
    font-size: var(--fs-xlarge);
    line-height: 1;
    font-family: var(--font-display);
    hyphens: none;
}

h2 {
    font-weight: bold;
    margin-top: var(--sp-line);
    margin-bottom: var(--sp-inline);
    font-size: var(--fs-large);
    line-height: 1;
    font-family: var(--font-sans);
    hyphens: none;
}

h1 a:link, h1 a:visited,
h2 a:link, h2 a:visited,
h3 a:link, h3 a:visited {
    background: none;
    text-decoration: none;
    font-feature-settings: normal;
    text-transform: initial;
    color: var(--ink);
}

h3 {
    font-weight: bold;
    font-size: var(--fs-normal);
    margin-top: var(--sp-large);
    margin-bottom: var(--sp-inline);
    line-height: 1;
    font-family: var(--font-sans);
}

hr {
    display: block;
    height: 1px;
    width: 55%;
    border: 0;
    border-top: 1px solid var(--rule);
    margin: var(--sp-default) 0;
    padding: 0;
}

section {
    padding-top: var(--sp-line);
}

p,
dl,
ol,
ul {
    font-size: var(--fs-normal);
    line-height: var(--lh-body);
    font-variant-numeric: oldstyle-nums;
}

p {
    margin-block-start: var(--sp-para-gap);
    margin-block-end: var(--sp-para-gap);
    padding-right: 0;
    vertical-align: baseline;
    hyphens: auto;
    text-wrap: pretty;
}

p.hanging-quote {
    text-indent: -0.375em;
}

figure.bq blockquote {
    font-size: var(--fs-normal);
    position: relative;
}

div.container > p,
section > p,
section > div.source-container,
section > div.advice,
section > footer,
section > table {
    width: 55%;
}

section > dl,
section > ol,
section > ul {
    width: calc(55% - var(--sp-line));
    padding-left: var(--sp-line);
}

dt:not(:first-child),
li:not(:first-child) {
    margin-top: var(--sp-tight);
}

figure {
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    max-width: 55%;
    -webkit-margin-start: 0;
    -webkit-margin-end: 0;
    margin: 0 0 3em 0;
}

figcaption {
    float: right;
    clear: right;
    margin-top: 0;
    margin-bottom: 0;
    font-size: var(--fs-small);
    line-height: 1.6;
    vertical-align: baseline;
    position: relative;
    max-width: 40%;
}

figure.fullwidth figcaption {
    margin-right: 24%;
}

/* Sidenotes, margin notes, figures, captions */
img {
    max-width: 100%;
}

.sidenote,
.marginnote {
    float: right;
    clear: right;
    margin-right: -60%;
    width: 50%;
    margin-top: var(--sp-tight);
    margin-bottom: 0;
    font-size: var(--fs-small);
    line-height: var(--lh-medium);
    vertical-align: baseline;
    position: relative;
}

.sidenote-number {
    counter-increment: sidenote-counter;
}

.sidenote-number:after,
.sidenote:before {
    font-family: var(--font-serif);
    font-variant-numeric: normal;
    position: relative;
    vertical-align: baseline;
}

.sidenote-number:after {
    content: counter(sidenote-counter);
    font-size: var(--fs-small);
    top: calc(-1 * var(--sp-inline));
    left: 0.1rem;
}

.sidenote:before {
    content: counter(sidenote-counter) " ";
    font-size: var(--fs-small);
    top: calc(-1 * var(--sp-inline));
}

blockquote .sidenote,
blockquote .marginnote {
    margin-right: -82%;
    min-width: 59%;
    text-align: left;
}

div.fullwidth,
table.fullwidth {
    width: 100%;
}

table {
    border-collapse: collapse;
}

table .math {
    font-size: var(--fs-math-small);
}
table code {
    font-size: var(--fs-code-small);
}

th,
td {
    text-align: left;
}

table > thead > tr:last-child > td,
table > thead > tr:last-child > th,
table > tbody > tr:last-child > th {
    padding-bottom: var(--sp-inline);
    font-variant: all-small-caps;
}

.table-2 td,
.table-2 th {
    width: 50%;
}

.table-3 td,
.table-3 th {
    width: 33%;
}

.table-4 td,
.table-4 th {
    width: 25%;
}

.table-5 td,
.table-5 th {
    width: 20%;
}

.num-col {
    text-align: right;
    padding-right: 4em;
}

.align-r {
    text-align: right;
    padding-right: 1em;
}

.align-l {
    text-align: left;
    padding-left: 1em;
}

.align-c {
    text-align: center;
}

table > tbody > tr:first-child > td,
table > tbody > tr:first-child > th {
    padding-top: var(--sp-inline);
}

tr.border-top {
    border-top: 1px solid;
}

tr.border-bot {
    border-bottom: 1px solid;
}

.sans {
    font-family: var(--font-sans);
    letter-spacing: 0.03em;
}

.fun {
    font-family: var(--font-comic);
}

code,
pre > code {
    font-family: var(--font-mono);
    font-feature-settings: var(--font-mono-settings);
    font-size: var(--fs-code-normal);
    line-height: var(--lh-compact);
    font-variant-numeric: normal;
    -webkit-text-size-adjust: 100%;
}

pre.linenumbers > code > span.line:before {
    content: counter(line);
    display: inline-block;
    width: 3ch;
    padding-right: 0.5ch;
    margin-right: 1ch;
    text-align: right;
    color: var(--ink-faint);
    border-right: 1px solid;
    border-color: var(--rule);
}

pre.linenumbers > code > span.line {
    counter-increment: line;
}

.sans > code {
    font-size: var(--fs-code-normal);
}

.marginnote > code,
.marginnote > a > code,
.sidenote > code,
.sidenote > a > code {
    font-size: var(--fs-code-small);
}

pre > code a > code {
    font-size: var(--fs-code-small);
}

pre > code {
    background: var(--page-sunk);
    font-size: var(--fs-code-small);
    overflow-x: auto;
    display: block;
}

pre.fullwidth > code {
    width: 90%;
}

.fullwidth {
    max-width: 90%;
    clear: both;
}

.strikethrough {
    text-decoration: line-through;
}

.smallcaps {
    font-variant: small-caps;
    font-variant-numeric: oldstyle-nums;
}

.normal {
    font-variant: normal;
}

span.newthought {
    font-variant: small-caps;
    font-size: 1.2em;
}

input.margin-toggle {
    display: none;
}

label.sidenote-number {
    display: inline-block;
    max-height: var(--lh-body);
    /* should be less than or equal to paragraph line-height */
}

label.margin-toggle:not(.sidenote-number) {
    display: none;
}

.iframe-wrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    padding-top: 25px;
    height: 0;
}

.iframe-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

p.svg {
    overflow-x: auto;
    text-align: center;
}

@media (max-width: 760px) {
    body {
        width: 84%;
        padding-left: 8%;
        padding-right: 8%;
    }

    nav ul {
        font-size: 14px;
    }

    hr,
    section > p,
    article > footer,
    section > div.container,
    div.container > p,
    section > div.advice,
    section > div.source-container,
    section > footer,
    section > table {
        width: 100%;
    }

    pre > code {
        width: 97%;
    }

    section > dl,
    section > ol,
    section > ul {
        width: 90%;
    }

    ul.posts {
        width: 100%;
    }


    figure {
        max-width: 90%;
    }

    figcaption,
    figure.fullwidth figcaption {
        margin-right: 0%;
        max-width: none;
    }

    blockquote {
        margin-left: var(--sp-para-gap);
        margin-right: 0em;
    }

    blockquote p {
        width: 100%;
    }

    .epigraph figcaption {
        width: 100%;
    }

    label.margin-toggle:not(.sidenote-number) {
        display: inline;
    }

    .sidenote,
    .marginnote {
        display: none;
    }

    .sidenote-number:after {
        text-decoration: underline;
    }

    .margin-toggle:checked + .sidenote,
    .margin-toggle:checked + .marginnote {
        display: block;
        float: left;
        left: var(--sp-default);
        clear: both;
        width: 95%;
        margin: var(--sp-default) 2.5%;
        vertical-align: baseline;
        position: relative;
    }

    .left-gutter-anchor::before {
        position: static;
        display: inline-block;
        width: auto;
        margin-right: var(--sp-inline);
        font-size: var(--fs-normal);
        vertical-align: middle;
        transform: none;
    }

    figure.epigraph::before {
        display: none;
    }

    .advice-anchor {
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        width: 1em;
    }

    .advice-anchor::before {
        display: block;
        margin-right: 0;
    }

    div.advice > p {
        padding-left: 1.35em;
        text-align: left;
    }

    label {
        cursor: pointer;
    }

    div.table-wrapper,
    table {
        width: 85%;
    }

    img {
        width: 100%;
    }

    p.svg {
        clear: both;
    }

    footer {
        width: 100%;
    }
}