:root.light-mode {
    --foreground: #222222;
    --background: #eeeeee;
    --secondary: #808080;
    --tertiary: #dddddd;
    --accent: #3d3cba;
    --accent-highlight: #171746;
    --table-border: #d0d0d0;
    --table-row: #f7f7f7
}

:root.light-mode #dark-mode-on {
    display: inline
}

:root.light-mode #dark-mode-off {
    display: none
}

:root.dark-mode {
    --foreground: #eeeeee;
    --background: #161616;
    --secondary: #999999;
    --tertiary: #444444;
    --accent: #959bf0;
    --accent-highlight: #c2c5f6;
    --table-border: var(--tertiary);
    --table-row: #1e1e1e
}

:root.dark-mode #dark-mode-on {
    display: none
}

:root.dark-mode #dark-mode-off {
    display: inline
}

.dark-mode-buttons {
    position: absolute;
    top: 1em;
    right: 1em
}

.dark-mode-button {
    border: none;
    background-color: rgba(0, 0, 0, 0)
}

.dark-mode-button:hover {
    cursor: pointer
}

@media (prefers-color-scheme: light) {
    :root {
        --foreground: #222222;
        --background: #eeeeee;
        --secondary: #808080;
        --tertiary: #dddddd;
        --accent: #3d3cba;
        --accent-highlight: #171746;
        --table-border: #d0d0d0;
        --table-row: #f7f7f7
    }

    :root #dark-mode-on {
        display: inline
    }

    :root #dark-mode-off {
        display: none
    }
}

@media (prefers-color-scheme: dark) {
    :root {
        --foreground: #eeeeee;
        --background: #161616;
        --secondary: #999999;
        --tertiary: #444444;
        --accent: #959bf0;
        --accent-highlight: #c2c5f6;
        --table-border: var(--tertiary);
        --table-row: #1e1e1e
    }

    :root #dark-mode-on {
        display: none
    }

    :root #dark-mode-off {
        display: inline
    }
}

body {
    color: var(--foreground);
    background-color: var(--background)
}

.secondary {
    color: var(--secondary)
}

a,
a:link,
a:visited {
    color: var(--accent)
}

a:hover {
    color: var(--accent-highlight)
}

blockquote {
    border-left: 2px solid var(--secondary)
}

code {
    background-color: var(--tertiary)
}

pre code {
    background-color: rgba(0, 0, 0, 0)
}

.footnote-definition sup {
    color: var(--secondary)
}

.footnotes {
    border-top: 1px solid var(--table-border)
}

.footnotes-list li {
    color: var(--secondary)
}

.footnotes-list li p {
    color: var(--foreground)
}

hr {
    border: none;
    border-bottom: 1px solid var(--table-border)
}

table th,
table td {
    border-color: var(--table-border)
}

table thead,
table tr:nth-child(even) {
    background-color: var(--table-row)
}

html,
body {
    margin: 0;
    padding: 0
}

body {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 14pt;
    line-height: 1.3em;
    padding: 5em 25%
}

.header-links a {
    margin-right: .5em
}

.header-links a:last-of-type {
    margin-right: 0
}

.space {
    margin-bottom: 2em
}

.doublespace {
    margin-bottom: 4em
}

.small {
    font-size: 75%
}

h1,
h2,
h3,
h4,
h5,
h6 {
    line-height: 1.25
}

img {
    max-width: 100%
}

blockquote {
    margin-left: 0;
    padding-left: 1em
}

code {
    padding: .1em .2em;
    font-size: 12pt
}

pre {
    overflow: auto;
    padding: .3em
}

pre code {
    padding: 0
}

.footnote-definition {
    margin-top: 1em;
    font-size: 75%
}

.footnote-definition p {
    display: inline
}

.footnotes {
    margin-top: 4em
}

.footnotes-list {
    font-size: 75%
}

table {
    border-spacing: 0
}

table th,
table td {
    border-width: 1px;
    border-style: solid;
    border-left-style: none;
    padding: .2em
}

table th:first-child,
table td:first-child {
    border-left-width: 1px;
    border-left-style: solid
}

table th {
    border-top-width: 1px;
    border-top-style: solid
}

table td {
    border-top-style: none
}

@media all and (max-width: 1200px) {
    body {
        padding: 3em 15%
    }
}

@media all and (max-width: 800px) {
    body {
        padding: 1em 1em
    }
}

.styled-form {
    display: flex;
    flex-direction: column;
    gap: 1em;
    padding: 2em;
    border-radius: 0.75em;
    max-width: 400px;
    margin-top: 2em;
    box-shadow: 0 4px 10px rgba(250, 250, 250, 0.1);
}

.styled-form label {
    font-weight: bold;
    color: var(--foreground);
}

.styled-form input[type="email"] {
    padding: 0.75em;
    font-size: 1em;
    border: 1px solid var(--table-border);
    border-radius: 0.5em;
    background-color: var(--background);
    color: var(--foreground);
    transition: border 0.2s;
}

.styled-form input[type="email"]::placeholder {
    color: var(--secondary);
}

.styled-form input[type="email"]:focus {
    border-color: var(--accent);
    outline: none;
}

.styled-form button {
    padding: 0.75em;
    background-color: var(--accent);
    color: #fff;
    font-weight: bold;
    border: none;
    border-radius: 0.5em;
    cursor: pointer;
    transition: background-color 0.2s;
}

.styled-form button:hover {
    background-color: var(--accent-highlight);
}

.label-text {
    font-size: 1.25em;
    
}