:root {
    --page-margin: min(2.4em, max(1.2em, 3vw));
    --figure-border: #272727;
    --fg: #272744;
    --bg: #fbf5ef;
    --text-width: 34rem;
    --decoration-color: #c69fa5;
    --decoration-color-contrast: hsl(350.8, 25.5%, 50%);
    --blue: #494d7e;
    --purple: #8b6d9c;
    --shade: #f2d3ab;
    --semishade: #f2d3ab66;
}

/* To test dark mode, add dark-mode to html classes */
.dark-mode {
    --figure-border: hsl(30, 60%, 70%);
    --fg: #fbf5ef;
    --bg: #272727;
    --decoration-color: hsl(350.8, 25.5%, 45%);
    --decoration-color-contrast: hsl(350.8, 25.5%, 75%);
    --blue: hsl(235.5, 26.6%, 63%);
    --purple: hsl(278.3, 19.2%, 64%);
    --shade: hsl(33.8, 70.2%, 31%);
    --semishade: hsla(33.8, 33.2%, 31%, 0.4);
}

html {
    background: var(--bg);
    color: var(--fg);
    font-family: sans-serif;
    font-size: 12pt;
    text-underline-position: under;
}

body {
    line-height: 1.62;
    margin: var(--page-margin);
    hyphens: auto;
}

p, blockquote, li, .field {
    max-width: var(--text-width);
    text-wrap: pretty;
}

.links li {
    max-width: none;
}

a {
    text-decoration: underline;
    text-decoration-color: var(--decoration-color);
    color: var(--blue);
}

a:visited {
    color: var(--purple);
}

img, video, audio, custom-embed {
    display: block;
    max-width: calc(100vw - var(--page-margin) * 2);
    margin: 0;
}

figure {
    margin: calc(2em - 1ex) 0;
    width: fit-content;
    border: 1px solid var(--figure-border);
}

.preformatted {
    max-width: min(120ch, calc(100vw - var(--page-margin) * 2));
}

figcaption {
    font-family: sans-serif;
    font-size: 10pt;
    background: var(--figure-border);
    color: var(--bg);
    margin: 0;
    padding: 0.5em;
    min-width: 100%;
    max-width: min-content;
    box-sizing: border-box;
    line-height: 1.25;
    text-wrap-style: balance;
}

figure:hover figcaption {
    visibility: visible;
}

.preformatted figcaption {
    background: var(--shade);
    color: var(--fg);
}

p, ul {
    margin: 1em 0;
}

li::marker {
    color: var(--decoration-color);
}

blockquote {
    margin: 1lh var(--page-margin);
    display: list-item;
    list-style-type: "\201C  ";
    font-style: italic;
    opacity: 0.80;
    font-size: 14pt;
    box-sizing: border-box;
    max-width: calc(var(--text-width) - var(--page-margin) * 3);
}

blockquote::marker {
    color: var(--decoration-color);
    font-weight: bold;
}

ul {
    padding-left: var(--page-margin);
}

.links {
    padding: 0;
    list-style: none;
}

.links li {
    margin: calc(1em - 1ex) 0;
}

pre {
    font-family: monospace;
    font-size: 11pt;
    overflow-x: auto;
    background: var(--semishade);
    padding: 20px;
    /*padding: calc(2em - 1ex) var(--page-margin);*/
    margin: 0;
}

.anchor {
    text-decoration: none;
}

.anchor::after {
    content: '#';
    visibility: hidden;
}

.anchor:focus::after,
h1:hover .anchor::after,
h2:hover .anchor::after,
h3:hover .anchor::after {
    visibility: visible;
}

h1, h2, h3 {
    text-wrap: balance;
    font-family: serif;
    line-height: 1.4;
}

.form label {
    display: block;
    font-weight: bold;
    font-size: small;
}

.form input, .form textarea {
    width: 100%;
    box-sizing: border-box;
}

.form textarea {
    height: 300px;
}

.field, .actions {
    margin: 1em 0;
}

.form-error {
    background-color: #823a3a;
    color: var(--bg);
    font-weight: bold;
    padding: 0.5em 1em;
    box-sizing: border-box;
}

table {
    border-collapse: collapse;
}

th, td {
    text-align: left;
    vertical-align: top;
    padding: 0.5em 2em 0.5em 0;
}

th {
    font-weight: bold;
    border-bottom: 1px solid var(--fg);
}

td {
    font-weight: normal;
}

tbody tr:nth-child(even) {
    background-color: var(--semishade);
}

time {
    font-style: italic;
}

/* To style external links, add external-links to html classes. */
.external-links a[href*=":"] {
  padding-right: 1.25em;
}
.external-links a[href*=":"]::after {
  content: '🡕';
  display: inline-block;
  user-select: none;
  width: 1em;
  height: 1em;
  margin-left: 0.25em;
}



/* Croftmark custom embeds */
custom-embed {
    width: 600px;
    display: block;
}