:root {
	--ink: rgb(0, 0, 0);
	--ink: #000000;
	--ink_aa: rgba(0, 0, 0, .667);
	--ink_aa: #000000aa;
	--paper: rgb(255, 255, 255);
	--paper: #ffffff;
	--paper_aa: rgba(255, 255, 255, .667);
	--paper_aa: #ffffffaa;
	--pm_color_aa: rgba(0, 17, 255, .667);
	--pm_color_aa: #000FFFAA;
	--sc_color_aa: rgba(255, 238, 0, .667);
	--sc_color_aa: #FFF000AA;
	--pm_color: rgb(0, 15, 255);
	--pm_color: #000fff;
	--sc_color: rgb(255, 240, 0);
	--sc_color: #fff000;
	--ac_color: rgb(0, 221, 0);
	--ac_color: #00dd00;
	--trim_color: rgb(0, 85, 0);
	--trim_color: #005500;
	--grammar_color_aa: rgba(0, 170, 170, 0.667);
	--grammar_color_aa: #00aaaaaa;
	--error_color_aa: rgba(200, 69, 30, 0.667);
	--error_color_aa: #c9471eaa;
	color: var(--ink);
	font-size: 12pt;
}

* {
	font-family: arial, verdana;
	box-sizing: border-box;
	caret-color: var(--pm_color);
	scrollbar-color: var(--ac_color) var(--trim_color);
	overscroll-behavior: none;
	text-size-adjust: none;
}

:any-link {
	text-decoration: none;
	color: var(--pm_color);
}
:any-link::selection {
	background: var(--sc_color_aa);
}

::selection {
	background: var(--pm_color_aa);
	color: var(--sc_color);
}

::grammar-error {
	background: var(--grammar_color_aa);
}

.ack,
::valid {
	background: var(--ac_color);
}

.alert,
::invalid,
::spelling-error {
	background: var(--error_color_aa);
}

body,
main,
aside,
header,
footer,
.info_left,
.info_right,
.title,
#site_nav,
#site_nav * {
	padding: 0;
	margin: 0;
}

body {
	background-repeat: no-repeat;
	background-attachment: fixed;
	background-size: cover;
	height: 100vh;
	width: 100vw;
	overflow-y: auto;
	background-color: var(--pm_color);
	background-image: linear-gradient(var(--pm_color), var(--sc_color));
	overflow-x: hidden;
}

canvas,
figure,
iframe,
img,
map,
object,
video {
    border: none;
}

button,
select,
textarea,
input {
    border: .25ex inset var(--sc_color);
	padding: .5ex;
	min-width: 3rem;
	min-height: 3rem;
}

button,
select,
input[type=color],
input[type=image],
input[type=range] {
	background-color: var(--pm_color_aa);
	color: var(--sc_color);
}

button:focus,
input:focus,
select:focus,
textarea:focus {
	outline: 1pt solid var(--trim_color);
}

fieldset {
	border: .1ex dashed var(--sc_color);
	padding: 1ex;
	display: flex;
	flex-direction: column;
	columns: 1;
	overflow-x: hidden;
	height: auto;
	display: grid;
}

h1 {
    font-size: 34pt;
	margin: .5ex 0;
}

h2 {
    font-size: 30pt;
	color: var(--sc_color);
	margin: .4ex 0;
}

h3,
.title {
    font-size: 26pt;
	color: var(--pm_color);
	margin: .3ex 0;
}

h4 {
    font-size: 22pt;
	color: var(--sc_color);
	margin: .2ex 0;
}

h5 {
    font-size: 18pt;
	color: var(--pm_color);
	margin: .1ex 0;
}

h6 {
    font-size: 14pt;
	color: var(--sc_color);
	margin: 0;
}

header{
	display: flex;
	flex-direction: column;
	columns: 1;
	z-index: 100;
	width: 100%;
}
footer {
    padding: 1em;
    font-style: italic;
    font-size: 90%;
    background-color: var(--pm_color_aa);
}
#site_nav * {
	text-align: center;
	list-style: none;
	vertical-align: middle;
	flex: 1 5 auto;
}

