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

* {
	margin: 0
}

body {
	min-height: 100vh;
	-webkit-font-smoothing: antialiased
}

img,
picture,
video,
canvas,
iframe,
svg {
	display: block;
	max-width: 100%
}

input,
button,
textarea,
select {
	font: inherit
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	overflow-wrap: break-word
}

p {
	margin: .75em 0
}

#root,
#__next {
	isolation: isolate
}

a:hover {
	text-decoration: none
}

a.button,
button,
[role=button],
input[type=submit],
input[type=reset],
input[type=button] {
	background-color: var(--accent);
	border: 2px solid transparent;
	border-radius: .25em;
	color: var(--bg);
	display: inline-block;
	cursor: pointer;
	margin: .5em 0;
	padding-bottom: calc(.5em - 2px);
	padding-left: 1em;
	padding-right: 1em;
	padding-top: calc(.5em - 2px);
	text-align: center;
	white-space: nowrap;
	filter: none;
	transition: filter .2s linear
}

a.button[disabled],
button[disabled],
[role=button][aria-disabled=true],
input[type=submit][disabled],
input[type=reset][disabled],
input[type=button][disabled],
input[type=checkbox][disabled],
input[type=radio][disabled],
select[disabled],
a button.disabled,
button.disabled,
input[type=submit].disabled,
input[type=reset].disabled,
input[type=button].disabled,
input[type=checkbox].disabled,
input[type=radio].disabled,
select.disabled {
	cursor: default;
	opacity: .5;
	cursor: not-allowed
}

input:disabled,
textarea:disabled,
select:disabled {
	cursor: not-allowed;
	background-color: var(--disabled)
}

input[type=range] {
	padding: 0
}

abbr {
	cursor: help
}

button:focus,
button:enabled:hover,
[role=button]:focus,
[role=button]:not([aria-disabled=true]):hover,
input[type=submit]:focus,
input[type=submit]:enabled:hover,
input[type=reset]:focus,
input[type=reset]:enabled:hover,
input[type=button]:focus,
input[type=button]:enabled:hover,
input[type=checkbox]:focus,
input[type=checkbox]:enabled:hover,
input[type=radio]:focus,
input[type=radio]:enabled:hover {
	opacity: .8;
	cursor: pointer
}

details {
	background: var(--accent-bg);
	border: 1px solid var(--border);
	border-radius: 5px;
	margin-bottom: 1em
}

summary {
	cursor: pointer;
	font-weight: 700;
	padding: .6em 1em
}

details[open] {
	padding: .6em 1em .75em
}

details[open] summary {
	margin-bottom: .5em;
	padding: 0
}

details[open]>*:last-child {
	margin-bottom: 0
}

table {
	border-collapse: collapse;
	width: 100%;
	margin: 1.5em 0
}

td,
th {
	border: 1px solid var(--border);
	text-align: left;
	padding: .5em
}

th {
	background: var(--accent-bg);
	font-weight: 700
}

tr:nth-child(even) {
	background: var(--accent-bg)
}

table caption {
	font-weight: 700;
	margin-bottom: .5em
}

ol,
ul {
	padding-left: 3em
}

select {
	background-image: linear-gradient(45deg, transparent 49%, var(--text) 51%), linear-gradient(135deg, var(--text) 51%, transparent 49%);
	background-position: calc(100% - 20px), calc(100% - 15px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat
}

select[multiple] {
	background-image: none !important
}

input[type=checkbox],
input[type=radio] {
	vertical-align: bottom;
	position: relative
}

input[type=radio] {
	border-radius: 100%
}

input[type=checkbox]:checked,
input[type=radio]:checked {
	background: var(--accent)
}

input[type=checkbox]:checked:after {
	content: " ";
	width: .1em;
	height: .25em;
	border-radius: 0;
	position: absolute;
	top: .05em;
	left: .18em;
	background: transparent;
	border-right: solid var(--bg) .08em;
	border-bottom: solid var(--bg) .08em;
	font-size: 1.8em;
	transform: rotate(45deg)
}

input[type=radio]:checked:after {
	content: " ";
	width: .25em;
	height: .25em;
	border-radius: 100%;
	position: absolute;
	top: .125em;
	background: var(--bg);
	left: .125em;
	font-size: 32px
}

input[type=checkbox],
input[type=radio] {
	width: auto
}

input[type=file] {
	border: 0
}

fieldset {
	border: 0;
	padding: 0;
	margin: 0
}

mark {
	padding: 2px 5px;
	border-radius: 4px;
	background: var(--marked)
}

main img,
main video {
	max-width: 100%;
	height: auto;
	border-radius: 5px
}

figure {
	margin: 0
}

figcaption {
	font-size: .9em;
	color: var(--text-light);
	text-align: center;
	margin-bottom: 1em
}

blockquote {
	margin: 2em 0 2em 2em;
	padding: 0 .75em;
	border-left: .35em solid var(--accent);
	opacity: .8;
	font-style: italic;
	color: var(--accent-light);
	font-size: var(--h4Size)
}

cite {
	font-size: .9em;
	color: var(--text-light);
	font-style: normal
}

code,
pre,
pre span,
kbd,
samp {
	font-size: 1.075em;
	font-family: var(--mono-font);
	color: var(--code)
}

kbd {
	color: var(--preformatted);
	border: 1px solid var(--preformatted);
	border-bottom: 3px solid var(--preformatted);
	border-radius: 5px;
	padding: .1em
}

pre {
	padding: 1em 1.4em;
	max-width: 100%;
	overflow: auto;
	overflow-x: auto;
	color: var(--preformatted);
	background: var(--accent-bg);
	border: 1px solid var(--border);
	border-radius: 5px
}

pre code {
	color: var(--preformatted);
	background: none;
	margin: 0;
	padding: 0
}

:root {
	--sans-font: -apple-system, BlinkMacSystemFont, "Avenir Next", Avenir, "Nimbus Sans L", Roboto, Noto, "Segoe UI", Arial, Helvetica, "Helvetica Neue", sans-serif;
	--mono-font: Consolas, Menlo, Monaco, "Andale Mono", "Ubuntu Mono", monospace;
	--serif-font: Times, Times New Roman, Georgia, Bookman, serif;
	--base-fontsize: 1.15em;
	--header-scale: 1.25;
	--line-height: 1.75;
	--gap: 1.5em;
	--max-content: 63ch;
	--champLightGreen: hsl(157, 100%, 19%);
	--champGold: hsl(44, 100%, 50%);
	--champDarkGreen: hsl(157, 54%, 18%);
	--champPurple: hsl(269, 62%, 38%);
	--champLightGold: hsl(44, 72%, 65%);
	--champLightPurple: hsl(269, 51%, 38%);
	--champDarkRed: hsl(330, 80%, 28%);
	--champRed: hsl(330, 100%, 28%);
	--tablet: 768px;
	--desktop: 55em;
	--widescreen: 1024px;
	--fullhd: 1440px;
	--fontSize: var(--base-fontsize);
	--h1Size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale) * var(--header-scale));
	--h2Size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale) * var(--header-scale));
	--h3Size: calc(var(--base-fontsize) * var(--header-scale) * var(--header-scale));
	--h4Size: calc(var(--base-fontsize) * var(--header-scale));
	--h5Size: var(--base-fontsize);
	--h6Size: calc(var(--fontSize) / var(--header-scale));
	--headingTopMargin: calc(var(--line-height) * 1.5rem);
	--r0: hsl(330, 100%, 10%);
	--r1: hsl(330, 100%, 15%);
	--r2: hsl(330, 100%, 28%);
	--r3: hsl(330, 100%, 50%);
	--r4: hsl(330, 100%, 70%);
	--r5: hsl(330, 100%, 98%);
	--p0: hsl(269, 62%, 10%);
	--p1: hsl(269, 62%, 20%);
	--p2: hsl(269, 62%, 38%);
	--p3: hsl(269, 62%, 55%);
	--p4: hsl(269, 62%, 70%);
	--p5: hsl(269, 62%, 97%);
	--g0: hsl(44, 100%, 10%);
	--g1: hsl(44, 100%, 20%);
	--g2: hsl(44, 100%, 30%);
	--g3: hsl(44, 100%, 46%);
	--g4: hsl(44, 100%, 70%);
	--g5: hsl(44, 100%, 97%);
	--m0: hsl(157, 54%, 12%);
	--m1: hsl(157, 54%, 18%);
	--m2: hsl(157, 54%, 30%);
	--m3: hsl(157, 54%, 50%);
	--m4: hsl(157, 54%, 70%);
	--m5: hsl(157, 54%, 97%);
	--y0: hsl(50, 100%, 10%);
	--y1: hsl(50, 100%, 18%);
	--y2: hsl(50, 100%, 30%);
	--y3: hsl(50, 100%, 50%);
	--y4: hsl(50, 100%, 70%);
	--y5: hsl(50, 100%, 97%);
	--almostBlack: hsl(163, 15%, 1%);
	--veryDarkGray: hsl(163, 15%, 5%);
	--darkGray: hsl(163, 15%, 16%);
	--gray: hsl(163, 15%, 45%);
	--lightGray: hsl(163, 15%, 65%);
	--veryLightGray: hsl(163, 15%, 83%);
	--almostWhite: hsl(163, 15%, 94%);
	--white: hsl(0, 0%, 100%);
	--darkRed: hsl(0, 100%, 30%);
	--lightRed: hsl(0, 100%, 70%);
	--veryLightRed: hsl(0, 100%, 85%);
	--mediumRed: hsl(0, 75%, 50%);
	--brightRed: hsl(0, 100%, 50%);
	--darkOrange: hsl(29, 100%, 27%);
	--orange: hsl(29, 100%, 47%);
	--lightOrange: hsl(29, 100%, 57%);
	--veryLightOrange: hsl(29, 100%, 70%);
	--darkYellow: hsl(50, 100%, 40%);
	--yellow: hsl(50, 100%, 50%);
	--lightYellow: hsl(50, 100%, 80%);
	--veryLightYellow: hsl(50, 100%, 90%);
	--darkGreen: hsl(158, 66%, 20%);
	--green: hsl(158, 66%, 30%);
	--lightGreen: hsl(158, 66%, 38%);
	--veryLightGreen: hsl(158, 66%, 78%);
	--brightGreen: hsl(128, 100%, 50%);
	--darkBlue: hsl(195, 100%, 20%);
	--blue: hsl(195, 100%, 36%);
	--lightBlue: hsl(195, 100%, 50%);
	--veryLightBlue: hsl(195, 100%, 80%);
	--successColor: hsl(110, 100%, 25%);
	--infoColor: hsl(209, 51%, 69%);
	--warningColor: hsl(51, 51%, 69%);
	--errorColor: hsl(0, 51%, 40%);
	--modalBackground: var(--bg);
	--modalOverlay: transparent;
	--digitalFont: Menlo, Monaco, Consolas, "Lucida Console", Courier, "Courier New", monospace;
	--borderRadius: .25em;
	--redHover: var(--r3);
	--stackable: hsla(0, 0%, 0%, .1);
	--dropShadow: hsla(0, 0%, 0%, .35);
	--inputBorder: var(--darkGray);
	--accent-bg: var(--veryLightGray);
	--accent-light: var(--m2);
	--accent: var(--m1);
	--bg: #fff;
	--border: var(--gray);
	--code: var(--darkBlue);
	--disabled: var(--almostWhite);
	--focus: var(--g4);
	--inputHover: var(--g5);
	--link: var(--champRed);
	--linkHover: var(--r1);
	--marked: #ffdd33;
	--muted: var(--lightGray);
	--preformatted: #444;
	--text: var(--veryDarkGray)
}

