/* body {
    font-family: var(--font-body);
    color: #666666;
    font-size: 1.1rem;
    line-height: 1.5;
    background-color: #ffffff;
}
.accent {
    color: var(--color-accent)!important;
}
.bg-accent, .btn-accent {
    background-color: var(--color-accent)!important;
}
.btn-accent:hover {
    background-color: var(--color-accent-hover)!important;
}
.no-link {
    cursor: inherit;
    font-family: var(--font-body);
    text-decoration: none;
}
.no-hover {
    cursor: inherit;
    font-family: inherit;
    text-decoration: inherit;
}
.no-link, .no-hover:hover {
    background-color: inherit;
    color: inherit;
    text-decoration: inherit;
}
.overlay {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
a, button {
    font-family: var(--font-link);
}
body ::selection {
    background-color: var(--color-accent);
    color: #222222;
}
body ::-moz-selection {
    background-color: var(--color-accent);
    color: #222222;
}

#cookies {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 3;
    background-color: #efefef;
}

header, #header {
    font-family: var(--font-heading-compressed, var(--font-heading));
}


nav, .nav {
    font-family: var(--font-heading);
}
nav li, .nav li {
    color: #888888;
    font-weight: 500;
}
nav li:hover, .nav li:hover {
    color: #666666;
}
nav li.parent, .nav li.parent {
    color: #777777;
    text-transform: uppercase;
}
nav li.parent:hover, .nav li.parent:hover {
    color: #333333;
}
nav li li, .nav li li {
    color: #999999;
    font-weight: 400;
    text-transform: none;
}
nav li.weblink:hover, .nav li.weblink:hover {
    color: #222222;
}

nav li.active, .nav li.active {
    color: #222222;
    font-weight: 700;
}
nav li li.active, .nav li li.active {
    font-weight: 400;
}


h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading-compressed, var(--font-heading));
    color: #222222;
}
h2, .h2 {
	font-size: 2.5rem;
    font-weight: 900;
}
h3, .h3 {
	font-size: 2rem;
    font-weight: 700;
}
h4, .h4 {
	font-size: 1.75rem;
	font-weight: 400;
}
h5, .h5 {
	font-size: 1.5rem;
	font-weight: 300;
}
h6, .h6 {
	font-size: 1.25rem;
	font-weight: 300;
}
.subtitle {
    font-family: var(--font-link);
	color: #666666;
	font-size: 1rem;
	font-weight: 400;
	font-style: italic;
}
.date {
    font-family: var(--font-link);
    color: #999999;
    font-size: 0.8rem;
    font-weight: 900;
}
b {
    font-family: var(--font-heading);
    color: #666666;
    letter-spacing: 0.05em;
}
.separator-100 {
	height: 1px;
	background-color: #222222;
	width: 100%;
}
hr {
    font-family: var(--font-heading-compressed, var(--font-heading));
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 0;
    border-top: 1px solid #dddddd;
}
hr.accent {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

.caption {
    font-family: var(--font-heading);
    color: #999999;
    font-size: 0.875rem;
    font-weight: 400;
}

.table-container {
    overflow-y: scroll;
}
table {
    border-collapse: collapse;
}
table thead {
    font-weight: 700;
    text-transform: uppercase;
}
table tr:nth-child(even) {
    background-color: #eeeeee;
}
table td {
    padding: 6px 12px;
    min-width: 4rem;
}

blockquote {
    font-family: var(--font-serif);
	color: #222222;
	font-size: 1.2em;
	letter-spacing: 0.05em;
    margin-bottom: 30px;
}
blockquote span {
	font-weight: 700;
}
blockquote span::before {
	content: "\a—";
	white-space: pre;
}
blockquote.emphasize hr {
    margin-top: .25rem!important;
    margin-bottom: .25rem!important;
}
blockquote.emphasize span {
    font-weight: initial;
    font-style: italic;
}
blockquote.emphasize span::before {
    content: "";
}

.article h1, .article h2, .article h3, .article h4, .article h5, .article h6, .article .h1, .article .h2, .article .h3, .article .h4, .article .h5, .article .h6 {
    text-transform: uppercase;
}
.article .title {
    font-size: 12vh;
    word-wrap: break-word;
    hyphens: auto;
}

form label {
    font-family: var(--font-heading-compressed, var(--font-heading));
}
form .form-check label, form .error {
    font-family: var(--font-body);
}

#legal {
    font-family: var(--font-link);
}







.dark body {
    color: #999999;
    background-color: #000000;
}
.dark ::selection {
    background-color: var(--color-accent);
    color: #dddddd;
}
.dark ::-moz-selection {
    background-color: var(--color-accent);
    color: #dddddd;
}

.dark #cookies {
    background-color: #111111;
}


.dark nav li, .dark .nav li {
    color: #777777;
}
.dark nav li:hover, .dark .nav li:hover {
    color: #999999;
}
.dark nav li.parent, .dark .nav li.parent {
    color: #888888;
}
.dark nav li.parent:hover, .dark .nav li.parent:hover {
    color: #cccccc;
}
.dark nav li li, .dark .nav li li {
    color: #666666;
}
.dark nav li.weblink:hover, .dark .nav li.weblink:hover {
    color: #dddddd;
}

.dark nav li.active, .dark .nav li.active {
    color: #dddddd;
}


.dark h1, .dark h2, .dark h3, .dark h4, .dark h5, .dark h6, .dark .h1, .dark .h2, .dark .h3, .dark .h4, .dark .h5, .dark .h6 {
    color: #dddddd;
}
.dark .subtitle {
	color: #888888;
}
.dark .date {
    color: #666666;
}
.dark b {
    color: #cccccc;
}
.dark .separator-100 {
	background-color: #cccccc;
}
.dark hr {
	background-color: #999999;
}
.dark hr.accent {
	background-color: var(--color-accent);
}

.dark .caption {
    color: #666666;
}

.dark table tr:nth-child(even) {
    background-color: #222222;
}

.dark blockquote {
	color: #dddddd;
} */

