/* External Resources */

@import url('https://fonts.googleapis.com/css?family=Permanent+Marker&display=swap');
@import url('https://fonts.googleapis.com/css?family=Indie+Flower');
@import url('https://fonts.googleapis.com/css?family=Fredericka+the+Great&display=swap');

/* Global Options */

:root {
	color-scheme: light dark;
	
	--basic-space-x: 20px;
	--basic-space-y: 15px;
	--basic-space: 15px;
	
	--banner-bg: rgba(255, 255, 255, 0.7);
	--border-selected: 1px solid #3D803C;
	--border-unselected: 1px solid #DDD;
	--content-bg: #FFF;
	--content-child-bg: #FFF;
	--content-border-radius: 10px;
	--content-border: 1px solid rgba(0, 0, 0, 0.13);
	--content-child-border-radius: 7px;
	--content-selected-bg: #CAFFC9;
	--label0: black;
	--label1: black;
	--label2: gray;
	--label0-light: white;
	--label1-light: rgba(255, 255, 255, 0.45);
	--link-color: #3D803C;
	--mainlink-color: #0091FF;
	--altlink-color: #0091FF;
	--page-bg: #5CBF5A;
	--warning-bg: #FF554D;
	--info-bg: #16D9EB;
	--surveybox-bg: #D8EED3;
	--surveyalt-bg: #C4D1BF;
	--text-color: #000000;
	--red: rgb(255, 59, 48);
	--yellow: rgb(255, 204, 0);
	--yellow-bg: #FFFEC6;
	--green: #1bc942;
	--orange-bg: #F7C791;
	--red-bg: #F6CEC9;
	--feature-bg: #444444;
}

@media (prefers-color-scheme: dark) { :root {
	--banner-bg: rgba(0, 0, 0, 0.4);
	--border-selected: 1px solid #347c4a;
	--border-unselected: 1px solid #444;
	--clear: rgba(0, 0, 0, 0);
	--content-bg: #111;
	--content-child-bg: #222;
	--content-border-radius: 10px;
	--content-border: 1px solid rgba(255, 255, 255, 0.13);
	--content-child-border-radius: 7px;
	--content-selected-bg: #1e401e;
	--label0: white;
	--label1: rgba(255, 255, 255, 0.68);
	--label2: rgba(255, 255, 255, 0.31);
	--link-color: #2fc150;
	--mainlink-color: #0091FF;
	--altlink-color: #08369E;;
	--page-bg: #002600;
	--warning-bg: #6B0410;
	--info-bg: #087781;
	--surveybox-bg: #132612;
	--surveyalt-bg: #768C79;
	--text-color: #FFFFFF;
	--red: rgb(255, 59, 58);
	--yellow: rgb(255, 214, 10);
	--yellow-bg: #989862;
	--green: #247637;
	--orange-bg: #B17332;
	--red-bg: #C24885;
	--feature-bg: #CCCCCC;
} }

/* Element Styles */

html {
	background-color: var(--page-bg);
	font-family: -apple-system, sans-serif;
	color: var(--label0);
}

body {
	height: 100%;
	margin: 0;
	padding: var(--basic-space-y) var(--basic-space-x);
	margin: 0 auto;
	max-width: 680px;
}

body > * {
	/* outline: 1px solid red; */
	margin: 20px auto;
}

a {
	color: var(--mainlink-color);
}

p {
	line-height: 1.3em;
}

hr {
	border: var(--content-border);
	border-width: 0.5px;
}

h1, h2, h3, h4, input[type=submit], a.submitbutton {
	font-family: 'Permanent Marker', cursive;
}

h3.decline {
	font-family: 'Helvetica';
	font-weight: bold;
	font-size: 18pt;
}
a.decline {
	color: var(--text-color);
}


header {
	padding: 0 var(--basic-space-x);
}

header h1 {
	font-size: 2.2rem;
	margin: 0;
	color: var(--label0-light);
}

header h1 a {
	color: var(--label0-light);
	text-decoration: none;
}

header h2 {
	margin: 0;
	margin-top: -0.5em;
	color: var(--label1-light);
}

::backdrop { 
	background-image: linear-gradient(var(--content-bg), var(--content-child-bg) 50%);
	opacity: 0.75;
}     
dialog {                                                                                                                                                       
	text-align: center;
	margin-top: 15vh;
	padding: 1rem 3rem;
}
.highlighted {
	background-color: var(--yellow);
	color: black;
	border-radius: 4px;
	padding: 0 0.5ch;
	margin: 0 -0.25ch;
}