@media (prefers-color-scheme: dark) {
	:root {
		--accent-bg: var(--veryDarkGray);
		--accent-light: var(--g4);
		--accent: var(--g3);
		--bg: var(--veryDarkGray);
		--border: var(--gray);
		--code: var(--accent);
		--disabled: var(--almostBlack);
		--focus: var(--m1);
		--inputHover: var(--m2);
		--link: var(--accent);
		--linkHover: var(--accent-light);
		--muted: var(--m4);
		--preformatted: #ccc;
		--text: var(--veryLightGray);
		--successColor: var(--brightGreen);
		--infoColor: hsl(209, 51%, 69%);
		--warningColor: hsl(51, 51%, 69%);
		--errorColor: hsl(0, 93%, 60%)
	}

	img,
	video {
		opacity: .8
	}
}

.with-drop-shadow,
.shadow {
	filter: drop-shadow(3px 5px 4px var(--dropShadow))
}

.centered {
	text-align: center
}

.table {
	margin: 2em auto
}

.table th,
.table td {
	padding: .25em .5em
}

.xxlarge {
	font-size: 1.3em
}

.xlarge {
	font-size: 1.2em
}

.large {
	font-size: 1.1em
}

.small {
	font-size: .9em
}

.xsmall {
	font-size: .8em
}

.xxsmall {
	font-size: .7em
}

html {
	font-family: var(--sans-font);
	scroll-behavior: smooth
}

body {
	color: var(--text);
	background-color: var(--bg);
	font-size: var(--base-fontsize);
	line-height: var(--line-height);
	margin: 0 auto;
	max-width: var(--desktop);
	width: 100%;
	padding: 0 .5em;
	overflow-x: hidden;
	word-break: break-word;
	overflow-wrap: break-word
}

#root {
	min-height: 100vh;
	display: grid;
	gap: var(--gap);
	grid-template-columns: 1fr;
	justify-content: center
}

#root.front {
	grid-template-rows: 1fr auto;
	padding-top: 4em
}

#root.front footer {
	grid-row: 3/4
}

#root.admin {
	align-items: center;
	min-height: unset;
	grid-template-rows: auto
}

@media screen and (min-width: 1024px) {
	#root {
		font-size: 1.1em
	}
}

@media screen and (min-width: 1440px) {
	#root {
		font-size: 1.25em
	}
}

h1,
h2,
.h1,
.h2 {
	line-height: 1.1;
	font-family: var(--serif-font)
}

h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
	font-weight: 700
}

h1,
.h1 {
	font-size: var(--h1Size)
}

h2,
.h2 {
	font-size: var(--h2Size)
}

h3,
.h3 {
	font-size: var(--h3Size)
}

h4,
.h4 {
	font-size: var(--h4Size)
}

h5,
.h5 {
	font-size: var(--h5Size)
}

h6,
.h6 {
	font-size: var(--h6Size)
}

.visually-hidden:not(:focus):not(:active) {
	clip: rect(0 0 0 0);
	clip-path: inset(100%);
	height: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
	width: 1px
}

a,
.link,
.clickable {
	text-decoration: none;
	cursor: pointer;
	color: var(--link)
}

a:hover,
.link:hover,
.clickable:hover {
	color: var(--linkHover)
}

a.button:hover {
	color: var(--lightYellow)
}

.centered,
.alignCenter {
	text-align: center
}

.left,
.alignLeft {
	text-align: left
}

.right,
.alignRight {
	text-align: right
}

.digital {
	font-family: var(--digitalFont)
}

