:root {
	/*Border colors*/
	--coffee-bean: #5a3c2a;
	--night-brown: #422919;
	/*Accent*/
	--camel: #a68a64;
	/*Text color*/
	--almond-cream: #ede0d4;
	--desert-dust: #e6ad79;
	--desert-dust2: #eed6bf;
	--colorado-peach: #e4954c;
	--test: #c4ae95;

	--desert-dust3: #c49550;
	--light-beige: #e4b78e;
	--beige: #dfaa6d;

	/*Background colors*/
	--dusty-olive: #555c3f;
	--ebony: #414833;

	/*Link colors are blue ish for consistency.*/
	--soft-blue: #b9bfeb;
	--chetwode: #7e89da;
	--early-spring-night: #2a38a1;
	--amparo-blue: #3c4691;
	--crushed-velvet: #343b75;

	/*Used as a background color by big body elements.*/
	--thamar-black: #1f1d1c;
	--carbon-fiber: #2e2d2d;

	--light-caret: url("../img/svg/lightcaret.svg");
	--dark-caret: url("../img/svg/darkcaret.svg");

	---side-padding-computer: 10%;
	---side-padding-mobile: 5%;
	---side-padding: var(---side-padding-mobile);

	---const-bright: var(--almond-cream);
	---const-dark: var(--thamar-black);

	---transition-duration: 0.2s;
	---card-in-duration: 1s;
	---delay: 0.2s;
}
@media (prefers-reduced-motion: reduce) {
	:root {
		---card-in-duration: 0s;
		---transition-duration: 0s;
		---delay: 0s;
	}
}

@media (min-width: 900px) {
	:root {
		---side-padding: var(---side-padding-computer);
	}
}
[data-bs-theme="dark"] body {
	color-scheme: dark;
	/*These are all the styles that can be changed later depending.*/
	---title-main: var(--desert-dust);
	---footer-main: var(--thamar-black);
	---minititle-main: var(--colorado-peach);
	---footersub-main: var(--night-brown);
	---bg-main: var(--thamar-black);
	---card-bg-main: var(--carbon-fiber);
	---text-main: var(--almond-cream);
	---accordion-main: var(--carbon-fiber);
	---accordion-focus-main: var(--coffee-bean);
	---border-main: var(--coffee-bean);

	---link-main: var(--soft-blue);
	---link-hover: var(--chetwode);
	---link-click: var(--amparo-blue);

	---link-alt-hover: var(--crushed-velvet);
	---link-alt-click: var(--early-spring-night);

	---active-nav: var(--almond-cream);

	---focus-main: white;

	----caret: var(--light-caret);
}
[data-bs-theme="light"] body {
	color-scheme: light;

	---bg-main: var(--almond-cream);
	---footer-main: var(--desert-dust);
	---title-main: var(--thamar-black);
	---minititle-main: var(--night-brown);
	---footersub-main: var(--colorado-peach);
	---text-main: var(--thamar-black);
	---card-bg-main: var(--desert-dust2);
	---accordion-main: var(--light-beige);
	---accordion-focus-main: var(--beige);
	---border-main: var(--night-brown);

	---link-main: var(--amparo-blue);
	---link-hover: var(--crushed-velvet);
	---link-click: var(--early-spring-night);

	---link-alt-hover: var(--soft-blue);
	---link-alt-click: var(--chetwode);

	---active-nav: var(--dusty-olive);

	---border-main: var(--desert-dust);

	---focus-main: black;

	----caret: var(--dark-caret);
}

html {
	* {
		font-family: var(--bs-font-sans-serif) !important;
	}
	h1,
	h2,
	h2 > *,
	h3,
	h4,
	h5,
	.navbar a {
		font-family: "Young Serif", serif !important;
	}
}
/* 
label[for="font"]
{
   font-family: var(--bs-font-sans-serif) !important;
} */
h6 {
	font-weight: bold;
}
/*Root Styles*/
body {
	font-weight: 400;
	font-style: normal;
	background: var(---bg-main) !important;
	transition: all var(---transition-duration);
}

main {
	padding-bottom: 20px;
	min-height: 70vh;
}