#site_nav ul {
	width: 100%;
	position: absolute;
	display: flex;
	flex-direction: column;
	top: 99.9%;
	overflow-y: visible;
	justify-content: center;
	align-content: stretch;
	align-items: stretch;
	right: 0;
	columns: 1;
	z-index: 1000;
}

#site_nav>ul,
#site_nav li {
	position: relative;
	top: 0;
}

#site_nav li a {
    display: inline-block;
    width: 100%;
}

#site_nav summary>a {
    display: inline-block;
    width: auto;
}

#site_nav .level-parent summary::marker,
#site_nav .level-parent[aria-expanded=false] .child_level {
	display: none;
}

#site_nav ul:nth-child(2n + 1)>li:focus-within,
#site_nav ul:nth-child(2n + 1)>li:hover,
#site_nav ul:nth-child(2n)>li,
#site_nav ul:nth-child(2n)>.hed,
#site_nav ul:nth-child(2n + 1)>.hed:hover {
	border-bottom: .5ex dotted var(--sc_color);
}

#site_nav ul:nth-child(2n)>li:focus-within,
#site_nav ul:nth-child(2n)>li:hover,
#site_nav ul:nth-child(2n + 1)>li,
#site_nav ul:nth-child(2n + 1)>.hed,
#site_nav ul:nth-child(2n)>.hed:hover {
	border-bottom: .5ex dotted var(--pm_color);
}

#site_nav ul:nth-child(2n)>li:focus-within,
#site_nav ul:nth-child(2n)>li:hover,
#site_nav ul:nth-child(2n)>li:focus-within>a,
#site_nav ul:nth-child(2n)>li:hover>a,
#site_nav ul:nth-child(2n + 1)>li,
#site_nav ul:nth-child(2n + 1)>li>a,
#site_nav ul:nth-child(2n + 1)>li>details>summary,
#site_nav ul:nth-child(2n + 1)>li>details>summary>a,
#site_nav ul:nth-child(2n + 1)>li>details>summary:after,
#site_nav ul:nth-child(2n)>li>details:hover>summary,
#site_nav ul:nth-child(2n)>li>details[open]>summary,
#site_nav ul:nth-child(2n)>li>details:hover>summary>a,
#site_nav ul:nth-child(2n)>li>details[open]>summary>a,
#site_nav ul:nth-child(2n)>li>details:hover>summary:after,
#site_nav ul:nth-child(2n)>li>details[open]>summary:after {
	color: var(--pm_color);
	background-color: var(--sc_color);
}

#site_nav ul:nth-child(2n + 1)>li:focus-within,
#site_nav ul:nth-child(2n + 1)>li:hover,
#site_nav ul:nth-child(2n + 1)>li:focus-within>a,
#site_nav ul:nth-child(2n + 1)>li:hover>a,
#site_nav ul:nth-child(2n)>li,
#site_nav ul:nth-child(2n)>li>a,
#site_nav ul:nth-child(2n)>li>details>summary,
#site_nav ul:nth-child(2n)>li>details>summary>a,
#site_nav ul:nth-child(2n)>li>details>summary:after,
#site_nav ul:nth-child(2n + 1)>li>details:hover>summary,
#site_nav ul:nth-child(2n + 1)>li>details[open]>summary,
#site_nav ul:nth-child(2n + 1)>li>details:hover>summary>a,
#site_nav ul:nth-child(2n + 1)>li>details[open]>summary>a,
#site_nav ul:nth-child(2n + 1)>li>details:hover>summary:after,
#site_nav ul:nth-child(2n + 1)>li>details[open]>summary:after {
	color: var(--sc_color);
	background-color: var(--pm_color);
}

#site_nav ul>li>details>summary:after {
	content: "\25BC";
	display: inline-block;
}

