html {
    --text-xxs: 0.5625rem;
    /* 9px */
    --text-xs: 0.6875rem;
    /* 11px */
    --text-sm: 0.75rem;
    /* 12px */
    --text-md: 0.875rem;
    /* 14px */
    --text-lg: 1rem;
    /* 16px */
    --text-xl: 1.3125rem;
    /* 21px */
    --text-xxl: 1.75rem;
    /* 28px */
    --emoji-font: "Twemoji";
    --header-font: "Tahoma", "Verdana", "Helvetica", var(--emoji-font), sans-serif;
    --body-font: "Verdana", "Helvetica", var(--emoji-font), sans-serif;
    --monospace-font: monospace;
    --arial-font: "Arial", "Helvetica", sans-serif;
}

[hidden],
[x-cloak] {
    display: none !important;
}

html:not(:has(:fullscreen)) {
    scrollbar-gutter: stable;
}

body {
    color: var(--text-color);
    background-color: var(--body-background-color);
    font-family: var(--body-font);
    font-size: var(--text-md);
    line-height: 1.25em;
}

dd {
    margin-bottom: 1em;
}

dt {
    font-weight: bold;
}

h1,
h2,
h3,
h4,
h5,
h6,
.heading {
    font-family: var(--header-font);
    font-weight: bold;
    line-height: 1.5em;
    color: var(--header-color);
}

h1 {
    font-size: var(--text-xxl);
}

h2 {
    font-size: var(--text-lg);
}

h3,
h4,
h5,
h6 {
    font-size: var(--text-md);
}

input,
select,
textarea,
button {
    background-color: var(--form-input-background);
    border-color: var(--form-input-border-color);
    border-width: 1px;
    padding: 0.125rem 0.25rem;
}

:where(input[type="checkbox"], input[type="radio"]) {
    accent-color: var(--checkbox-selected-color);
}

::placeholder {
    color: var(--form-input-placeholder-text-color);
    font-size: 0.9em;
    padding-left: 0.5em;
}

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

::target-text {
    color: var(--inverse-text-color);
    background-color: var(--target-text-background-color);
}

:target[id]:not(h1, h2, h3, h4, h5, h6) {
    background-color: var(--target-background) !important;
}

:focus-visible {
    outline: 2px solid var(--focus-ring-color);
    outline-offset: -2px;
    border-color: transparent;
}

menu>li {
    display: inline;
}

p {
    margin-bottom: 1em;
}

details summary {
    cursor: pointer;
    user-select: none;
    outline: none;
}

.fineprint {
    color: var(--muted-text-color);
    font-style: italic;
    font-size: 0.8em;
}

a.link-plain {
    color: unset;
}

a.link-plain:hover {
    text-decoration: underline;
}

.fixed-width-container {
    max-width: 60rem;
}

ul.list-bulleted {
    list-style: inside disc;
}

ul.list-inline,
ul.list-inline li {
    display: inline;
}

.fit-width {
    max-width: 100%;
    height: auto !important;
}

.fit-height {
    max-height: 90vh;
    height: auto !important;
}

.svg-icon {
    display: inline-block;
    height: 1em;
}

.mobile-only {
    display: none !important;
}

@media (max-width: 660px) {
    .mobile-only {
        display: initial !important;
    }

    .desktop-only {
        display: none !important;
    }
}