h1,
h2,
h4 {
	color: var(---title-main) !important;
}

#foot :is(h1, h2, h4) {
	color: var(---footer-main) !important;
}

h2 {
	padding-top: 10px;
}
h1 {
	display: table;
	position: relative;
	padding-right: 20px;
}
.line-extend {
	display: table;
	position: relative;
	padding-right: 20px;
}
h1,
.line-extend {
	background-color: var(---bg-main) !important;
}
h1::after,
.line-extend::after {
	width: calc(85vw);
	position: absolute;
	border: 3px solid var(---title-main);
	content: "";
	top: calc(50% - 4px);
	left: 0;
	z-index: -2;
}
h3,
h5,
h6 {
	color: var(---minititle-main) !important;
}

#foot :is(h3, h5, h6) {
	color: var(---footersub-main) !important;
}

blockquote {
	font-style: italic;
}

p,
figcaption,
li,
dt,
dd,
th,
td,
blockquote,
th > a,
th > a:hover,
th > a:active,
th > a:focus-visible button {
	color: var(---text-main) !important;
}

button {
	background-color: var(---border-main);
}

a {
	cursor: pointer;
	text-decoration: none;
}
a:not(.alt) {
	color: var(---link-main) !important;
}
a:not(.alt):hover {
	color: var(---link-hover) !important;
	text-decoration: underline !important;
}
a:not(.alt):active {
	color: var(---link-click) !important;
}
a.active,
a.active:hover,
a.active:active,
a.active:focus-visible {
	color: var(---active-nav) !important;
}
h1 {
	text-wrap-mode: wrap;
	text-transform: uppercase;
}
h1 {
	font-size: 40px !important;
	margin-top: 25px !important;
}
h2 {
	font-size: 30px !important;
}
h3,
h4,
.size-h3,
.size-h4 {
	font-size: 24px !important;
}
hr,
.row.hr {
	border-top: 0 !important;
	border-bottom: 3px solid !important;
	color: rgb(from var(---minititle-main) r g b / 50%) !important;
	opacity: 1 !important;
}
hr {
	margin: 0;
	padding: 0;
}
ul,
ol,
dl {
	margin-bottom: 0 !important;
	padding: 0 !important;
}
ul > ul {
	margin-left: 4ch;
	> li {
		list-style-type: circle;
	}
}
li,
th,
td,
p,
blockquote,
dl,
dt,
dd,
h6,
input,
a {
	font-size: 16px !important;
	list-style-position: inside;
}
p.footer-disclaimer {
	font-size: 16px !important;
}

main {
	padding-left: var(---side-padding);
	padding-right: var(---side-padding);
}
footer {
	background-color: var(---text-main) !important;
	color: var(---bg-main) !important;
	padding-top: 30px;
	padding-bottom: 10px;
}
footer li,
footer p,
footer a:not(:hover) {
	color: var(---bg-main) !important;
}
footer a {
	margin-right: 10px;
	padding-left: 5px;
	padding-right: 5px;
}
a.alt:hover {
	color: var(---link-alt-hover);
	outline: 1px solid var(---link-alt-hover);
}
a.alt:active {
	color: var(---link-alt-click);
	outline: 1px solid var(---link-alt-click);
}
footer p {
	margin: 0 !important;
}
footer ul {
	padding-bottom: 70px !important;
}
footer ul > li:not(:first-child) {
	padding-left: 0px;
}
footer ul > li:not(:last-child) {
	padding-right: 20px;
}
tbody {
	outline: 0px solid var(---minititle-main) !important;
	border: 0 !important;
}
th {
	max-width: 320px;
	width: 320px;
}
th,
td {
	border: 1px solid var(---minititle-main) !important;
}
th > a {
	user-select: none;
}
thead > th > a {
	display: inline;
}
/*Classes*/
.dropdown-item,
.dropdown-menu {
	background-color: var(---bg-main) !important;
}
.dropdown-item:hover {
	background-color: var(---card-bg-main) !important;
}
ul.horizontal {
	display: flex;
	flex-direction: row;
}
ul.horizontal > li {
	list-style: none;
}
a.hide-styles {
	text-decoration: none !important;
}