#site_nav ul>li>details:hover>summary:after,
#site_nav ul>li>details[open]>summary:after {
	content: "\25B2";
}
#site_nav ul>li>a[aria-current=page] {
    background-color: var(--ac_color);
}
.controls *, .controls button, .controls input, .controls input[type="range"], .controls details, .controls summary, div[data-fullscreen=false] video {
	-trident-appearance: none;
	-khtml-appearance: none;
	-moz-appearance: none;
	-ms-appearance: none;
	-o-appearance: none;
	appearance: none;
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	border: none;
}
input[type="range"], button, summary {
	cursor: pointer;
}
.controls, .controls li, .menu, .menu li, .controls button, .controls details, .controls summary {
	list-style-type: none;
	text-align: center;
	vertical-align: middle;
	align-items: stretch;
	white-space: nowrap;
	text-overflow: ellipsis;
	width: 100%;
	height: 20pt;
}
.controls {
    width: 100vw;
	position: absolute;
	top: 0;
	left: 0;
	display: flex;
	flex-direction: row;
	z-index: 13647;
}
.menu {
    height: auto;
	width: 160pt;
	flex: 2 1 150pt;
}
.controls li, .menu li {
	height: 20pt;
	position: relative;
	width: 45pt;
	margin: 0 2pt;
	flex: 3 4 50pt;
}
.controls details {
	color: var(--sc_color);
}
.controls button, .controls summary {
	background-color: var(--pm_color);
}
.controls .timecontrolcontainer {
	width: 55%;
	width: calc(100% - calc(calc(calc(calc(45pt + 0.4pt) + 0.5%) * 5) + calc(4pt + 0.5%)));
	flex: 9 2 calc(100% - calc(calc(calc(calc(45pt + 0.4pt) + 0.5%) * 5) + calc(4pt + 0.5%)));
}
.controls .volume, .controls .speed {
	width: 70%;
	width: calc(100% - calc(calc(calc(calc(20pt + 0.40pt) + 4px) * 2) + calc(calc(0.4pt + 4px) + 1%)));
	flex: 3 1 calc(100% - calc(calc(calc(calc(20pt + 0.40pt) + 4px) * 2) + calc(calc(0.4pt + 4px) + 1%)));
}
input[type="range"] {
	-webkit-appearance: none;
	background-color: #ddd;
	position: absolute;
	top: 0;
	right: 0;
	color: var(--pm_color);
	height: 20pt;
	width: 100%;
	overflow: hidden;
}
/* Styling the track */
input[type="range"]::-webkit-slider-runnable-track {
	color: var(--sc_color);
	height: 20pt;
	background: #ddd;
	border: none;
	margin: 0;
}
input[type="range"]::-moz-range-track {
	color: var(--sc_color);
	height: 20pt;
	background: #ddd;
	border: none;
	margin: 0;
}
input[type="range"]::-ms-track {
	color: var(--sc_color);
	height: 20pt;
	background: #ddd;
	border: none;
	overflow: hidden;
	margin: 0;
}
/* Styling the thumb */
input[type="range"]::-webkit-slider-thumb {
	-webkit-appearance: none;
	box-shadow: -100vw 0 0 100vw var(--pm_color); /* 2 */
	background: var(--sc_color);
	height: 100%;
	border: 1pt solid var(--pm_color);
	aspect-ratio: 1/1;
}
input[type="range"]::-moz-range-thumb {
	-moz-appearance: none;
	box-shadow: -100vw 0 0 100vw var(--pm_color); /* 2 */
	background: var(--sc_color);
	height: calc(100% - 2pt, 100%);
	border-radius: 0;
	border: 1pt solid var(--pm_color);
	aspect-ratio: 1/1;
}
input[type="range"]::-ms-thumb {
	-ms-appearance: none;
	box-shadow: -100vw 0 0 100vw var(--pm_color); /* 2 */
	background: var(--sc_color);
	height: 100%;
	border: 1pt solid var(--pm_color);
	aspect-ratio: 1/1;
}
/* Styling the ticks */
input[type="range"]::-ms-ticks-after {
	display: none;
}
input[type="range"]::-ms-ticks-before {
	display: none;
}
input[type="range"]::-ms-tooltip {
	display: none;
}
input[type="range"]::-ms-fill-lower {
	background: var(--pm_color);
}
/* fullscreen */
html:-ms-fullscreen {
	width: 100%;
}
:-webkit-full-screen {
	background-color: transparent;
}
/* hide controls on fullscreen with WebKit */
div[data-fullscreen=true] video::-webkit-media-controls {
	display: none;
}
div[data-fullscreen=true] {
	width: 100%;
	height: 100%;
}
div[data-fullscreen=true], div[data-fullscreen=false] {
    display: flex;
    flex-direction:column;
	justify-content: space-around;
}
div[data-fullscreen=true] video, div[data-fullscreen=false] video {
	-webkit-appearance: none;
	justify-self: center;
	width: auto;
	max-height: 100vh;
	aspect-ratio: attr(width)/attr(height);
}
div[data-fullscreen=true] .controls {
	z-index: 13647;
	position: absolute;
	width: 100%;
	bottom: 2%;
}
.icon {
    margin: auto;
	display: block;
	vertical-align: middle;
	text-align: middle;
	line-height: 19pt;
	height: 100%;
	aspect-ratio: 1/1;
	stroke: var(--sc_color);
	color: var(--sc_color);
	stroke-width: 0.5pt;
	fill: var(--sc_color);
}
.controls details * details {
	position: relative;
}
.controls details * details div {
	background: var(--sc_color);
	z-index: 1326552;
	width: auto;
	height: auto;
	display: flex;
	flex-direction: row;
	position: absolute;
	padding: .5ex;
	right: 100%;
	bottom: -30%;
}
.controls details * details div li{
	position: relative;
	z-index: 1365325;
	background-color: var(--sc_color);
	display: inline-block;
	width: 24pt;
}

