*, ::before, ::after {

box-sizing: border-box;

}

html {

margin: 0;
padding: 0;
height: 100%;

}

body {

color: var(--text-color);
background: var(--background-color);

font-family: var(--font-family);
font-size: calc(var(--font-size) * var(--typescale-body));
line-height: var(--line-height);

display: flex;
min-height: 100vh;
flex-direction: column;
flex: 1;

margin: 0 auto;
padding: 0 var(--space-half);
max-width: var(--body-width);
height: 100%;

overflow-x: hidden;
word-break: break-word;
overflow-wrap: break-word;

/* transition for color-theme */
transition: background 500ms ease-in-out, color 200ms ease;

}

h1, h2, h3, h4, h5, h6 {

font-family: var(--font-family-headings);
line-height: var(--line-height-heading);

}

h1 {

font-size: calc(var(--font-size) * var(--typescale-heading) * var(--typescale-heading) * var(--typescale-heading) * var(--typescale-heading));
margin-top: calc(var(--line-height) * var(--spacing-heading));

}

h2 {

font-size: calc(var(--font-size) * var(--typescale-heading) * var(--typescale-heading) * var(--typescale-heading));
margin-top: calc(var(--line-height) * var(--spacing-heading));

}

h3 {

font-size: calc(var(--font-size) * var(--typescale-heading) * var(--typescale-heading));
margin-top: calc(var(--line-height) * var(--spacing-heading));

}

h4 {

font-size: calc(var(--font-size) * var(--typescale-heading));
margin-top: calc(var(--line-height) * var(--spacing-heading));

}

h5 {

font-size: var(--font-size);
margin-top: calc(var(--line-height) * var(--spacing-heading));

}

h6 {

font-size: calc(var(--font-size) / var(--typescale-heading));
margin-top: calc(var(--line-height) * var(--spacing-heading));

}

small {

font-size: var(--font-size-small);

}

a, a:visited {

color: var(--text-color-link);
text-decoration: none;

}

a:hover, a:active {

color: var(--text-color-link-hover);
text-decoration: underline;

}

blockquote {

margin: var(--space-double) var(--space-base);
padding: var(--space-half) var(--space-base) var(--space-half) var(--space-double);
overflow: auto;
opacity: var(--opacity-low);

background: var(--background-color-alt);
border-radius: var(--border-radius);
border: var(--border-width) solid var(--background-color-alt);
border-left: var(--border-width-alt) solid var(--border-color-highlight);

}

blockquote p {

border-radius: var(--border-radius);

}

cite {

font-size: var(--font-size-smaller);
font-style: normal;

}

code, pre, pre span, kbd, samp {

font-family: var(--font-family-monospace);
font-size: var(--font-size-small);
color: var(--text-color-alt);

/* repair edges of wrapped inline elements */
-webkit-box-decoration-break: clone;
        box-decoration-break: clone;

}

kbd {

color: var(--text-color-alt);
border: var(--border-width) solid var(--text-color-alt);
border-bottom: var(--border-width-alt) solid var(--text-color-alt);
border-radius: var(--border-radius-high);
padding: calc(0.5 * var(--space-quarter)) var(--space-half);

}

pre {

margin: var(--space-base) 0;
padding: var(--space-base) var(--space-double);
max-width: 100%;

background: var(--background-color-alt);
border-radius: var(--border-radius);
border: var(--border-width) solid var(--background-color-alt);
border-left: var(--border-width-alt) solid var(--border-color-highlight);

}

pre code {

background: none;
margin: 0;
padding: 0;

}

code {

padding: var(--space-quarter) var(--space-half);
background: var(--background-color-alt);
border-radius: var(--border-radius);

}

abbr {

cursor: help;

}

details {

padding: var(--space-half) var(--space-base);
background: var(--background-color-accent);
border: 1px solid var(--border-color);
border-radius: var(--border-radius);
margin-bottom: var(--space-base);

}

summary {

cursor: pointer;
font-weight: bold;

}

details {

padding-bottom: var(--space-half);

}

details summary {

margin-bottom: var(--space-half);

}

details>*:last-child {

margin-bottom: 0;

}

hr {

display: block;
position: relative;
width: 100%;
height: 1px;

margin: var(--space-base) auto;
background-size: contain;
background: var(--border-color);
border: 0 none;

}

mark {

padding: calc(0.5 * var(--space-quarter)) var(--space-quarter);
border-radius: var(--border-radius);
background: var(--background-color-accent);

/* repair edges of wrapped inline elements */
-webkit-box-decoration-break: clone;
        box-decoration-break: clone;

}

img {

display: inline-block;
max-width: 100%;
height: auto;
border-radius: var(--border-radius);

}

main img, main video {

max-width: 100%;
height: auto;
border-radius: var(--border-radius);

}

figure {

padding: 0;
margin: var(--space-base) 0;
background: var(--background-color-alt);
border-radius: var(--border-radius);

}

figure img {

display: block;
width: 100%;
height: auto;

}

figcaption {

opacity: var(--opacity-low);
margin: 0;
padding: var(--space-half);

font-family: var(--font-family-sans);
font-size: var(--font-size-smaller);
text-align: center;

background: var(--background-color-alt);
border-radius: var(--border-radius);
border-bottom: 1px solid var(--border-color);

}

audio {

width: 100%;
margin: var(--space-base) 0;

}

table {

margin: var(--space-base) 0;
border-collapse: collapse;
width: 100%;

}

td, th {

text-align: left;

}

th {

font-weight: bold;

}

table caption {

font-weight: bold;
margin-bottom: var(--space-half);

}