html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

html {
    box-sizing: border-box;
}

*,
*::after,
*::before {
    box-sizing: border-box;
}

a, abbr, acronym, address, applet, article, aside, audio, 
b, big, blockquote, body, canvas, caption, center, cite, code, 
del, details, dfn, div, em, embed, fieldset, figcaption, 
figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html, 
i, iframe, img, ins, kbd, label, legend, li, mark, menu, nav, object, 
ol, output, p, pre, q, ruby, s, samp, section, small, span, strike, 
strong, sub, summary, sup, table, tbody, td, tfoot, th, thead, time, 
tr, tt, u, ul, var, video {
	margin: 0;
	padding: 0;
	vertical-align: baseline;
}

body {
    background: var(--background);
    color: var(--foreground);
    font-size: var(--fontSize);
    font-family: var(--fontFamily);
    line-height: 1.8rem;
    word-wrap: break-word;
}

// Text formatting
p { 
    margin: 1.2rem auto; 
}

a { 
    color: currentColor; 
}

kbd {
    padding: 0.2rem;
    border: var(--primaryBorder) var(--foreground);
}

mark {
    background: var(--accent-light);
    color: var(--background-dark);
}

pre { 
    --border: var(--primaryBorder) var(--accent);
    background: var(--background-light);
    border: var(--border);
    padding: 1rem;
    overflow: auto;

  code {
    background: unset;
    color: unset;
    font-size: inherit;
  }
}

code {
    background: var(--accent-dark);
    color: var(--accent);
    padding: 0.25rem; 
    font-size: 0.95rem; 
}

h1, h2, h3, 
h4, h5, h6 {
    margin-bottom: 1rem;
}

h1 { 
    font-size: 2.15rem;
    margin-top: 4rem;
}

h2 { 
    font-size: 1.6rem;
    margin-top: 3.5rem;
}

h3 { 
    font-size: 1.5rem;
    margin-top: 3rem;
}

h4, h5, h6 {
    margin-top: 2.5rem;
}

h4 { 
    font-size: 1.4rem;
}

h5 {
    font-size: 1.25rem; 
}

h6 { 
    font-size: 1.1rem;
}

blockquote {
    --border: var(--primaryBorder) var(--accent);
    margin: 2rem 0;
    border: var(--border);
    padding: 1rem;
}

ol, ul {
    margin: 2.2rem;
    padding: 0;
}

ul {
    list-style: none;

    & > li {
        margin-bottom: 1rem;

        &::before {
            content: "\25BA";
            color: var(--accent);
            position: absolute;
            margin-left: -1.5em;
        }
    }

    & ul, & ol {
        margin: 1rem;
        margin-left: 1.2rem;
    }
}

ol {
    li {
        margin-bottom: 1rem;
    }

    & ul, & ol {
        margin: 1rem;
        margin: 1.2rem;
    }
}

// Table
table { 
    border-collapse: collapse;
    margin: 2rem 0;
    overflow: auto;
    table-layout: fixed;
    width: 100%;
}

table, td, th {
	border: var(--secondaryBorder) var(--accent);
	padding: 1.2rem;
}

// Document structure
nav {
    & > * { margin: 1rem; }
}

main {
    & > * {
        margin-bottom: 1rem;
        &:first-child { margin-top: 0; }
        &:last-child { margin-bottom: 0; }
    }

    & h1 {
        padding-bottom: 0.25rem;
        border-bottom: var(--primaryBorder) var(--accent);
    }

    & h1:first-child {
        margin-top: 0;
    }

    & h2 {
        padding-bottom: 0.25rem;
        border-bottom: var(--primaryBorder) var(--foreground);
    }
}


// Multimedia
iframe {
    width: 100%;
    height: auto;
}

img {
    width: 100%;
    height: auto;
}

video {
    width: 100%;
    height: auto;
}

audio {
    width: 100%;
    height: auto;
}

svg {
    fill: currentColor;
}

// Form control
button {
    background: var(--background);
    border: var(--primaryBorder) currentColor;
    color: var(--accent);
    font-family: var(--fontFamily);
    font-size: 1.1rem;
    padding: 0.75rem;

    &:hover {
        background: var(--foreground);
        color: var(--background);
        cursor: pointer;
    }
}

input {
    font-size: var(--fontSize);
    width: 100%;
    padding: 0.5rem;

    &:focus {
        outline-width: 0.5rem;
        outline-color: var(--accent);
    }
}