.switch {
	position: relative;
	display: inline-block;
	width: 5.2ex;
	height: 2.4ex;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	width: 4.8ex;
	height: 2ex;
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	background: var(--trim_color);
}

.slider:before {
	position: absolute;
	content: "";
	height: 1.7ex;
	width: 2.2ex;
	left: .1ex;
	bottom: .1ex;
	background: var(--paper);
}

input:checked+.slider {
	background: var(--ac_color);
}

input:focus+.slider,
input:hover+.slider {
	box-shadow: .1ex -.3ex .5ex #000002;
}

input:checked+.slider:before {
	-webkit-transform: translateX(2.4ex);
	-moz-transform: translateX(2.4ex);
	-ms-transform: translateX(2.4ex);
	-o-transform: translateX(2.4ex);
	transform: translateX(2.4ex);
}

.info_left,
.info_right {
	display: flex;
	flex-direction: column;
	column-gap: 1ex;
	width: auto;
	columns: 1;
	padding: .5ex 1ex;
	align-content: stretch;
}

.info_left>*,
.info_right>* {
	width: auto;
	flex: 1 5 auto;
}

.info_left> :first-child,
.info_right> :first-child {
	text-align: right;
	justify-content: flex-end;
}

.info_left> :last-child,
.info_right> :last-child {
	text-align: left;
	justify-content: flex-start;
}

.info_left>b,
.info_right>b,
.title {
	font-weight: bold;
	color: var(--pm_color);
}

.col_span_1 {
	grid-column: span 1;
}

.col_span_2 {
	grid-column: span 2;
}

.col_span_3 {
	grid-column: span 3;
}

.col_span_4 {
	grid-column: span 4;
}

.col_span_5 {
	grid-column: span 5;
}

.col_span_6 {
	grid-column: span 6;
}

.row_span_1 {
	grid-row: span 1;
}

.row_span_2 {
	grid-row: span 2;
}

.row_span_3 {
	grid-row: span 3;
}

.row_span_4 {
	grid-row: span 4;
}

.row_span_5 {
	grid-row: span 5;
}

.row_span_6 {
	grid-row: span 6;
}

a[href="#main_container"] {
	display: block;
	position: relative;
	height: 0;
	top: 1ex;
	left: 1ex;
	margin: 0;
	overflow-y: hidden;
	opacity: 0;
}

a[href="#main_container"]:focus {
	opacity: 1;
	overflow-y: visible;
}

#logo_top {
    display: none;
}

#info_top {
	grid-area: Info_top;
	text-align: center;
}