.errormsg {
	color: var(--red);
	font-weight: bold;
	font-size: 14pt;
	font-family: Helvetica;
}

/* Common Shadow/Border Styles */

section.banner,
section.decline,
.content,
#content,
dialog {
	border-radius: var(--content-border-radius);
	box-shadow: 0 5px 41px 0 rgba(0, 0, 0, 0.46);
	padding: var(--basic-space-y) var(--basic-space-x);
	border: 1px solid transparent;
}

section.banner > :first-child,
section.decline > :first-child,
.content > :first-child,
#content > :first-child,
dialog > :first-child {
	margin-top: 0;
}

section.banner > :last-child,
section.decline > :last-child,
.content > :last-child,
#content > :last-child,
dialog > :last-child {
	margin-bottom: calc(var(--basic-space-x) - var(--basic-space-y));
}

@media (prefers-color-scheme: dark) {
	section.banner,
	section.decline,
	.content,
	#content,
	dialog {
		border: var(--content-border);
	}
}

section.banner.info {
	box-shadow: 0 5px 35px 11px rgba(0, 213, 213, 0.36);
	background-color: var(--info-bg);
}

p.info {
	box-shadow: 0 5px 35px 11px rgba(0, 213, 213, 0.36);
	background-color: var(--info-bg);
}

section.banner.warning {
	box-shadow: 0 5px 35px 11px rgba(213, 0, 0, 0.36);
}

p.warning {
	box-shadow: 0 5px 35px 11px rgba(213, 0, 0, 0.36);
	background-color: var(--warning-bg);
}

.decline {
	background-color: var(--red);
}

/* Other */

.sidenote {
	font-size: 0.5em;
	display: block;
}

section.banner {
	background-color: var(--banner-bg);
}

section.banner.warning {
	background-color: var(--warning-bg);
}

section.banner.feature {
	background-color: var(--feature-bg);
}

section.banner h1 {
	margin-top: 0;
	margin-bottom: 0.5rem;
}

section.banner h1.sketch {
	font-family: 'Fredericka the Great', cursive;
	font-size: 48pt;
	text-align: center;
	text-transform: uppercase;
	margin-bottom: 1rem;
	margin-top: 0;
}

section.banner h1 + p {
	margin-top: 0.5rem;
}

/* Primary Content */
/* Prefer using class=content going forward, id=content is deprecated */

.content,
#content,
dialog {
	color: var(--label1);
	background-color: var(--content-bg);
}

@media (prefers-color-scheme: dark) { .content, #content, dialog {
	background-image: linear-gradient(var(--content-child-bg), var(--content-bg) 100px);
} }

.content h1,
#content h1 {
	color: var(--label0);
	margin: 0;
	line-height: 1em;
}

.content h2,
#content h2 {
	color: var(--label0);
	margin-top: calc(var(--basic-space-y) * 2);
	margin-bottom: calc(var(--basic-space-y) * 0.5);
}

.content h2 label,
#content h2 label {
	margin: 0;
	padding: 0;
}

.content p,
#content p {
	padding: 0;
}

.content form,
#content form {
	margin-left: calc(-1 * var(--basic-space-x));
	margin-right: calc(-1 * var(--basic-space-x));
	padding: 0 var(--basic-space-x);
}

.content form:last-child,
#content form:last-child {
	margin-bottom: calc(-1 * var(--basic-space-y));
}

/* Form Input Border Styles */

.text-input, .radio-group label, textarea, .checkbox-group {
	border-radius: var(--content-child-border-radius);
	border: var(--border-unselected);
	background-color: var(--content-child-bg);
}

.text-input {
	display: flex;
	flex-direction: column;
	margin: var(--basic-space-y) auto;
	padding: calc(var(--basic-space) - 5px) var(--basic-space) var(--basic-space) var(--basic-space);
	line-height: 1.5rem;
}

.text-input a {
	text-decoration: none;
}

.text-input span {
	font-size: 0.75rem;
}

.text-input input {
	border: none;
	outline: none;
	margin: 0;
	padding: 0;
	font-size: 1rem;
	background: none;
}

input[type=checkbox] {
	accent-color: var(--green);
    width: 1em;
    height: 1em;
}