a.focus-child {
	outline: 1px solid transparent;
}
a.focus-child:focus-visible {
	outline: 1px solid transparent;
}
a.focus-child:focus-visible > * {
	outline: 1px solid var(---focus-main);
}
a.focus-child.white:focus-visible > * {
	outline: 1px solid var(---const-bright);
}
a.focus-child.dark:focus-visible > * {
	outline: 1px solid var(---const-dark);
}
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	border: 0;
}

figure.shadow-right {
	box-shadow: 38px 38px 15px 0px rgb(from var(---text-main) r g b / 0.1);
	-webkit-box-shadow: 38px 38px 15px 0px rgb(from var(---text-main) r g b / 0.1);
	-moz-box-shadow: 38px 38px 15px 0px rgb(from var(---text-main) r g b / 0.1);
}
figure.shadow-left {
	box-shadow: -38px 38px 15px 0px rgb(from var(---text-main) r g b / 0.1);
	-webkit-box-shadow: -38px 38px 15px 0px
		rgb(from var(---text-main) r g b / 0.1);
	-moz-box-shadow: -38px 38px 15px 0px rgb(from var(---text-main) r g b / 0.1);
}
figure {
	border-radius: 30px;
	border: 2px solid var(---text-main) !important;
	text-align: center;
	background-color: var(---card-bg-main);
	overflow: hidden;
	img {
		width: 100%;
		/* max-height: 450px; */
		object-fit: cover;
	}
	> figcaption {
		font-style: italic;
		border-top: 6px solid var(---text-main);
		text-align: left;
		padding: 20px !important;
		a.btn {
			font-style: normal;
		}
	}
}
.row {
	margin-top: 20px !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.row > div:first-child {
	padding-left: 0;
}
.row > div:last-child {
	padding-right: 0;
}

div.table-container {
	border: 2px solid var(---text-main);
	margin-bottom: 40px !important;
	> table {
		width: 100%;
	}
}
.card-img-top {
	border-bottom: 1px solid var(---text-main);
	object-fit: cover;
	transition: border-bottom 0.2s ease-in-out;
}
.card-img-top:not(.full-size) {
	max-height: 150px;
	min-height: 150px;
}
.card {
	margin-bottom: 20px;
	border: 1px solid var(---text-main) !important;
	background-color: var(---card-bg-main) !important;
	outline: 0px solid var(---text-main) !important;
	transition: outline 0.2s ease-in-out;
}
.card.glow:hover {
	outline: 5px solid var(---text-main) !important;
}
.card.glow:hover > .card-img-top {
	border-bottom: 3px solid var(---text-main) !important;
}
.card-body h2 {
	text-decoration-thickness: 2px;
}
.carousel > button,
.carousel-caption {
	color: var(---const-bright) !important;
}
.carousel {
	border: 2px solid var(---text-main) !important;
	margin: auto !important;
	margin-bottom: 20px !important;
	background: var(---text-main) !important;
}
.carousel > button {
	box-sizing: border-box;
	background-color: var(---const-dark);
}
.carousel-control-prev,
.carousel-control-next {
	top: unset !important;
	height: 100%;
	background: rgba(0, 0, 0, 0.8) !important;
	border-radius: 0 !important;
	font-size: 32px !important;
	opacity: 0.8;
	width: min(40px, 10%) !important;
	> * {
		width: 50px;
		height: 50px;
		background: radial-gradient(
			circle,
			rgba(0, 0, 0, 1) 0%,
			rgba(0, 0, 0, 0.8) 50%,
			rgba(0, 0, 0, 0) 75%
		) !important;
		background-clip: border-box !important;
	}
}
.carousel span {
	filter: none !important;
}
.carousel-indicators {
	margin: 0 !important;
	background: rgb(from var(---const-dark) r g b / 90%);
}

@keyframes carousel-focus {
	from {
		opacity: 0.8;
	}
	to {
		opacity: 1;
	}
}
.carousel-item.active > a:focus-visible {
	background: black !important;
	animation-name: carousel-focus;
	animation-duration: var(---card-in-duration);
	animation-direction: alternate;
	animation-iteration-count: infinite;
}
.carousel-caption {
	left: 0;
	right: 0;
	bottom: 0 !important;
	* {
		text-rendering: optimizeLegibility;

		text-shadow:
			1px 1px 1px rgba(0, 0, 0, 1),
			-1px 1px 1px rgba(0, 0, 0, 1),
			-1px -1px 1px rgba(0, 0, 0, 1),
			1px -1px 1px rgba(0, 0, 0, 1),
			0px 0px 3px rgba(0, 0, 0, 1),
			0px 0px 7px rgba(0, 0, 0, 1) !important;
	}
}
.carousel-indicators button {
	background-color: var(---const-bright) !important;
}
.carousel .carousel-caption {
	width: 100%;
	background-color: rgb(from var(---const-dark) r g b / 80%) !important;
	left: 0;
}
.carousel-caption > * {
	color: var(---const-bright) !important;
}

.accordion-header {
	padding-top: 0 !important;
}
.accordion-item {
	border-color: 1px solid var(---border-main) !important;
	border-radius: 1rem !important;
	> p {
		color: var(---text-main) !important;
	}
}

ul.name-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
ul.name-list > li {
	width: 25%;
}

ul.county-list {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
}
ul.county-list > li {
	width: 50%;
}

.map-canvas {
	pointer-events: none;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
}
.accordion-button {
	background-color: var(---accordion-main) !important;
	border-color: 1px solid var(---border-main) !important;
	color: var(---text-main) !important;
	font-size: 20px !important;
}
.accordion-button[aria-expanded="true"] {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}
.accordion-button:focus {
	box-shadow: initial !important;
	background-color: var(---accordion-focus-main) !important;
}
.accordion-button::after {
	background-image: var(----caret) !important;
}
a.btn,
button,
input[type="submit"] {
	background-color: var(---text-main) !important;
	color: var(---card-bg-main) !important;
	outline: 0px solid var(---text-main) !important;
	transition: all 0.2s ease-in-out !important;
	align-self: flex-end;
}
a.btn:hover,
a.btn:focus,
a.btn:active,
input[type="submit"]:hover,
input[type="submit"]:focus {
	color: var(---card-bg-main) !important;
}
button:not(
	#themeswitchbutton,
	.carousel-indicators > button,
	.carousel-control-next,
	.carousel-control-prev
) {
	border: 2px solid var(---text-main);
	border-radius: 15px !important;
	text-decoration: none !important;
}
button:not([data-bs-target]):focus {
	border: 2px solid var(---minititle-main);
}
.carousel button[data-bs-target]:focus {
	opacity: 0.8;
}
.btn.full {
	width: 100%;
}
.card.glow .btn:hover {
	outline: 2px solid var(---text-main) !important;
	background-color: var(---title-main) !important;
	color: var(---card-bg-main) !important;
}
input[type="submit"] {
	padding: 5px 10px;
	background-color: var(---title-main) !important;
	border: 2px solid var(---text-main);
	border-radius: 5px !important;
	text-decoration: none !important;
}
input[type="submit"]:disabled,
input[type="submit"][disabled] {
	background-color: rgb(from var(---title-main) g g g) !important;
	color: rgb(from var(---card-bg-main) r r r / 80%) !important;
	border-color: rgb(from var(---title-main) g g g) !important;
}
input[type="submit"]:active {
	outline: 4px solid var(---text-main) !important;
}
.btn:active,
.btn:focus-visible,
input[type="submit"]:active,
input[type="submit"]:focus {
	outline: 4px solid var(---text-main) !important;
	background-color: var(---minititle-main) !important;
	color: var(---card-bg-main) !important;
}
input[type="submit"]:disabled:active,
input[type="submit"][disabled]:active {
	background-color: rgb(from var(---title-main) g g g) !important;
	color: rgb(from var(---card-bg-main) r r r / 80%) !important;
	outline: none !important;
	border: 2px solid;
}
tr.alt {
	background-color: rgb(from var(---minititle-main) r g b / 10%) !important;
}
.table-focus {
	background-color: rgb(from var(---minititle-main) r g b / 20%) !important;
}

/*Because our calendar is an IFrame, we can't use margin-auto (I don't have any clue why).*/
iframe.calendar {
	--width: 600px;
	width: var(--width);
	height: 600px;
	padding-left: 80px;
	/* margin-left: calc(50% - var(--width) / 2); */
	border: 0;
}
.accordion-body > :last-child {
	margin-bottom: 0 !important;
}

@keyframes fade-in {
	from {
		opacity: 0;
		transform: translateY(20px);
	}
	to {
		opacity: 1;
		transform: translateY(0px);
	}
}
.fade-2 {
	opacity: 0;
	animation: fade-in var(---card-in-duration) ease-in-out
		calc(var(---delay) * 1);
	animation-fill-mode: forwards;
}
.fade-4 {
	opacity: 0;
	animation: fade-in var(---card-in-duration) ease-in-out
		calc(var(---delay) * 2);
	animation-fill-mode: forwards;
}
.fade-6 {
	opacity: 0;
	animation: fade-in var(---card-in-duration) ease-in-out
		calc(var(---delay) * 3);
	animation-fill-mode: forwards;
}
.fade-8 {
	opacity: 0;
	animation: fade-in var(---card-in-duration) ease-in-out
		calc(var(---delay) * 4);
	animation-fill-mode: forwards;
}
.fade-10 {
	opacity: 0;
	animation: fade-in var(---card-in-duration) ease-in-out
		calc(var(---delay) * 5);
	animation-fill-mode: forwards;
}
.sticky {
	position: sticky;
}

.top-20 {
	top: 60px !important;
}
iframe.timeline {
	margin: 20px 0;
	width: 100%;
	height: 650px;
}
/*Unique IDs*/
nav#topbar {
	background-image: url(../img/topbar.jpg);
	background-size: 160%;
	background-position: -150px 200px;
}
nav#topbar > div {
	width: 100%;
	height: 120px;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.9) 30%,
		rgba(0, 0, 0, 0.5) 70%
	);
	background-size: 160%;
	background-repeat: no-repeat;
	background-position: -50px 0;
	transition: background-position var(---transition-duration);
}
.nav-toggle {
	display: block;
	border-radius: 0;
	padding-bottom: 2px;
	margin-bottom: 2px;
}
.nav-toggle:not(.active) {
	border-bottom: 1px solid var(---text-main) !important;
}
.nav-toggle.active ~ .nav-item {
	display: none;
}