#social_top {
	grid-area: Social;
}

#info_top *,
#social_top * {
	display: inline;
	padding: .2ex;
	margin: 0;
}

.page_container {
	min-height: 100%;
	display: flex;
	margin: 0 auto;
	border: 1ex transparent;
	width: 98%;
	columns: 1;
	flex-direction: column;
	background-color: var(--paper);
	position: relative;
	align-content: stretch;
	align-items: stretch;
}

.left_container,
main,
.right_container {
	height: auto;
	width: auto;
	padding: .5ex .5em;
}

main {
	display: flex;
	flex-direction: column;
	flex: 5 1 60%;
	overflow-x: hidden;
	min-height: 98vh;
	overflow-y: visible;
	columns: 1;
	align-items: stretch;
	align-content: stretch;
	justify-content: flex-start;
}

.left_container,
.right_container {
	flex: 0 100 auto;
	min-width: 0;
	width: auto;
}

main.page_container {
	height: 100vh;
	margin: 0;
	padding: 0;
	width: 100vw;
	position: absolute;
	top: 0;
	right: 0;
	border: none;
	overflow-y: auto;
}

.left_container>form>fieldset,
.left_container>form>fieldset>div,
.right_container>fieldset,
.right_container>fieldset>div {
	align-content: stretch;
	flex-direction: column;
	display: flex;
	padding: .15ex;
	width: 100%;
	height: auto;
}
aside {
    margin: 0;
    padding: 0;
}
aside > * {
    margin: 0 1em;
}
aside img {
    display: none;
    padding: 0;
}
main > * {
    margin: 0 1em;
    display: flex;
    flex-direction: column;
    width: auto;
    height: auto;
    text-align: center;
    align-items: stretch;
    align-content: stretch;
    justify-content: center;
}
main > object {
    min-height: 30vmax;
}
form, form feildset{
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    gap: 2ex 4ex;
}

table>tbody>tr>td,
table>tbody>tr>th,
table>thead>tr>th {
	padding: 5pt;
	border-top: 0.25pt dotted var(--pm_color);
	border-bottom: 0.25pt dotted var(--pm_color);
	vertical-align: middle;
}

table>tbody>tr>th,
table>thead>tr>th {
	color: var(--sc_color);
}

table>tbody>tr>th[colspan] {
	background-color: var(--pm_color);
}

table>thead>tr>th[colspan] {
	color: var(--pm_color);
	background-color: var(--sc_color);
}

table>tbody>:nth-child(2n + 1),
table>tbody>tr:hover {
	background: #8c8c8c;
	background: rgba(139, 139, 139, .05);
	background: #8c8c8c0d;
}

table>tbody>:nth-child(2n) {
	background: #04228b;
	background: rgba(4, 34, 139, .05);
	background: #04228b0d;
}

table>thead>tr>th {
	font-weight: 600;
	color: var(--sc_color);
	background: var(--pm_color);
}

figure.card {
    position: relative;
    height: auto;
    max-height: 20em;
	display: flex;
	flex-direction: column;
	align-content: stretch;
	vertical-align: middle;
	align-items: stretch;
	columns: auto;
	overflow: hidden;
	justify-content: middle;
	flex-wrap: wrap;
}
figure.card * {
	align-items: stretch;
	align-content: stretch;
}
figure.card img {
	height: 100%;
	width: 100%;
	background-size: cover;
}

figure.card figcaption {
	z-index: 100;
	height: 100%;
	width: 100%;
	background: var(--ink_aa);
	color: var(--paper);
	background-size: cover;
	background-blend-mode: color;
	padding: 1em;
}

figure.card figcaption> * {
    height: 10ex;
    width: 100%;
	justify-content: center;
	text-overflow: ellipsis;
    overflow: hidden;
	word-break: normal;
	white-space: nowrap;
	word-wrap: break-word;
}
figure.card figcaption>h3 {
    height: 2ex;
	word-break: keep-all;
	white-space: nowrap;
	word-wrap: break-word;
}