iframe {
	display: block;
	margin: 0 auto;
	z-index: -1
}

img,
iframe,
embed {
	border-radius: var(--borderRadius);
	max-width: 100%
}

@media (prefers-color-scheme: dark) {

	.panel,
	img.shadow {
		border: 2px solid var(--accent);
		box-shadow: none
	}
}

.alert {
	display: grid;
	grid-template-rows: 1em;
	grid-template-columns: 1em auto;
	gap: var(--gap);
	align-items: center;
	justify-content: center;
	border-radius: .25em;
	position: fixed;
	top: 1em;
	left: 50%;
	padding: 1em;
	cursor: pointer;
	z-index: 99;
	transform: translate(-50%);
	animation-delay: 4s;
	animation-duration: 4s;
	animation-name: anim;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards
}

@keyframes anim {
	0% {
		opacity: 1;
		top: 1em
	}

	to {
		opacity: 0;
		top: -10em
	}
}

.alert.warning {
	background-color: var(--lightYellow);
	color: var(--darkGray)
}

.alert.error {
	background-color: var(--darkRed);
	color: var(--almostWhite)
}

.alert.info {
	background-color: var(--lightBlue);
	color: var(--almostBlack)
}

.alert.success {
	background-color: var(--darkGreen);
	color: var(--almostWhite)
}

.alert.success .close.icon .eks {
	stroke: var(--almostWhite)
}

.formAlert {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-rows: 1fr;
	gap: 2em;
	padding: 1em;
	border-radius: .25em;
	border: 3px solid var(--darkRed);
	color: var(--darkRed)
}

.ok.icon {
	height: 1.5em;
	stroke: #006400
}

.ok.icon .background {
	fill: none;
	stroke: none
}

.adi.icon {
	fill: #f5f5f5
}

.bbb.icon {
	fill: #f5f5f5;
	stroke: #f5f5f5
}

.cards.icon circle {
	fill: var(--champDarkGreen)
}

.cards.icon g#cards {
	fill: #f5f5f5;
	stroke-width: 1px;
	stroke: var(--almostBlack)
}

.cards.icon path#outerRectangle {
	fill: transparent
}

.champ.icon {
	fill: var(--champGold)
}

.champ.icon:hover {
	cursor: auto;
	filter: none
}

.checkbox .checkmark {
	transform-origin: center center;
	transform: scale(.25);
	opacity: 0;
	transition: all .2s linear;
	fill: green
}

.checkbox.checked .checkmark {
	opacity: 1;
	transform: scale(1)
}

.clipboard.icon {
	fill: red;
	height: 1.5em
}

.close.icon .background {
	fill: none;
	stroke: none
}

.close.icon .eks {
	fill: var(--accent);
	stroke: var(--accent);
	stroke-width: 10
}

.copy.icon {
	stroke-width: 7
}

.copy.icon .frontDoc,
.copy.icon .rearDoc {
	stroke: var(--accent)
}

.copy.icon .frontDoc {
	fill: var(--bg)
}

.delete.icon {
	fill: none
}

.delete.icon .eks {
	stroke: var(--accent);
	stroke-width: 12
}

.donate.icon {
	fill: transparent
}

.donate.icon ircle {
	fill: var(--champGreen)
}

.donate.icon .dollar {
	stroke-width: 10px;
	stroke: var(--almostBlack);
	fill: var(--champRed)
}

.dragDropUpload.icon {
	height: 2em;
	stroke: #aaa;
	stroke-width: 8px;
	stroke-miterlimit: 2
}

.dragDropUpload.icon .vertical,
.dragDropUpload.icon .arrowhead {
	fill: none;
	stroke: red
}

.dragDropUpload.icon .tray {
	fill: none
}

.edit.icon {
	stroke-width: .75;
	stroke: var(--accent);
	fill: none
}

.edit.icon .outer {
	stroke: none
}

.eye.icon {
	fill: transparent;
	stroke: var(--almostBlack);
	stroke-width: 10
}

.facebook.icon {
	fill: var(--almostWhite)
}

.files.icon .outerRectangle {
	fill: transparent
}

.files.icon circle {
	fill: var(--champDarkGreen)
}

.files.icon .folder {
	fill: #f5f5f5;
	stroke: var(--champDarkGreen);
	stroke-width: 2px
}

.folder.icon {
	height: 2em
}

.folder.icon .front {
	fill: var(--g4)
}

.folder.icon .back {
	fill: var(--g2)
}

.img.icon .outerRectangle {
	fill: transparent;
	stroke: none
}

.img.icon .imgBg {
	fill: none;
	stroke: var(--champDarkGreen);
	stroke-width: 2px
}

.img.icon .sky {
	fill: var(--almostWhite)
}

.img.icon .mountains {
	fill: var(--champPurple)
}

.img.icon circle {
	fill: var(--champGold);
	stroke: none
}

.icon:hover {
	filter: hue-rotate(21deg);
	cursor: pointer
}

.instagram.icon {
	fill: #f5f5f5
}

.list.icon {
	height: 2em
}

.list.icon .listLines {
	stroke: red;
	fill: #000
}

.locked.icon {
	width: 1em
}

.locked.icon .box {
	fill: transparent
}

.locked.icon circle {
	fill: var(--champDarkGreen)
}

.locked.icon .lock {
	fill: var(--almostWhite)
}

.logo.icon.search {
	width: 70vw;
	height: unset;
	margin: 2em auto
}

.logo.icon:hover {
	filter: none;
	cursor: auto
}

.marquees.icon .outerRectangle {
	fill: transparent
}

.marquees.icon circle {
	fill: var(--champDarkGreen)
}

.marquees.icon .marquees {
	fill: #f5f5f5;
	stroke: var(--champDarkGreen);
	stroke-width: 2px
}

.next.icon {
	height: 2em;
	fill: #a10500;
	stroke: #a10500
}

.notOK.icon {
	fill: transparent
}

.notOK.icon .circle {
	stroke: var(--errorColor)
}

.notOK.icon .bar {
	stroke: var(--errorColor);
	fill: var(--errorColor)
}

.pages.icon circle {
	fill: var(--champDarkGreen)
}

.pages.icon g.pages {
	fill: #f5f5f5;
	stroke-width: 1px;
	stroke: var(--almostBlack)
}

.pages.icon path.outerRectangle {
	fill: none
}

.pawPrint.icon {
	height: 1em;
	stroke: var(--champGold);
	fill: var(--champGold)
}

.pawPrint.icon:hover {
	filter: none
}

.pawPrint.icon.darkGreen {
	stroke: var(--champDarkGreen);
	fill: var(--champDarkGreen)
}

.pawPrint.icon.red {
	stroke: var(--champRed);
	fill: var(--champRed)
}

.pdf.icon {
	fill: none
}

.pdf.icon text {
	fill: var(--text)
}

.permissions.icon circle {
	fill: var(--champDarkGreen)
}

.permissions.icon g.lock {
	fill: #f5f5f5
}

.permissions.icon path.outerRectangle {
	fill: none
}

.pointer.icon {
	transform-origin: center;
	fill: var(--champDarkGreen);
	stroke: var(--champDarkGreen)
}

.pointer.icon .left {
	transform: rotate(180deg)
}

.pointer.icon .up {
	transform: rotate(270deg)
}

.pointer.icon .down {
	transform: rotate(90deg)
}

.prev.icon {
	height: 2em;
	fill: #a10500;
	stroke: #a10500
}

.profile.icon .outerRectangle {
	fill: transparent
}

.profile.icon .background {
	fill: var(--champDarkGreen)
}

.profile.icon .person {
	fill: #f5f5f5
}

