html {
    font-family: var(--font-family-sans);
    color: var(--color-text);
    background: var(--color-background);
    max-width: 100vw;
}

body {
    margin: 0 auto;
}

a {
    color: currentColor;
    text-decoration: none;
    cursor: pointer;
}

section a,
footer a,
.address a p { 
    color: var(--color-text--primary);
}

section p a,
small a,
label a {
    text-decoration: underline;
    font-weight: bold;
}

section p a:hover,
small a:hover,
label a:hover {
    text-decoration: none;
}


strong, 
b {
    font-weight: bold;
}

ul,
ol,
p,
pre,
blockquote {
    margin-top: var(--space-2xs);
}

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

ul,
ol,
p {
    line-height: var(--line-height-l);
}

h1,
h2,
h3, 
h4 {
    font-weight: 600;
    line-height: var(--line-height-m);
}

h1,
h1 * {
    font-size: var(--font-size-h1);
    margin-top: var(--space-s);
}

h2,
h2 *  {
    font-size: var(--font-size-h2);
    margin-top: var(--space-s);
}

h3,
h3 *  {
    font-size: var(--font-size-h3);
    margin-top: var(--space-s);
}

h2 + h3,
h2 + h3 * {
    margin-top: var(--space-xs);
}

h4,
h4 *  {
    font-size: var(--font-size-h4);
    margin-top: var(--space-2xs);
}

.codeblock {
    display: grid;
}

code {
    font-family: var(--font-family-mono);
    font-size: 1em;
    background: var(--color-light);
    padding: 0 .5rem;
    display: inline-block;
    color: var(--color-text);
}

pre {
    background: var(--color-text);
    color: var(--color-text--inv);
    padding: var(--space-l);
    overflow-x: scroll;
    overflow-y: hidden;
}

pre code {
    padding: 0;
    background: none;
    color: inherit;
}

blockquote {
    font-size: var(--font-size-xs);
    border-left: 0.125rem solid currentcolor;
    padding-left: var(--space-xs);
    max-width: 25rem;
}

blockquote {
    font-family: var(--font-family-script);
    font-size: var(--font-size-h4);
}

blockquote footer {
    margin-top: var(--space-3xs);
}

hr {
    border: 0;
    background: currentColor;
    height: calc(1.33 * var(--space-2xl));
    width: 0.1rem;
    margin-left: auto;
    margin-right: auto;
}

/*
hr:after {
    content: '';
    display: block;
    width: calc( 4 * var(--font-size));
    height: calc( 4 * var(--font-size));
    margin: 0 auto;
    -webkit-mask: url('../icons/.svg') no-repeat 50% 50%;
    mask: url('../icons/.svg') no-repeat 50% 50%;
    -webkit-mask-size: cover;
    mask-size: cover;
    background-color: var(--color-primary);
}
*/

em {
    margin: 0 -0.1em;
    padding: 0.1em;
    background: var(--color-background);
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    text-decoration: none;
    font-style: normal;
}

/*
em {
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
    text-decoration: none;
    font-style: normal;
    border-bottom: var(--border--dotted);
    border-bottom-color: var(--color-primary--transparent);
}
*/

input, 
button, 
textarea, 
select {
    font: inherit;
}

.spacer {
    height: var(--space-m);
}

.honeypot {
    position: absolute;
    left: -9999px;
}

small,
small * {
    font-size: var(--font-size-3xs);
}

.field {
    margin: var(--space-xs) 0;
}

select,
input:not([type="submit"]),
textarea {
    background: var(--color-neutral);
    padding: var(--space-3xs); 
}

textarea {
    width: 100%;
    height: calc(6 * var(--font-size) * var(--line-height-m));
}

svg {
    fill: var(--color-text);
}