figure.card figcaption>a {
    height: 2ex;
    align-self: flex-end;
	height: auto;
	background: var(--sc_color);
	word-break: keep-all;
	padding: .5ex;
	white-space: nowrap;
	word-wrap: break-word;
}

[face="Arial"] {
	font-family: Arial;
}

[face="Verdana"] {
	font-family: Verdana;
}

[face="Tahoma"] {
	font-family: Tahoma;
}

[face="Trebuchet MS"] {
	font-family: "Trebuchet MS" Monospace;
}

[face="Times New Roman"] {
	font-family: "Times New Roman";
}

[face="Georgia"] {
	font-family: Georgia;
}

[face="Garamond"] {
	font-family: Garamond;
}

[face="Courier New"] {
	font-family: "Courier New";
}

[face="Brush Script MT"] {
	font-family: "Brush Script MT";
}

.text_editor_container #Code_Editor,
.text_editor_container #Text_Editor,
.text_editor_containerHeader {
    border: .25ex inset var(--sc_color);
	width: 100%;
	overflow-y: auto;
	height: auto;
}

.text_editor_container #Code_Editor,
.text_editor_container #Text_Editor {
	height: 20rem;
	overflow-x: auto;
}

.text_editor_containerHeader .fontMenu,
.text_editor_containerHeader button,
.text_editor_containerHeader .fontStyle {
	vertical-align: middle;
	text-align: center;
	display: inline-block;
}

.text_editor_containerHeader button,
.text_editor_containerHeader .fontStyle {
	height: 100%;
}

.text_editor_containerHeader .fontMenu {
	border-style: dotted;
}

@media print {
	header,
	footer {
		display: none;
	}

	body {
		height: auto;
		overflow-y: visible;
	}
}

@supports (-trident-animation: sweep) or (-webkit-animation: sweep) or (-khtml-animation: sweep) or (-moz-animation: sweep) or (-ms-animation: sweep) or (-o-animation: sweep) or (animation: sweep) {
	details[open] summary~* {
		-trident-animation: sweep .4s ease-in-out;
		-webkit-animation: sweep .4s ease-in-out;
		-khtml-animation: sweep .4s ease-in-out;
		-moz-animation: sweep .4s ease-in-out;
		-ms-animation: sweep .4s ease-in-out;
		-o-animation: sweep .4s ease-in-out;
		animation: sweep .4s ease-in-out;
	}

	@keyframes sweep {
		from {
			opacity: 0;
			margin-left: -1ex;
		}

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

	@media (prefers-reduced-motion: reduced) {
		details[open] summary~* {
			-trident-animation-duration: .01s;
			-webkit-animation-duration: .01s;
			-khtml-animation-duration: .01s;
			-moz-animation-duration: .01s;
			-ms-animation-duration: .01s;
			-o-animation-duration: .01s;
			animation-duration: .01s;
		}
	}
}

@supports (-webkit-appearance: none) {

	::-webkit-scrollbar,
	::-webkit-scrollbar-track {
		width: 1ex;
		background-image: linear-gradient(var(--pm_color), var(--sc_color));
	}

	::-webkit-scrollbar-button,
	::-webkit-scrollbar-track-piece,
	::-webkit-scrollbar-button:horizontal,
	::-webkit-scrollbar-track-piece:horizontal {
		width: 0;
		height: 0;
		opacity: 0;
	}

	::-webkit-scrollbar-thumb {
		width: 1ex;
		background-image: linear-gradient(var(--sc_color), var(--pm_color));
	}

	::-webkit-scrollbar-thumb:horizontal {
		width: 3ex;
		background-image: linear-gradient(90deg, var(--sc_color), var(--pm_color));
	}

	::-webkit-scrollbar-corner,
	::-webkit-resizer {
		width: 1ex;
		height: 1ex;
		background-image: linear-gradient(225deg, var(--pm_color), var(--sc_color));
	}

	::-webkit-scrollbar:horizontal,
	::-webkit-scrollbar-track:horizontal {
		height: 1ex;
		background-image: linear-gradient(90deg, var(--pm_color), var(--sc_color));
	}
}

@supports (-trident-transition: all) or (-webkit-transition: all) or (-khtml-transition: all) or (-moz-transition: all) or (-ms-transition: all) or (-o-transition: all) or (transition: all) {

	.slider,
	.slider:before,
	.slider:focus,
	.slider:hover,
	#site_nav li,
	#site_nav li *,
	#site_nav li *:after,
	#site_nav li:hover *,
	#site_nav li:hover *:after,
	#fade_in>.page_container,
	#fade_out>.page_container,
	a[data=skip_header],
	a[data=skip_header]:focus,
	figure.card *~* {
		-trident-transition: all .4s ease;
		-webkit-transition: all .4s ease;
		-khtml-transition: all .4s ease;
		-moz-transition: all .4s ease;
		-ms-transition: all .4s ease;
		-o-transition: all .4s ease;
		transition: all .4s ease;
	}

	#fade_in>.page_container {
		opacity: 1;
	}

	#fade_out>.page_container,
	#fade>.page_container {
		opacity: 0;
	}

	@media (prefers-reduced-motion: reduced) {

		.slider,
		.slider:before,
		.slider:focus,
		.slider:hover,
		#site_nav li,
		#site_nav .level-parent summary:after,
		#site_nav .level-parent:hover summary:after,
		#site_nav .level-parent[open] summary:after,
		#site_nav .level-parent:hover summary a,
		#site_nav .level-parent[open] summary a,
		#site_nav .level-parent summary a,
		#fade_in>.page_container,
		#fade_out>.page_container {
			-trident-transition: all 0.01s ease;
			-webkit-transition: all 0.01s ease;
			-khtml-transition: all 0.01s ease;
			-moz-transition: all 0.01s ease;
			-ms-transition: all 0.01s ease;
			-o-transition: all 0.01s ease;
			transition: all 0.01s ease;
		}

		#fade_in>.page_container,
		#fade_out>.page_container,
		#fade>.page_container {
			opacity: 1;
		}
	}
}