.question.icon {
	height: 1em;
	fill: #006400
}

.replace.icon {
	height: 1.5em;
	stroke: var(--almostBlack);
	stroke-width: 10;
	fill: transparent
}

.replace.icon .arc {
	stroke-width: 120
}

.replace.icon .arrow {
	fill: var(--almostBlack)
}

.replace.icon .outerRectangle {
	fill: none;
	stroke: #000;
	stroke-width: 1
}

.reset.icon {
	stroke: red;
	fill: transparent
}

.reset.icon .background {
	fill: none;
	stroke: none
}

.restore.icon {
	height: 2em;
	stroke-width: 15;
	stroke-miterlimit: 2
}

.restore.icon .arc,
.restore.icon .arrowhead {
	fill: none;
	stroke: #006400
}

.search.icon {
	height: 1em;
	stroke: #fff
}

.start.icon {
	height: 2em;
	stroke: #006400;
	fill: #006400
}

.stop.icon {
	height: 2em;
	stroke: #8b0000;
	fill: #8b0000
}

.table.icon {
	height: 2em;
	stroke: #8b0000;
	fill: none
}

.tiktok.icon {
	fill: #f5f5f5;
	stroke: #f5f5f5
}

.tree.icon {
	height: 2em;
	stroke: #8b0000;
	fill: none
}

.twitter.icon {
	fill: #f5f5f5;
	stroke: #f5f5f5
}

.unlocked.icon {
	width: 1em
}

.unlocked.icon .box {
	fill: transparent
}

.unlocked.icon circle {
	fill: var(--champDarkGreen)
}

.unlocked.icon .lock {
	fill: var(--almostWhite)
}

.users.icon .person {
	fill: #f5f5f5;
	stroke: var(--almostBlack);
	stroke-width: 2px
}

.users.icon circle {
	fill: var(--champDarkGreen)
}

.volunteer.icon {
	fill: transparent
}

.volunteer.icon circle {
	fill: var(--champPurple)
}

.volunteer.icon .hand {
	stroke-width: 10px;
	stroke: var(--almostBlack);
	fill: var(--champDarkGreen)
}

.button.cancel,
button.cancel {
	background-color: var(--darkOrange);
	color: var(--almostWhite);
	border-color: var(--almostBlack)
}

.button.delete,
.button.red,
button.delete,
button.red {
	background-color: var(--r2);
	color: var(--almostWhite);
	border-color: var(--r1)
}

.button.orange,
button.orange {
	background-color: var(--darkOrange);
	color: var(--almostWhite);
	border-color: var(--almostBlack)
}

.button.yellow,
button.yellow {
	background-color: var(--champGold);
	color: var(--almostBlack);
	border-color: var(--g2)
}

.button.green,
button.green {
	background-color: var(--champLightGreen);
	color: var(--almostWhite);
	border-color: var(--champDarkGreen)
}

.button.blue,
button.blue {
	background-color: var(--blue);
	color: var(--almostWhite);
	border-color: var(--darkGray)
}

.buttons {
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: repeat(auto-fit, minmax(30%, auto));
	gap: var(--gap);
	align-items: center;
	justify-content: end;
	margin: 0 auto;
	width: 100%;
	max-width: var(--max-content)
}

.buttons.radioButtons {
	justify-content: space-around
}

@media screen and (max-width: 400px) {
	.buttons {
		grid-template-columns: 1fr
	}
}

.counter {
	font-size: .8em
}

.counter.yellow {
	color: var(--warningColor)
}

.counter.red {
	color: var(--errorColor);
	font-weight: 700
}

.with-drop-shadow,
.shadow {
	filter: drop-shadow(3px 5px 4px var(--dropShadow))
}

.centered {
	text-align: center
}

.table {
	margin: 2em auto
}

.table th,
.table td {
	padding: .25em .5em
}

.xxlarge {
	font-size: 1.3em
}

.xlarge {
	font-size: 1.2em
}

.large {
	font-size: 1.1em
}

.small {
	font-size: .9em
}

.xsmall {
	font-size: .8em
}

.xxsmall {
	font-size: .7em
}

form {
	display: grid;
	gap: 1.5em;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	align-items: center;
	justify-content: center;
	font-size: 1em
}

textarea.dragOver {
	opacity: .3;
	background-color: var(--veryLightGray);
	outline-offset: -1em;
	outline: .25em dashed var(--darkGray)
}

.input,
input,
textarea {
	background-color: var(--bg);
	background-image: unset;
	color: var(--text);
	border: 2px solid var(--border);
	padding: .25em;
	font-size: inherit;
	font-family: inherit;
	min-height: 1.25em;
	border-radius: .1em;
	box-shadow: none;
	box-sizing: border-box;
	appearance: none
}

.input:hover,
input:hover,
textarea:hover {
	background-color: var(--inputHover)
}

.input:focus,
input:focus,
textarea:focus {
	cursor: auto;
	background-color: var(--focus)
}

@media screen and (min-width: 769px) {
	.formField {
		margin: 0 auto
	}
}

.formField {
	display: grid;
	grid-template-rows: auto auto;
	grid-template-columns: 1fr;
	gap: .25em;
	margin: 0 auto;
	width: 100%;
	max-width: var(--max-content)
}

.formField.hidden {
	display: none
}

.formField.select .selected {
	padding: 3em
}

.formField.select .selectable {
	cursor: pointer
}

.formField label {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 1em;
	justify-content: left;
	align-items: center;
	font-weight: 700;
	font-size: 1.1em
}

.formField label input.filter {
	max-width: 10em
}

.formField label .counter {
	font-size: .9em
}

.inputRow {
	display: grid;
	gap: .25em;
	grid-template-rows: 2.5em;
	grid-template-columns: 1fr minmax(auto, 2.5em);
	justify-content: center;
	align-items: center
}

.inputRow.empty {
	grid-template-columns: 1fr
}

#mediaSelect {
	display: grid;
	grid-template-rows: 4em auto
}

#mediaSelect .paginatedLinks {
	padding: 0
}

.help {
	font-size: .75em;
	color: var(--muted)
}

.help.clickable:hover {
	color: var(--linkHover)
}

.help.passwordCheck .fail {
	color: var(--errorColor)
}

.help.passwordCheck .pass {
	color: var(--successColor)
}

.fieldError {
	font-size: .8em;
	color: var(--errorColor)
}

.hidden {
	display: none
}

.linkedPageSelect {
	display: grid;
	gap: .25em;
	grid-template-rows: 2.5em auto;
	grid-template-columns: 1fr 2.5em;
	justify-content: center;
	align-items: center
}

.selectedResult {
	display: grid;
	gap: .25em;
	grid-template-rows: auto;
	grid-template-columns: 1fr 2.5em;
	justify-content: center;
	align-items: center
}

.selectedResult .result {
	border: 2px solid var(--champRed);
	padding: .5em
}

.with-drop-shadow,
.shadow {
	filter: drop-shadow(3px 5px 4px var(--dropShadow))
}

.centered {
	text-align: center
}

.table {
	margin: 2em auto
}

.table th,
.table td {
	padding: .25em .5em
}

.xxlarge {
	font-size: 1.3em
}

.xlarge {
	font-size: 1.2em
}

.large {
	font-size: 1.1em
}

.small {
	font-size: .9em
}

.xsmall {
	font-size: .8em
}

.xxsmall {
	font-size: .7em
}

#spinner {
	animation-duration: .3s;
	animation-name: fadeInFrames;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
	margin: 25vh 0 75vh;
	display: flex;
	justify-content: center
}