:root {
    --hex000000: #000000;
    --hex111111: #111111;
    --hex222222: #222222;
    --hex333333: #333333;
    --hex444444: #444444;
    --hex555555: #555555;
    --hex666666: #666666;
    --hex777777: #777777;
    --hex888888: #888888;
    --hex999999: #999999;
    --hexaaaaaa: #aaaaaa;
    --hexbbbbbb: #bbbbbb;
    --hexcccccc: #cccccc;
    --hexdddddd: #dddddd;
    --hexeeeeee: #eeeeee;
    --hexffffff: #ffffff;
}

* {
	transition-duration: .3s;
	animation-duration: .3s;
	transition-property: top, right, bottom, left, transform, box-shadow;
	transition-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1) !important;
	animation-timing-function: cubic-bezier(0.4, 0.0, 0.2, 1) !important;/* animation details by material.io */
}

.success {
    color: #4caf50 !important;
}
.error {
	color: #f44336 !important;
}

body {
    font-family: var(--font-body);
    color: var(--hex666666);
    font-size: 1.1rem;
    line-height: 1.5;
    background-color: var(--hexffffff);
}
button, .btn {
	background-color: var(--hex666666);
	color: var(--hexeeeeee) !important;
	font-size: 1.1rem;
}
button:hover, .btn:hover {
	background-color: var(--hex777777);
}
.accent {
    color: var(--color-accent) !important;
}
.bg-accent, .btn-accent {
    background-color: var(--color-accent) !important;
}
.btn-accent:hover {
    background-color: var(--color-accent-hover) !important;
}
.btn.btn-outline {
    color: var(--hex111111) !important;
    border-width: .2rem;
    border-color: var(--hex666666);
    background-color: transparent !important;
} /* adjoining class (.btn) is needed for importance level of styling (would interfere with regular .btn definition) */
.btn-outline:hover {
    color: var(--hexeeeeee) !important;
    background-color: var(--hex666666) !important;
}
.no-link {
    cursor: inherit;
    font-family: var(--font-body);
    text-decoration: none;
}
.no-hover {
    cursor: inherit;
    font-family: inherit;
    text-decoration: inherit;
}
.no-link:hover, .no-hover:hover {
    background-color: inherit;
    color: inherit;
    text-decoration: inherit;
}
.overlay {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}
a, button {
    font-family: var(--font-link);
}
body ::selection {
    background-color: var(--color-accent);
    color: var(--hex222222);
}
body ::-moz-selection {
    background-color: var(--color-accent);
    color: var(--hex222222);
}
:focus {
	box-shadow: 0 0 0 .2rem var(--color-accent-transparent) !important;
}

#cookies {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 3;
    background-color: var(--hexeeeeee);
}

header, #header {
    font-family: var(--font-heading-compressed, var(--font-heading));
}