@media (min-width: 600px) {
    form, form feildset{
        display: grid;
        grid-template-columns: auto 1fr;
        grid-template-rows: auto;
    }

    header {
    	display: grid;
    	grid-template-columns: auto 1fr;
    	grid-template-rows: auto;
    	grid-template-areas: "Logo_top Social"
    	    "Logo_top Info_top";
    	gap: 0ex 2ex;
    	height: 6em;
    }
    #info_top {
        grid-area: Info_top;
        text-align: left;
    }
    #logo_top {
        min-width: 20vw;
        display: block;
    	grid-area: Logo_top;
    	background-image: url(assets/images/logo.png);
    	background-repeat: no-repeat;
    	background-attachment: local;
    	background-size: contain;
    	background-position-y: center;
    	background-position-x: center;
    	position: relative;
    	width: 100%;
    	height: 100%;
    }
    
    #site_nav>ul {
        width: 100%;
    	flex-wrap: wrap;
    	flex-flow: wrap;
    	flex-direction: row;
    	columns: auto;
    	column-gap: 0;
    }
	div.page_container {
		width: 95%;
	}
    .info_left,
    .info_right {
	    flex-direction: row;
    	columns: 2;
    }
}
@media (min-width: 1024px) {
    header{
		grid-column: 1/4;
		grid-row: 1/2;
    	grid-template-columns: auto 1fr auto;
    	grid-template-areas: "Logo_top Info_top Social";
    }
    aside img {
        width: 100%;
        height: auto;
        vertical-align: baseline;
    }
    main > * {
    	gap: 2ex;
        display: grid;
    	grid-template-columns: 1fr 1fr;
    	grid-template-rows: auto;
    	padding: 0;
    	margin: 0;
        width: auto;
        height: auto;
        text-align: left;
    }
    figure.card img {
    	height: 100%;
    	width: 40%;
    	background-size: cover;
    }
    
    figure.card figcaption {
    	z-index: 100;
    	height: 100%;
    	width: 60%;
    	background: var(--ink_aa);
    	color: var(--paper);
    	background-size: cover;
    	background-blend-mode: color;
    	padding: 1em;
    }
    
    #site_nav {
		grid-column: 1/3;
		grid-row: 2/3;
    }
    aside.left_container {
        grid-column: 1/2;
        grid-row: auto;
        width: auto;
    }
    aside.right_container {
        grid-column: 2/3;
        grid-row: auto;
        width: auto;
        text-align: center;
    }
    main {
		grid-column: 2/3;
		grid-row: auto;
    }
    footer {
		grid-column: 1/3;
		grid-row: auto;
    }
	div.page_container {
		display: grid;
		width: 90%;
    	grid-template-columns: auto 6fr;
    	grid-template-rows: auto;
    	gap: 0;
	}
}
@media (min-width: 1920px) {
    
    #info_top {
        text-align: center;
    }
    
    #site_nav li {
        width: 100%;
    }
    #site_nav {
		grid-column: 1/2;
		grid-row: 2/3;
    }
    aside.left_container {
        grid-column: 1/2;
        grid-row: 2/5;
        background-color: var(--sc_color);
    }
    aside.right_container {
        grid-column: 3/4;
        grid-row: 2/auto;
    }
    main {
		grid-column: 2/3;
		grid-row: 2/auto;
    }
    footer {
		grid-column: 2/4;
		grid-row: auto;
    }
	div.page_container {
		width: 85%;
		display: grid;
    	grid-template-columns: 1fr 4fr 1fr;
    	grid-template-rows: auto;
	}
    figure.card {
        width: 100%;
    	columns: 2;
    }
}