@keyframes fadeInFrames {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

#spinner .loading {
	display: inline-block;
	position: relative;
	width: 64px;
	height: 64px
}

#spinner .loading div {
	position: absolute;
	background: var(--champRed);
	opacity: 1;
	border-radius: 50%;
	animation: loading 1.4s cubic-bezier(0, .2, .8, 1) infinite
}

#spinner .loading div:nth-child(2) {
	animation-delay: -.7s
}

@keyframes loading {
	0% {
		top: 28px;
		left: 28px;
		width: 0;
		height: 0;
		opacity: 1
	}

	to {
		top: -1px;
		left: -1px;
		width: 58px;
		height: 58px;
		opacity: 0
	}
}

footer {
	display: grid;
	gap: 1.25em;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: repeat(3, auto) 5em auto;
	justify-content: center;
	align-items: center;
	padding: 1em
}

footer .logo {
	grid-row: 1/2;
	grid-column: 1/2
}

footer .address {
	grid-row: 1/2;
	grid-column: 2/5
}

footer .links {
	grid-row: 2/3;
	grid-column: 1/5
}

footer .champ {
	grid-row: 3/4;
	grid-column: 1/5
}

footer .socialLinks {
	justify-self: center;
	grid-row: 4/5
}

footer .socialLinks {
	grid-column: 2/3
}

footer .copyright {
	grid-row: 5/6;
	grid-column: 1/5
}

@media screen and (min-width: 555px) {
	footer {
		grid-template-columns: repeat(6, 1fr);
		grid-template-rows: repeat(4, auto)
	}

	footer .logo {
		grid-row: 1/2;
		grid-column: 1/2
	}

	footer .address {
		grid-row: 1/2;
		grid-column: 2/4
	}

	footer .links {
		grid-row: 1/2;
		grid-column: 4/7
	}

	footer .champ {
		grid-row: 2/3;
		grid-column: 1/7
	}

	footer .socialLinks {
		grid-row: 3/4;
		grid-column: 2/6
	}

	footer .copyright {
		grid-row: 4/5;
		grid-column: 1/7
	}
}

footer {
	font-size: .9em;
	background-color: var(--p1);
	color: var(--almostWhite)
}

footer .copyright {
	justify-self: center;
	font-size: .6em
}

footer .address,
footer .copyright,
footer .links,
footer .champ {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	line-height: 1;
	gap: .4em;
	justify-content: center;
	align-content: center
}

footer .socialLinks {
	display: grid;
	gap: 1em;
	grid-template-columns: repeat(4, 1.5em);
	grid-template-rows: 1.5em;
	align-items: center;
	justify-content: center
}

footer .address {
	font-size: .8em
}

footer .links {
	grid-template-columns: auto;
	grid-template-rows: repeat(3, auto);
	justify-items: center
}

footer .champ {
	color: var(--champGold);
	gap: 1em;
	font-size: .55em
}

footer .champ p:first-letter {
	font-size: 180%;
	display: inline-block
}

footer .champ p {
	text-transform: uppercase
}

footer a {
	color: var(--g4);
	font-weight: 700;
	text-decoration: none
}

footer a:hover {
	border: none;
	color: var(--g3)
}

footer .iconButton:hover {
	background-color: transparent;
	fill: var(--g3);
	stroke: var(--g3)
}

footer .icon {
	max-height: 5em
}

@media screen and (min-width: 555px) {
	footer .champ {
		font-size: 1em
	}
}

@media screen and (min-width: 768px) {
	footer .links {
		grid-template-rows: auto;
		grid-template-columns: repeat(3, auto);
		background-color: transparent;
		gap: 1em
	}

	footer .champ {
		font-size: 1.3em
	}
}

.ticTacToeLink {
	fill: var(--g2)
}

.buttonLink {
	fill: var(--lightGray)
}

.icon.facebook,
.icon.tiktok,
.icon.instagram {
	fill: #f5f5f5;
	stroke: #f5f5f5
}

.separator {
	display: grid;
	grid-template-rows: 5em;
	grid-template-columns: repeat(3, auto);
	align-items: center;
	justify-content: center;
	gap: 1em
}

.separator .pawPrint.icon {
	fill: var(--champLightGreen)
}

.separator .pawPrint.icon:hover {
	filter: none;
	cursor: auto
}

.separator .pawPrint.icon.middle {
	height: 1.75em;
	fill: var(--champGold)
}

@media (prefers-color-scheme: dark) {
	.separator .pawPrint.icon {
		fill: var(--champGold)
	}

	.separator .pawPrint.icon.middle {
		fill: var(--champLightGreen)
	}
}

.pdfLink {
	display: grid;
	grid-template-columns: 1.5em auto;
	grid-template-rows: 1.5em;
	gap: .5em;
	align-items: center;
	justify-content: left
}

.with-drop-shadow,
.shadow {
	filter: drop-shadow(3px 5px 4px var(--dropShadow))
}

.centered {
	text-align: center
}

.table {
	margin: 2em auto
}

.table th,
.table td {
	padding: .25em .5em
}

.xxlarge {
	font-size: 1.3em
}

.xlarge {
	font-size: 1.2em
}

.large {
	font-size: 1.1em
}

.small {
	font-size: .9em
}

.xsmall {
	font-size: .8em
}

.xxsmall {
	font-size: .7em
}

.card {
	display: grid;
	gap: .25em;
	grid-template-rows: auto auto 1fr 3em;
	grid-template-columns: 1fr;
	padding: .1em;
	border-radius: .5em;
	border: 2px solid;
	color: var(--almostBlack)
}

.card .body {
	padding: 0 .5em
}

.card.lightGreen {
	background-color: var(--m5);
	border-color: var(--champLightGreen)
}

.card.lightGreen .title {
	background-color: var(--champLightGreen);
	color: var(--almostWhite)
}

.card.darkGreen {
	background-color: var(--m5);
	border-color: var(--m1)
}

.card.darkGreen .title {
	background-color: var(--m1);
	color: var(--almostWhite)
}

.card.purple {
	background-color: var(--p5);
	border-color: var(--champPurple)
}

.card.purple .title {
	background-color: var(--champPurple);
	color: var(--almostWhite)
}

.card.red {
	background-color: var(--r5);
	border-color: var(--champRed)
}

.card.red .title {
	background-color: var(--champRed);
	color: var(--almostWhite)
}

.card.gold {
	background-color: var(--g5);
	border-color: var(--g3)
}

.card.gold .title {
	background-color: var(--g3);
	color: var(--almostBlack)
}

.card.yellow {
	background-color: var(--y5);
	border-color: var(--y3)
}

.card.yellow .title {
	background-color: var(--y3);
	color: var(--almostBlack)
}

.card .title {
	padding: .66666667em .5em;
	border-radius: .4em;
	margin-bottom: .5em;
	filter: drop-shadow(3px 5px 4px var(--dropShadow))
}

.card h1,
.card h2,
.card h5,
.card h6 {
	font-size: var(--h3Size)
}

.card .subtitle {
	color: var(--darkGray);
	font-weight: 700
}

.card .content img {
	filter: drop-shadow(3px 5px 4px var(--dropShadow))
}

.card .content,
.card .subtitle {
	padding: 0 .5em;
	line-height: 1.5;
	text-align: left
}

.card .moreLink {
	justify-self: center
}

.card .moreLink .pawPrint.icon {
	height: 1.95em
}

.card .moreLink.lightGreen .icon {
	fill: var(--champLightGreen)
}

.card .moreLink.darkGreen .icon {
	fill: var(--m1)
}

.card .moreLink.purple .icon {
	fill: var(--champPurple)
}

.card .moreLink.red .icon {
	fill: var(--champRed)
}