nav#topbar > div:hover {
	background-position: -250px 0;
}
nav#topbar div.container {
	margin-left: var(---side-padding) !important;
}
nav#topbar > div > div {
	padding-top: 25px;
}
nav.navbar > ul > li button.dropdown-toggle {
	color: var(---minititle-main) !important;
	background-color: transparent !important;
	margin-left: 3px !important;
	border: 2px solid transparent !important;
}
nav.navbar > ul > li button.dropdown-toggle:focus-visible {
	border: 2px solid var(---text-main) !important;
}

nav.navbar {
	justify-content: center !important;
	padding: 10px 0;
	border-bottom: 2px solid var(---title-main);
	border-top: 2px solid var(---title-main);

	margin: 0;
	padding: 5px 0;
}
nav.navbar > ul {
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	list-style: none;
}

nav.navbar > ul > li {
	border: 2px solid transparent;
	width: 100%;
	text-align: center;
	border-radius: 5px;
	transition:
		background-color var(---transition-duration),
		border-color var(---transition-duration);
}
nav.navbar > ul > li * {
	align-content: center;
}
nav.navbar > ul > li > a,
nav.navbar > ul > li > .btn-group > a {
	text-decoration: underline !important;
}
nav.navbar > ul > li > a,
nav.navbar > ul > li > .btn-group > a,
nav.navbar > ul > li > .btn-group > button.dropdown-toggle {
	display: inline-block;
	/* padding-left: calc(32px + 2%);
  padding-right: calc(32px + 2%); */
	padding-top: 4px;
	padding-bottom: 4px;
}
nav.navbar > ul > li > a,
nav.navbar > ul > li > .btn-group > a,
nav.navbar > ul > li > .btn-group .dropdown-item,
nav.navbar > ul > li button {
	font-size: 32px !important;
}
nav.navbar > ul > li a:not(.active) {
	color: var(---minititle-main) !important;
}
nav.navbar > ul > li.nav-item:hover {
	border-color: var(---title-main) !important;
}
div#themeswitcher {
	z-index: 9999;
	position: fixed;
	bottom: 20px !important;
	right: 20px !important;
}
div#themeswitcher > button {
	z-index: 9999;
	width: 50px;
	height: 50px;
	background-color: var(---text-main);
	border: 1px solid var(---bg-main);
	color: var(---bg-main) !important;
	border-radius: 0.5rem;
}
div#themeswitcher > button:focus-visible,
div#themeswitcher > button:active {
	background-color: var(---minititle-main) !important;
}
div#themeswitcher > button > i {
	font-size: 24px;
}
div#contentskip {
	position: absolute;
	top: 1%;
	left: 1%;
}
#backtotop {
	font-size: 30px !important;
	border: 2px solid var(---bg-main) !important;
	margin-bottom: 10px;
}
#backtotop:hover {
	border: 2px solid var(---card-bg-main) !important;
}
nav.navbar > ul > li .dropdown-menu {
	width: 290px;
	height: fit-content;
	* {
		white-space: normal !important;
	}
}