.radio-group {
	display: grid;
	row-gap: var(--basic-space);
	column-gap: var(--basic-space);
}

.radio-group.one-col {
	grid-template-columns: repeat(1, 1fr);
}

.radio-group.two-col {
	grid-template-columns: repeat(2, 1fr);
}

.radio-group.three-col {
	grid-template-columns: repeat(3, 1fr);
}

.radio-group label {
	padding: var(--basic-space);
	line-height: 1.5rem;
	cursor: pointer;
	box-sizing: border-box;
}

.radio-group.one-col label {
	text-align: left;
}

.radio-group.two-col label {
	text-align: center;
}

.radio-group.three-col label {
	text-align: center;
}

.radio-group input[type=radio]:checked + label {
	background-color: var(--content-selected-bg);
	border: var(--border-selected);
	color: var(--label0);
}

.checkbox-group:has(input[type=checkbox]:checked) {
	background-color: var(--content-selected-bg);
	border: var(--border-selected);
	color: var(--label0);
}

.radio-group input[type=radio] {
	display: none;
}

.checkbox-group {
	padding: var(--basic-space);
	line-height: 1.5rem;
	cursor: pointer;
	box-sizing: border-box;
	font-size: 14pt;
	display: block;
	margin-top: 14px;
}

.checkbox-missing {
	background-color: var(--warning-bg);
}

.checkbox-group input[type=checkbox]:checked + label {
	background-color: var(--content-selected-bg);
	border: var(--border-selected);
	color: var(--label0);
}

input {
	color: var(--label0);
}

input::placeholder {
	color: var(--label2);
}

input[type=submit], input[type=button], input[type=reset] {
	border: none;
	outline: none;
	margin: 0;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}

textarea {
	width: 100%;
	box-sizing: border-box;
	height: 5em;
	padding: var(--basic-space);
	font-size: 1em;
}

input[type=submit],
.submitbutton {
	background: linear-gradient(#1bc942, #247637);
	display: block;
	box-sizing: border-box;
	border-radius: var(--content-child-border-radius);
	padding: 8px 25px;
	font-size: 1.2rem;
	font-weight: 600;
	color: white;
	cursor: pointer;
	text-shadow: rgba(0, 0, 0, 0.64) 0px -1px;
	margin: var(--basic-space-y) auto;
	width: 100%;
}

input[type=submit]:active,
.submitbuttom:active {
	background: linear-gradient(#006517, #1eae3f);
	text-shadow: rgba(0, 0, 0, 0.20) 0px -1px;
}

input[type=submit]:last-child,
input[type=submit].last-child,
.submitbuttom.last-child {
	margin-top: calc(2 * var(--basic-space-y));
	margin-bottom: var(--basic-space-x);
}

a.submitbutton {
	cursor: pointer;
	text-align: center;
}

footer {
	font-size: 0.75rem;
	color: var(--label0-light);
	padding: 0 var(--basic-space-x);
}

footer a {
	color: var(--label0-light);
}

@media only screen and (max-width: 600px) {
	:root {
		--basic-space-x: 10px;
		--basic-space-y: 10px;
		--basic-space: 10px;
	}
	
	header h1 {
		font-size: 2rem;
	}
}

.preview {
	margin: 0px;
	border: 3px;
	border-color: #000000;
	background: #ffff33;
	text-align: center;
	font-size: 18pt;
	font-family: Helvetica;
	color: #444;
}

.faqquestion {
	font-size: 1.25em;
	color: var(--link-color);
	font-weight: bold;
}

.faqquestion + p {
	margin-top: calc(-1 * var(--basic-space-y));
}

.privacynote {
	padding-top: 0;
	padding-left: var(--basic-space-x);
	padding-right: var(--basic-space-x);
	margin-top: calc(-0.5 * var(--basic-space-y));
	font-size: 0.75em;
}

input.text-input.forminputmissing {
	background-color: var(--warning-bg);
	padding: 5px;
}

textarea.text-input.forminputmissing {
	background-color: var(--warning-bg);
	padding: 5px;
}
.selectedSort {
	color: #FF8FF9;
}
#howhelpdetails {
	display: none;
}
#needhelpdetails {
	display: none;
}
.whitebox {
	padding: var(--basic-space-y) var(--basic-space-x);
	border: 1px solid #AAA;
	background-color: #FFF;
	color: #000;
}