.card .moreLink.gold .icon {
	fill: var(--g3)
}

.card .moreLink.yellow .icon {
	fill: var(--y3)
}

.tabsContainer {
	display: grid;
	gap: var(--gap);
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	align-items: center;
	justify-content: center
}

.tabs {
	cursor: pointer;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center
}

.tabs .tab {
	flex-grow: 1;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: center;
	border: 2px solid gray;
	border-left: none;
	height: 2em
}

.tabs .tab:first-child {
	border-left: 2px solid gray;
	border-radius: var(--borderRadius) 0 0 var(--borderRadius)
}

.tabs .tab:last-child {
	border-radius: 0 var(--borderRadius) var(--borderRadius) 0
}

.tabs .tab.active {
	background-color: var(--m2);
	color: var(--almostWhite)
}

.tabs.vertical {
	flex-direction: column;
	align-items: stretch
}

.tabs.vertical .tab {
	border-bottom: none;
	min-height: 3em
}

.tabs.vertical .tab:first-child {
	border-bottom: 2px solid gray
}

.bodyInput {
	min-height: 33em
}

.with-drop-shadow,
.shadow,
.popup .inner {
	filter: drop-shadow(3px 5px 4px var(--dropShadow))
}

.centered {
	text-align: center
}

.table {
	margin: 2em auto
}

.table th,
.table td {
	padding: .25em .5em
}

.xxlarge {
	font-size: 1.3em
}

.xlarge {
	font-size: 1.2em
}

.large {
	font-size: 1.1em
}

.small {
	font-size: .9em
}

.xsmall {
	font-size: .8em
}

.xxsmall {
	font-size: .7em
}

.popup .panel {
	position: absolute;
	transform-origin: top;
	padding: 0;
	margin: 0;
	border-radius: .25em;
	z-index: 1;
	transition: all .4s ease-in-out
}

.popup .panel.open {
	transform: rotateX(0);
	opacity: 1
}

.popup .panel.closed {
	transform: rotateX(90deg);
	opacity: 0
}

.popup .panel .panelHeader {
	font-size: 1.2em;
	margin-bottom: .25em
}

.popup .inner {
	padding: 1em;
	background-color: var(--bg);
	border: 1px solid var(--border);
	position: absolute;
	z-index: 1;
	border-radius: var(--borderRadius)
}

.popup .inner img {
	width: 100%
}

.with-drop-shadow,
.shadow {
	filter: drop-shadow(3px 5px 4px var(--dropShadow))
}

.centered {
	text-align: center
}

.table {
	margin: 2em auto
}

.table th,
.table td {
	padding: .25em .5em
}

.xxlarge {
	font-size: 1.3em
}

.xlarge {
	font-size: 1.2em
}

.large {
	font-size: 1.1em
}

.small {
	font-size: .9em
}

.xsmall {
	font-size: .8em
}

.xxsmall {
	font-size: .7em
}

.folder.items {
	--firstColumnWidth: 2em;
	--itemIconWidth: 3em;
	--iconSize: 1.5em;
	display: grid;
	align-items: center;
	justify-content: center;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	gap: .5rem
}

.folder.items .icon {
	height: var(--iconSize)
}

.folder.items .item {
	display: grid;
	grid-template-rows: 2em;
	align-items: center;
	justify-content: start;
	border-radius: .5em
}

.folder.items .item .itemActions {
	display: grid;
	gap: .5em;
	grid-template-columns: 1fr 1fr 1fr;
	grid-template-rows: 1fr;
	align-items: center;
	justify-content: center
}

.folder.items .item.dir {
	grid-template-columns: var(--firstColumnWidth) var(--itemIconWidth) 1fr;
	transition: all .4s
}

.folder.items .item.dir .close,
.folder.items .item.dir .next {
	height: 1em;
	stroke: green
}

.folder.items .item.img,
.folder.items .item.doc {
	grid-template-columns: var(--firstColumnWidth) auto 1fr auto
}

.folder.items .subDirectory {
	grid-row: 2/3;
	grid-column: 1/4;
	margin-top: .5em;
	margin-left: var(--firstColumnWidth)
}

.folder.items .subDirectory.expanded {
	position: relative
}

.folder.items .subDirectory.collapsed {
	position: absolute;
	top: 0;
	left: 0;
	transform: rotateY(90deg)
}

@media (prefers-color-scheme: dark) {
	.explorer .folderNav .link {
		color: #ff8c00
	}

	.explorer .folderNav .ds {
		color: #f5f5f5
	}

	.explorer .items .item {
		background-color: #333
	}

	.explorer .items .item:hover {
		background-color: #585858;
		border-color: #d3d3d3
	}
}

@media (prefers-color-scheme: light) {
	.explorer .folderNav .link {
		color: #006400
	}

	.explorer .folderNav .ds {
		padding: 0 .5em
	}

	.explorer .items .item {
		background-color: transparent;
		border-color: gray
	}

	.explorer .items .item:hover {
		background-color: #d3d3d3
	}
}

.UploadBar {
	background-color: var(--verylightGray);
	display: grid;
	gap: 0;
	grid-template-columns: auto;
	grid-template-rows: auto auto;
	align-items: center
}

.UploadBar .help {
	grid-row: 3/4
}

.UploadBar .inputArea {
	grid-row: 2/3;
	display: grid;
	gap: 1em;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: auto;
	align-items: center
}

.UploadBar .inputArea .uploadFileButton {
	grid-column: 1/2
}

.UploadBar .inputArea .copyButton {
	grid-column: 3/4
}

.UploadBar .inputArea input.fileInput {
	grid-column: 2/3
}

.UploadBar .inputArea span.centerArea {
	grid-column: 2/3;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis
}

.tabContent .card {
	max-width: 320px;
	margin: 0 auto
}

.cardForm .colors {
	display: grid;
	gap: 1em;
	grid-template-columns: repeat(auto-fit, minmax(10%, 1fr))
}

.cardForm .colors .selected {
	outline-offset: .2em;
	outline-width: medium;
	outline-style: solid;
	outline-color: var(--accent)
}

.cardForm .colors .color {
	padding: .25em;
	color: var(--almostBlack);
	border-radius: .25em;
	cursor: pointer;
	text-align: center
}

.cardForm .colors .color.lightGreen {
	background-color: var(--champLightGreen);
	color: var(--almostWhite)
}

.cardForm .colors .color.darkGreen {
	background-color: var(--m1);
	color: var(--almostWhite)
}

.cardForm .colors .color.purple {
	background-color: var(--champPurple);
	color: var(--almostWhite)
}

.cardForm .colors .color.red {
	background-color: var(--champRed);
	color: var(--almostWhite)
}

.cardForm .colors .color.gold {
	background-color: var(--champGold)
}

.cardForm .colors .color.yellow {
	background-color: var(--yellow)
}

#cards {
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: auto;
	gap: 1.5em
}

#cards .adminCard {
	display: grid;
	grid-template-rows: auto 1fr;
	grid-template-columns: auto;
	gap: .5em;
	border: 2px solid var(--lightGray);
	border-radius: .5em;
	padding: .5em;
	margin-bottom: .5em
}

#cards .adminCard .adminActions .icon {
	height: 1.25em
}

@media (prefers-color-scheme: dark) {
	#cards .adminCard {
		background-color: transparent;
		border: 2px solid var(--darkGray)
	}
}

.cards {
	display: flex;
	flex-wrap: wrap
}

.cards .adminCard {
	flex-grow: 1;
	flex-shrink: 0;
	margin: 1%;
	justify-content: space-between;
	text-align: center
}