@media screen and (prefers-color-scheme: dark), screen and (prefers-color-scheme: dark-mode) {
	:root {
		--ink: rgb(204, 153, 82);
		--ink: #cc9952;
		--ink_aa: rgb(204, 153, 82, .667);
		--ink_aa: #cc9204aa;
		--paper: rgb(34, 34, 34);
		--paper: #222222;
		--paper_aa: rgba(34, 34, 34, .667);
		--paper_aa: #222222aa;
		--pm_color_aa: rgba(0, 9, 138, 0.667);
		--pm_color_aa: #000888AA;
		--sc_color_aa: rgba(138, 129, 0, 0.667);
		--sc_color_aa: #888000AA;
		--pm_color: rgb(0, 9, 138);
		--pm_color: #000888;
		--sc_color: rgb(138, 129, 0);
		--sc_color: #888000;
		--ac_color: rgb(0, 85, 0);
		--ac_color: #005500;
		--trim_color: rgb(66, 53, 0);
		--trim_color: #423500;
		--grammar_color_aa: rgba(0, 170, 170, 0.667);
		--grammar_color_aa: #00aaaaaa;
		--error_color_aa: rgba(200, 69, 30, 0.667);
		--error_color_aa: #c9471eaa;
		color: var(--ink);
	}

	img,
	video,
	audio,
	canvas,
	object,
	iframe,
	#logo_top {
		opacity: 0.667 !important;
	}
}


@media screen and (prefers-color-scheme: light) {

	:root {
		--ink: rgb(80, 80, 80);
		--ink: #505050;
		--paper: rgb(255, 255, 255);
		--paper: #ffffff;
		--pm_color_aa: rgba(136, 136, 255, 0.667);
		--pm_color_aa: #8888FFAA;
		--sc_color_aa: rgba(255, 255, 136, 0.667);
		--sc_color_aa: #FFFF88AA;
		--pm_color: rgb(136, 136, 255);
		--pm_color: #8888ff;
		--sc_color: rgb(255, 255, 136);
		--sc_color: #ffff88;
		--ac_color: rgb(0, 255, 0);
		--ac_color: #00ff00;
		--trim_color: rgb(80, 136, 80);
		--trim_color: #508850;
		--grammar_color_aa: rgba(135, 255, 255, 0.667);
		--grammar_color_aa: #88FFFFaa;
		--error_color_aa: rgba(255, 80, 80, 0.667);
		--error_color_aa: #FF5050aa;
	}

	img,
	video,
	audio,
	canvas,
	object,
	iframe,
	#logo_top {
		--opacity: 0.667 !important;
	}
}