@charset "utf-8";

html {
	--page-background: hsl(240, 10%, 20%);
	background: var(--page-background);
	--link-color: hsl(240, 20%, 50%);
	margin: 0;
}

body {
	background: white;
	text-align: center;
	color: black;
	font: 14px system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Verdana, sans-serif;
	margin: 0;
	padding: 0;
}

main {
	background: white;
	margin: 0;
	height: 100%;
	padding-bottom: 3em;
}

header {
}

h1 {
	margin-top: 0;
	color: #669;
	padding-top: .67em;
	text-shadow: 0px 0px 3px #3f3f3f;
	font: bold 72px system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	margin-bottom: .5em;
}

h2 {
	color: #666;
}

body#error {
	padding-top: 3em;
	font-size: 20px;
	font-weight: 600;
	color: hsl(0, 0%, 20%);
}

#error h1 {
	font-size: min(50vw, 240px);
	padding-top: 0;
	margin-bottom: 0;
	color: #900;
}

:link {
	color: var(--link-color);
}

:visited {
	color: #666;
}

:link:hover {
	color: #336;
}

:visited:hover {
	color: #333;
}

:link:active, :visited:active {
	color: #900;
}

.button:link img, .button:visited img {
	border-width: 3px;
	border-style: double;
}

#toc {
	margin: 20px auto;
	padding: 10px 0 30px;
	
}

#topborder {
	max-width: 500px;
	border-top: 1px solid #eee;	
	margin: 0 auto;
}

section, .section {
	font-size: 10px;
	margin: 10px 4px;
	padding: px 20px 10px;
	text-align: left;
}

section:target, section:hover, .section:target, .section:hover {
	border: 1px solid #eee;
	background: #f8f8f8;
	padding: 4px 19px 9px;
	border-radius: 4px;
}

section ul, .section ul {
	padding: 0;
	margin: 0;
	list-style-type: none;
}

section h2, .section h2 {
	font: bold 16px system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: var(--page-background);
	margin: 0;
	text-align: center;
	margin-bottom: .5em;
}

.segmentsection h2 {
	font: bold 16px system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif;
	color: #666;
	margin-top: 0;
}

.segmentsection div {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
}

form {
	text-align: left;
	margin: auto;
	width: 500px;
	display: grid;
	grid-template-columns: 80px auto;
	row-gap: 1em;
	font-size: 14px;
}

label {
	font-weight: bold;
	color: hsl(0, 0%, 30%);
	text-align: right;
	margin-right: 1ex;
	margin-top: .5ex;
	vertical-align: baseline;
}

input, textarea, select, option {
	vertical-align: baseline;
	font-size: 14px;
}

/* Safari 10.1+ hack */
@media not all and (min-resolution:.001dpcm) { @media {
	select {
		font-size: 16px;	
	}	
}}

input, textarea {
	background: white;
	padding: 2px;
	border: 1px solid hsl(0, 0%, 80%);
}

input.error, textarea.error {
	background-color: hsl(0, 50%, 95%);
	border: 1px solid hsl(0, 50%, 50%);
}

select {
	width: 150px;
}

.formbuttons {
	grid-column: 2;
	text-align: right;
}

input[type=submit] {
	background: var(--link-color);
	border-radius: 4px;
	border: 1px solid hsl(240, 20%, 40%);
	padding: 8px 24px;
	color: white;
	font-size: 18px;
	cursor: pointer;
	text-shadow: 0px 1px 0px hsla(0, 0%, 100%, .3);
	
	background: linear-gradient(to bottom, hsl(240, 20%, 60%) 0%, hsl(240, 20%, 58%) 5%,  hsl(240, 20%, 52%) 93%, hsl(240, 20%, 50%) 100%);
}

input[type=submit]:active {
	box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.25), inset 0 0 4px rgba(0, 0, 0, 0.25);
}

.required {
	color: hsl(0, 50%, 50%);
}

#errors {
	text-align: left;
	margin: auto;
	width: 400px;
}

/* presentation-only */

.colorcap {
	color: #669;
}

.notice {
	font-weight: bold;
	color: #c00 !important;
	text-decoration: blink underline;
}

footer {
	display: block;
	font: 12px system-ui, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
	color: hsl(0, 0%, 95%);
	padding-top: 20px;
	padding-bottom: .2em;
	margin: 1em 0 auto;
	line-height: 2em;
/* 	position: -webkit-sticky; */
	background: var(--page-background) linear-gradient(rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
	background-size: 100% 24px;
	background-repeat: no-repeat;
	background-position: top;
}

footer :link, footer :visited {
	color: #aaf;
}

footer :link:hover, footer :visited:hover {
	color: #669;	
}

/* SEGMENTS */

.button:link, .button:visited {
	font: 400 16px system-ui, -apple-system, BlinkMacSystemFont, 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	text-align: center;
	display: inline-block;
	padding: 16px 0;
	vertical-align: middle;
	background-color: #eee;
	background: linear-gradient(to bottom, hsl(0, 0%, 100%) 0%, hsl(0, 0%, 98%) 5%,  hsl(0, 0%, 95%) 93%, hsl(0, 0%, 90%) 100%);
	border: 1px solid hsla(0, 0%, 50%, 0.5);
	margin-right: 1ex;
	margin-left: 1ex;
	margin-bottom: 1em;
	min-width: 110px;
	vertical-align: middle;
	text-decoration: none;
	border-radius: 8px;
}

.button:active {
	color: #336;
	box-shadow: inset 0px 2px 2px rgba(0, 0, 0, 0.25), inset 0 0 4px rgba(0, 0, 0, 0.25);
}

.segmentsection {
	text-align: left;
	max-width: 500px;
	margin: 0 auto;
	margin-top: .5em;
}

h2 {
	text-align: center;
}

#erroricon {
	background-image: url(../images/error.png);
	background-image: image-set(url(../images/error.png) 1x, url(../images/error@2x.png) 2x);
	width: 234px;
	height: 205px;
	margin: auto;
}

@media screen and (max-width: 500px) {
	.segmentsection div {
		grid-template-columns: 1fr 1fr;
	}	
}

@media screen and (max-width: 320px) {
	.segmentsection div {
		grid-template-columns: 1fr;
	}	
}

@media screen and (max-height: 420px) {
	body#error {
		padding: 0;
	}

	#error main {
		height: 100vh;	
	}
	
	#error main p {
		margin: 0;
	}
}

@media screen and (max-height: 320px) {
	#error h1 {
		margin-bottom: -10vh;	
	}	
}