@media screen and (max-width: 400px) {
	.cards .adminCard {
		flex-basis: 67%
	}
}

@media screen and (min-width: 400px) {
	.cards .adminCard {
		flex-basis: 33%
	}
}

@media screen and (min-width: 800px) {
	.cards .adminCard {
		flex-basis: 25%
	}
}

.with-drop-shadow {
	filter: drop-shadow(3px 5px 4px var(--dropShadow))
}

.shadow,
svg.WelcomeMarquee {
	filter: drop-shadow(3px 5px 4px var(--dropShadow))
}

.centered {
	text-align: center
}

.table {
	margin: 2em auto
}

.table th,
.table td {
	padding: .25em .5em
}

.xxlarge {
	font-size: 1.3em
}

.xlarge {
	font-size: 1.2em
}

.large {
	font-size: 1.1em
}

.small {
	font-size: .9em
}

.xsmall {
	font-size: .8em
}

.xxsmall {
	font-size: .7em
}

.home,
section {
	display: grid;
	gap: var(--gap);
	grid-template-columns: 1fr;
	grid-template-rows: auto
}

.hero img {
	width: 100%
}

section.cards {
	display: grid;
	gap: 1em;
	grid-template-columns: 1fr
}

section.cards .row {
	display: grid;
	gap: 1em;
	grid-template-columns: repeat(auto-fit, minmax(30%, 1fr))
}

section.ccta a {
	font-weight: 700;
	font-size: var(--h5Size)
}

section.ccta a.light {
	color: var(--almostWhite)
}

section.ccta a.dark {
	color: var(--veryDarkGray)
}

section.ccta p {
	margin-bottom: .25em
}

section.ccta .bar {
	display: grid;
	grid-template-columns: 1fr 6em 1fr;
	grid-template-rows: auto;
	column-gap: 1.5em;
	row-gap: .5em;
	justify-content: center;
	align-items: center;
	color: var(--almostBlack);
	padding: 1.5em;
	border-radius: var(--borderRadius)
}

section.ccta .bar a.icon {
	grid-row: 1/2;
	grid-column: 2/3
}

section.ccta .bar .title {
	grid-row: 2/3;
	grid-column: 1/4;
	font-size: var(--h4Size);
	font-weight: 700;
	text-align: center
}

section.ccta .bar .content {
	grid-row: 3/4;
	grid-column: 1/4
}

section.ccta .bar .link {
	grid-row: 4/5;
	grid-column: 1/4;
	justify-self: right
}

section.ccta .bar.volunteer {
	background-color: var(--champGold)
}

section.ccta .bar.volunteer .volunteer.icon {
	fill: transparent
}

section.ccta .bar.volunteer .volunteer.icon .circle {
	fill: var(--almostWhite)
}

section.ccta .bar.volunteer .volunteer.icon .hand {
	stroke-width: 8px;
	stroke: var(--almostWhite);
	fill: var(--champPurple)
}

section.ccta .bar.donate {
	color: var(--almostWhite);
	background-color: var(--champLightGreen)
}

section.ccta .bar.donate .donate.icon {
	fill: transparent
}

section.ccta .bar.donate .donate.icon .circle {
	fill: var(--mediumRed)
}

section.ccta .bar.donate .donate.icon .dollar {
	stroke-width: 2px;
	stroke: var(--almostWhite);
	fill: var(--almostWhite)
}

@media screen and (min-width: 550px) {
	section.ccta .bar {
		grid-template-columns: 6em 1fr auto;
		grid-template-rows: auto;
		column-gap: 1em
	}

	section.ccta .bar a.icon {
		grid-row: 1/2;
		grid-column: 1/2
	}

	section.ccta .bar .title {
		grid-row: 1/2;
		grid-column: 2/3;
		font-size: var(--h4Size);
		font-weight: 700;
		text-align: left
	}

	section.ccta .bar .content {
		grid-row: 2/3;
		grid-column: 1/3
	}

	section.ccta .bar .link {
		grid-row: 3/4;
		grid-column: 2/3
	}
}

@media screen and (min-width: 700px) {
	section.ccta .bar {
		grid-template-columns: 8em 1fr auto;
		grid-template-rows: auto
	}

	section.ccta .bar a.icon {
		grid-row: 1/4;
		grid-column: 1/2
	}

	section.ccta .bar .title {
		grid-row: 1/2;
		grid-column: 2/4;
		font-size: var(--h3Size);
		font-weight: 700;
		text-align: left
	}

	section.ccta .bar .content {
		grid-row: 2/3;
		grid-column: 2/4
	}

	section.ccta .bar .link {
		grid-row: 3/4;
		grid-column: 3/4
	}
}

.popout .panel {
	position: absolute;
	transform-origin: top;
	padding: 0;
	margin: 0;
	border-radius: .25em;
	z-index: 1;
	transition: all .4s ease-in-out
}

.popout .panel.open {
	transform: rotateX(0);
	opacity: 1
}

.popout .panel.closed {
	transform: rotateX(90deg);
	opacity: 0
}

.popout .panel .panelHeader {
	font-size: 1.2em;
	margin-bottom: .25em
}

.popout .burger {
	stroke: var(--text)
}

.with-drop-shadow,
.shadow {
	filter: drop-shadow(3px 5px 4px var(--dropShadow))
}

.centered {
	text-align: center
}

.table {
	margin: 2em auto
}

.table th,
.table td {
	padding: .25em .5em
}

.xxlarge {
	font-size: 1.3em
}

.xlarge {
	font-size: 1.2em
}

.large {
	font-size: 1.1em
}

.small {
	font-size: .9em
}

.xsmall {
	font-size: .8em
}

.xxsmall {
	font-size: .7em
}

nav {
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: auto 1fr auto;
	gap: 1em;
	align-items: center;
	justify-content: center;
	transition: all .5s;
	z-index: 1;
	background-color: var(--champRed);
	border-radius: var(--borderRadius);
	font-size: .9em;
	padding: .5em;
	filter: drop-shadow(3px 5px 4px var(--dropShadow));
	position: fixed
}

nav .navLink.donate {
	grid-column: 1/2
}

nav.mobile {
	grid-template-columns: 1fr auto auto
}

nav.mobile .navLink.menu {
	grid-column: 3/4
}

nav.mobile .links {
	display: none
}

nav.mobile .navLink.search {
	grid-column: 2/3
}

nav.desktop .links {
	grid-column: 2/3
}

nav.desktop .navLink.search {
	grid-column: 3/4
}

nav.desktop .navLink.menu {
	display: none
}

nav.hide {
	margin-top: -8em
}

nav.show {
	margin-top: -3.75em
}

nav .navIconButtons {
	display: grid;
	gap: .5em;
	grid-template-columns: 2em 2em;
	cursor: pointer
}

nav .links {
	display: grid;
	grid-template-columns: repeat(6, auto);
	align-items: center;
	justify-content: center;
	gap: 1em;
	transition: all .3s linear
}

.popout .panel {
	background-color: var(--champRed);
	border: none;
	padding: 1em;
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	gap: .5em
}

.popout .burger {
	stroke: var(--almostWhite)
}

a.navLink {
	color: var(--almostWhite);
	text-decoration: none;
	display: block
}

a.navLink:hover {
	color: var(--veryLightGray)
}

a.navLink.donate {
	font-weight: 700
}

.with-drop-shadow,
.shadow {
	filter: drop-shadow(3px 5px 4px var(--dropShadow))
}

.centered {
	text-align: center
}

.table {
	margin: 2em auto
}

.table th,
.table td {
	padding: .25em .5em
}

.xxlarge {
	font-size: 1.3em
}