nav, .nav {
    font-family: var(--font-heading);
}
nav li, .nav li {
    color: var(--hex888888);
    font-weight: 500;
}
nav li:hover, .nav li:hover {
    color: var(--hex666666);
}
nav li.parent, .nav li.parent {
    color: var(--hex777777);
    text-transform: uppercase;
}
nav li.parent:hover, .nav li.parent:hover {
    color: var(--hex333333);
}
nav li li, .nav li li {
    color: var(--hex999999);
    font-weight: 400;
    text-transform: none;
}
nav li.weblink:hover, .nav li.weblink:hover {
    color: var(--hex222222);
}

nav li.active, .nav li.active {
    color: var(--hex222222);
    font-weight: 700;
}
nav li li.active, .nav li li.active {
    font-weight: 400;
}


h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--font-heading-compressed, var(--font-heading));
    color: var(--hex333333);
}
h2, .h2 {
	font-size: 2.5rem;
    font-weight: 900;
}
h3, .h3 {
	font-size: 2rem;
    font-weight: 700;
}
h4, .h4 {
	font-size: 1.75rem;
	font-weight: 400;
}
h5, .h5 {
	font-size: 1.5rem;
	font-weight: 300;
}
h6, .h6 {
	font-size: 1.25rem;
	font-weight: 300;
}
.subtitle {
    font-family: var(--font-link);
	color: var(--hex666666);
	font-size: 1rem;
	font-weight: 400;
	font-style: italic;
}
.date {
    font-family: var(--font-link);
    color: var(--hex999999);
    font-size: 0.8rem;
    font-weight: 900;
}
b {
    font-family: var(--font-heading);
    color: var(--hex333333);
    letter-spacing: 0.05em;
    font-weight: 700;
}
.separator {
	height: 1px;
	background-color: var(--hex666666);
	width: 100%;
    margin: 1rem auto;
    border: 0;
}
hr {
    width: 3.5rem;
	height: 0.367rem;
	background-color: var(--hex666666);
	margin: 0.5rem 0 1.5rem;
	border: 0;
}
hr.accent {
    background-color: var(--color-accent);
}

.caption {
    font-family: var(--font-heading);
    color: var(--hex999999);
    font-size: 0.875rem;
    font-weight: 400;
}

.table-container {
    overflow-y: scroll;
}
table {
    border-collapse: collapse;
}
table thead {
    font-weight: 700;
    text-transform: uppercase;
}
table tr:nth-child(even) {
    background-color: var(--hexeeeeee);
}
table td {
    padding: 6px 12px;
    min-width: 4rem;
}

blockquote {
    font-family: var(--font-serif);
	color: var(--hex222222);
	font-size: 1.2em;
	letter-spacing: 0.05em;
    margin-bottom: 30px;
}
blockquote span {
	font-weight: 700;
}
blockquote span::before {
	content: "\a—";
	white-space: pre;
}
blockquote.emphasize hr {
    margin-top: .25rem!important;
    margin-bottom: .25rem!important;
}
blockquote.emphasize span {
    font-weight: initial;
    font-style: italic;
}
blockquote.emphasize span::before {
    content: "";
}

.article h1, .article h2, .article h3, .article h4, .article h5, .article h6, .article .h1, .article .h2, .article .h3, .article .h4, .article .h5, .article .h6 {
    text-transform: uppercase;
}
.article .title {
    font-size: 12vh;
    word-wrap: break-word;
    hyphens: auto;
}

form {
    line-height: 1.5;
}
form .form-group {
    line-height: 1;
}
form label {
    font-family: var(--font-heading);
	color: var(--hex555555) !important;
	font-size: .75rem;
	font-weight: 700;
    text-transform: uppercase;
	letter-spacing: 0.05rem;
	margin: 0;
}
form .form-check label, form .error {
    font-family: var(--font-body);
}
form input, form textarea {
	color: var(--hex666666) !important;
	background-color: var(--hexffffff) !important;
    outline: 0;
    
    display: block;
    width: 100%;
    height: auto;
    padding: .375rem .75rem;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    background-clip: padding-box;
    border: 2px solid var(--hexcccccc);
    /* border-radius: .25rem; */
    /* copied from bootstrap */
}
form input::placeholder, form textarea::placeholder {
 color: var(--hexaaaaaa) !important;
}
form input:focus, form textarea:focus {
	border-color: var(--color-accent) !important;
	color: var(--hex666666) !important;
	background-color: var(--hexffffff) !important;
}
form .terms {
	color: var(--hex999999) !important;
	font-size: .9rem;
	font-weight: 400;
	letter-spacing: 0rem;
    text-transform: none;
}
form button[type=reset] {
	color: var(--hex666666) !important;
}
form button[type=reset]:hover {
	color: var(--color-accent) !important;
}
form .error {
    font-size: 1rem;
}

#legal {
    font-family: var(--font-link);
}