table .sticky-table-col {
	position: sticky;
	left: 0;
	background-color: var(---border-main) !important;
}
table th.sticky-table-col {
	font-weight: bold;
}

#subnav {
	margin-bottom: 10px;
}

@media (min-width: 1400px) {
	h1 {
		text-wrap-mode: nowrap;
	}
	h1:hover {
		padding-right: 40px;
	}
}
/*For Large screens*/
@media (min-width: 900px) {
	.nav-toggle {
		display: none;
	}
	.nav-toggle.active ~ .nav-item {
		display: unset;
	}
	.navbar > div {
		background-size: 120%;
	}
	h1 {
		transition:
			padding-right 0.4s ease-in-out,
			background-color var(---transition-duration);
		font-size: 50px !important;
	}

	h1::after,
	.line-extend::after {
		width: calc(80vw - 12px);
		position: absolute;

		content: "";
		top: calc(50% - 5px);
		left: 0;
		z-index: -2;
	}
	h1::after {
		border: 3px solid var(---title-main);
	}
	.line-extend::after {
		border: 3px solid var(---minititle-main);
	}
	h2 .size-h2 {
		font-size: 40px !important;
		padding-top: 10px;
	}
	h3,
	.size-h3,
	h4,
	.size-h4 {
		font-size: 30px !important;
	}
	li,
	dt,
	dd,
	th,
	td,
	h5,
	h6,
	p,
	input,
	blockquote,
	figcaption,
	.size-h5,
	.size-h6,
	a {
		font-size: 20px !important;
	}
	footer ul {
		padding-bottom: 0px !important;
	}
	nav.navbar > ul {
		flex-direction: row;
	}
	nav.navbar > ul > li {
		width: auto;
		padding-left: 20px !important;
		padding-right: 20px !important;
	}
	nav.navbar > ul > li > .btn-group > button.dropdown-toggle {
		height: calc(1em + 8px);
	}
	nav.navbar > ul > li > .btn-group > button.dropdown-toggle::after {
		font-size: 20px !important;
		margin: 0 !important;
		padding: 0 !important;
		vertical-align: 0 !important;
		display: inline;
	}
	nav.navbar > ul > li > a,
	nav.navbar > ul > li > .btn-group > a,
	nav.navbar > ul > li > .btn-group > .dropdown-menu > a {
		font-size: 20px !important;
	}
	nav.navbar > ul > li > .btn-group > .dropdown-menu > a {
		text-align: right;
	}
	nav.navbar > ul > li button:hover {
		border: 2px solid var(---title-main) !important;
	}

	nav#topbar {
		background-size: 130%;
		background-position: -250px 500px;
	}
}