.xlarge {
	font-size: 1.2em
}

.large {
	font-size: 1.1em
}

.small {
	font-size: .9em
}

.xsmall {
	font-size: .8em
}

.xxsmall {
	font-size: .7em
}

#notFound {
	animation-duration: .3s;
	animation-name: fadeInFrames;
	animation-timing-function: ease-out;
	animation-fill-mode: forwards;
	margin: 0 auto;
	min-width: 90%;
	min-height: 90%;
	max-width: 90%;
	max-height: 90%;
	display: grid;
	grid-template-rows: 1fr 2fr;
	align-items: center;
	justify-content: center
}

@keyframes fadeInFrames {
	0% {
		opacity: 0
	}

	to {
		opacity: 1
	}
}

#notFound svg {
	filter: drop-shadow(3px 5px 4px var(--dropShadow))
}

#notFound .notFoundMessage {
	font-size: calc(var(--fontSize) * 2);
	color: var(--accent);
	text-align: center
}

.with-drop-shadow,
.shadow {
	filter: drop-shadow(3px 5px 4px var(--dropShadow))
}

.centered {
	text-align: center
}

.table {
	margin: 2em auto
}

.table th,
.table td {
	padding: .25em .5em
}

.xxlarge {
	font-size: 1.3em
}

.xlarge {
	font-size: 1.2em
}

.large {
	font-size: 1.1em
}

.small {
	font-size: .9em
}

.xsmall {
	font-size: .8em
}

.xxsmall {
	font-size: .7em
}

.breadcrumbs {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	font-size: var(--h5Size);
	font-weight: 700
}

.breadcrumbs .icon {
	fill: var(--text);
	height: .67em;
	margin: 0 .33em
}

.breadcrumbs .breadcrumb {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: center
}

.breadcrumbs .breadcrumb a {
	white-space: nowrap
}

.delete.icon {
	height: 2em
}

.breadcrumbs.panel {
	background-color: var(--bg)
}

.hamburger {
	stroke: var(--almostWhite)
}

.with-drop-shadow,
.shadow {
	filter: drop-shadow(3px 5px 4px var(--dropShadow))
}

.centered {
	text-align: center
}

.table {
	margin: 2em auto
}

.table th,
.table td {
	padding: .25em .5em
}

.xxlarge {
	font-size: 1.3em
}

.xlarge {
	font-size: 1.2em
}

.large {
	font-size: 1.1em
}

.small {
	font-size: .9em
}

.xsmall {
	font-size: .8em
}

.xxsmall {
	font-size: .7em
}

main {
	display: grid;
	grid-template-rows: auto;
	gap: var(--gap);
	justify-content: start;
	align-items: start;
	animation-duration: .4s;
	animation-name: entrance;
	animation-timing-function: ease-out
}

@keyframes entrance {
	0% {
		opacity: 0;
		margin-top: 100vh
	}

	98% {
		opacity: 0
	}

	99% {
		margin-top: 2em;
		opacity: .1
	}

	to {
		margin-top: 0;
		opacity: 1
	}
}

main.desktop {
	grid-template-columns: 1fr minmax(auto, var(--max-content)) 1fr;
	justify-content: center;
	align-items: start
}

main.desktop .breadcrumbs {
	grid-row: 1/2;
	grid-column: 1/4
}

main.desktop .pageTitle {
	grid-row: 2/3;
	grid-column: 1/4
}

main.desktop .pageBody {
	grid-column: 2/3
}

main.desktop .sidebar {
	display: none;
	grid-column: 1/2
}

main.desktop.hasChildren {
	grid-template-columns: minmax(25%, 30%) minmax(70%, var(--max-content))
}

main.desktop.hasChildren .breadcrumbs {
	grid-row: 1/2;
	grid-column: 1/3
}

main.desktop.hasChildren .sidebar {
	display: block;
	grid-column: 1/2
}

main.desktop.hasChildren .pageTitle {
	grid-row: 2/3;
	grid-column: 1/3
}

main.desktop.hasChildren .pageBody {
	grid-column: 2/3
}

main.mobile {
	grid-template-columns: 1fr 2em
}

main.mobile .breadcrumbs {
	grid-row: 1/2;
	grid-column: 1/3
}

main.mobile .pageBody {
	grid-column: 1/3
}

main.mobile .sidebar {
	display: none
}

main.mobile .pageTitle {
	grid-row: 2/3;
	grid-column: 1/3
}

main.mobile .pageBody {
	grid-column: 1/3
}

main.mobile.hasChildren {
	grid-template-columns: 1fr 2em
}

main.mobile.hasChildren .breadcrumbs {
	grid-row: 1/2;
	grid-column: 1/3
}

main.mobile.hasChildren .sidebar {
	align-self: center;
	display: block;
	grid-row: 2/3;
	grid-column: 2/3
}

main.mobile.hasChildren .pageTitle {
	grid-row: 2/3;
	grid-column: 1/2
}

main.mobile.hasChildren .pageBody {
	grid-column: 1/3
}

.pageBody h1,
.pageBody h2,
.pageBody .h1,
.pageBody .h2 {
	display: none
}

.page {
	display: grid;
	grid-template-columns: 1em 1fr;
	grid-template-rows: auto;
	gap: .6em;
	align-items: center;
	margin-bottom: .5em
}

.page .pawprint.icon {
	align-self: start;
	margin-top: .4em
}

.sidebar {
	display: grid;
	gap: .5em;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	justify-content: center;
	align-items: center
}

.sidebar .childPage {
	display: grid;
	gap: .5em;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto;
	justify-content: center;
	align-items: start
}

.sidebar .childPage .icon {
	margin-top: .3em
}

main img {
	display: block;
	margin: 1em auto 2em;
	width: unset;
	height: unset;
	max-height: 50vh
}

main img:is(:first-child) {
	margin-top: 0
}

.hamburger {
	cursor: pointer;
	stroke: var(--text)
}

.button.call-to-action {
	float: right;
	margin-left: 1em;
	margin-bottom: .5em;
	padding: 1.25em;
	font-size: 1.25em
}

.searchPage {
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: minmax(auto, var(--max-content));
	gap: var(--gap);
	justify-content: center;
	align-items: center;
	margin-top: 1em
}

.searchPage h2 {
	grid-row: 1/2
}

.searchPage form {
	grid-row: 2/3
}

.searchPage .results {
	grid-row: 3/4
}

.searchPage svg.results {
	opacity: .3
}

.results {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto;
	gap: var(--gap)
}

.game,
.grids {
	display: grid;
	gap: 0em;
	align-items: center;
	justify-content: center
}

.grids {
	grid-auto-flow: row
}

.grids .x,
.grids .o {
	background-size: contain;
	cursor: auto
}

.grids .x:hover,
.grids .o:hover {
	background-color: unset
}

.grids>* {
	border: 3px solid darkgrey;
	cursor: pointer;
	transition: background-color .3s
}

.grids>*:nth-child(-n+3) {
	border-top: unset
}

.grids>*:nth-last-child(-n+3) {
	border-bottom: unset
}

.grids>*:nth-child(3n) {
	border-right: unset
}

.grids>*:nth-child(3n+1) {
	border-left: unset
}

.info {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 3em
}

.info>* {
	margin: .5em
}

.info svg {
	width: 2em;
	height: 2em
}

.ticTacToe,
.info {
	font-size: 2.2em;
	text-align: center
}

main img {
	display: block;
	margin: 1em auto 2em;
	margin-top: 1em;
	width: unset;
	height: unset;
	max-height: unset;
}

.shadow,
.with-drop-shadow,
svg.WelcomeMarquee {
	filter: none;
}