@keyframes keyframes-background-color
{
	0%
	{
		background-color: rgb(192, 192, 64);
	}
	16.66%
	{
		background-color: rgb(255, 128, 64);
	}
	33.33%
	{
		background-color: rgb(255, 64, 64);
	}
	50%
	{
		background-color: rgb(128, 64, 255);
	}
	66.66%
	{
		background-color: rgb(64, 64, 255);
	}
	83.33%
	{
		background-color: rgb(64, 192, 64);
	}
	100%
	{
		background-color: rgb(192, 192, 64);
	}
}
@keyframes keyframes-color
{
	0%
	{
		color: rgb(192, 192, 64);
	}
	16.66%
	{
		color: rgb(255, 128, 64);
	}
	33.33%
	{
		color: rgb(255, 64, 64);
	}
	50%
	{
		color: rgb(128, 64, 255);
	}
	66.66%
	{
		color: rgb(64, 64, 255);
	}
	83.33%
	{
		color: rgb(64, 192, 64);
	}
	100%
	{
		color: rgb(192, 192, 64);
	}
}
@keyframes keyframes-color-off
{
	0%
	{
		color: rgb(0, 0, 0);
	}
	100%
	{
		color: rgba(0, 0, 0, 0.5);
	}
}
@keyframes keyframes-color-on
{
	0%
	{
		color: rgba(0, 0, 0, 0.5);
	}
	100%
	{
		color: rgb(0, 0, 0);
	}
}
*
{
	border: 0;
	font-family: sans-serif;
	font-size: 16px;
	margin: 0;
	padding: 0;
}
a
{
	cursor: pointer;
	text-decoration: none;
}
h1
{
	background-color: rgb(0, 0, 0);
	color: rgb(255, 255, 255);
	font-size: 32px;
	padding: 16px;
}
h2
{
	background-color: rgb(0, 0, 0);
	margin: 16px;
	padding: 16px;
}
h2 a
{
	color: rgb(255, 255, 255);
	font-size: 24px;
}
h2 + .section
{
	margin: 16px 32px;
}
h2 ~ .section + .section
{
	margin: 16px 32px;
}
h3
{
	font-size: 24px;
	margin: 16px 32px;
}
h3 + .section
{
	margin: 16px 48px;
}
h3 ~ .section + .section
{
	margin: 16px 48px;
}
h4
{
	margin: 16px 48px;
}
h4 + .section
{
	margin: 16px 64px;
}
h4 ~ .section + .section
{
	margin: 16px 64px;
}
h5
{
	margin: 16px 64px;
}
h5 + .section
{
	margin: 16px 80px;
}
h5 ~ .section + .section
{
	margin: 16px 80px;
}
img
{
	filter: grayscale(1);
	transition-duration: 1s;
	vertical-align: middle;
}
img:hover
{
	filter: grayscale(0);
}
input
{
	background-color: rgba(255, 255, 255, 0.9);
	cursor: pointer;
	height: 100%;
	outline: 0;
	padding: 8px;
	transition-duration: 1s;
	width: 100%;
}
input:hover
{
	background-color: rgb(0, 0, 0);
	color: rgb(255, 255, 255);
}
ol
{
	margin: 16px;
}
ol pre
{
	margin: 16px 0;
}
ol table
{
	margin: 16px 0;
}
ol + p
{
	margin-top: 16px;
}
p + pre
{
	margin-top: 16px;
}
p + table
{
	margin-top: 16px;
}
p + ul
{
	margin-top: 16px;
}
pre
{
	background-color: rgba(255, 255, 255, 0.9);
	box-sizing: border-box;
	font-family: courier, monospace;
	overflow: auto;
	padding: 8px;
	white-space: pre-wrap;
}
pre + p
{
	margin-top: 16px;
}
pre + table
{
	margin-top: 16px;
}
select
{
	appearance: none;
	cursor: pointer;
	outline: 0;
	padding: 8px;
	transition-duration: 1s;
	width: 25%;
}
select:hover
{
	background-color: rgb(0, 0, 0);
	color: rgb(255, 255, 255);
}
table
{
	border-collapse: collapse;
	width: 100%;
}
div table:nth-child(1)
{
	table-layout: fixed;
}
table + p
{
	margin-top: 16px;
}
tr:nth-child(2n) td
{
	background-color: rgba(255, 255, 255, 0.9);
}
th, td
{
	box-sizing: border-box;
	padding: 8px;
}
th
{
	text-align: left;
}
th input
{
	background-color: rgb(0, 0, 0);
	color: rgb(255, 255, 255);
}
th input:hover
{
	background-color: rgba(255, 255, 255, 0.9);
	color: rgb(0, 0, 0);
}
th:nth-child(2):nth-last-child(1)
{
	width: 50%;
}
th:nth-child(2):nth-last-child(2)
{
	width: 33.33%;
}
th:nth-child(3):nth-last-child(1)
{
	width: 33.33%;
}
td
{
	border-color: rgba(0, 0, 0, 0.1);
	border-style: solid;
	border-width: 1px;
}
textarea
{
	background-color: rgba(255, 255, 255, 0.9);
	box-sizing: border-box;
	display: block;
	font-family: courier, monospace;
	outline: 0;
	padding: 8px;
	resize: none;
	width: 100%;
}
ul
{
	list-style-type: square;
	padding-left: 16px;
}
::selection
{
	background-color: rgb(0, 0, 0);
	color: rgb(255, 255, 255);
}
body
{
	overflow-y: scroll;
}
#background
{
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: -1;
	animation-duration: 360s;
	animation-iteration-count: infinite;
	animation-name: keyframes-background-color;
	animation-timing-function: linear;
	background-image: url(/assets/svg/Background.svg), radial-gradient(rgba(0, 0, 0, 0), rgb(0, 0, 0));
	background-position: center;
	background-repeat: no-repeat;
}
#foreground-header
{
	height: calc(16px + 72px + 16px);
	left: 0;
	position: fixed;
	top: 0;
	transition-duration: 1s;
	vertical-align: middle;
	width: 100%;
	z-index: 1;
}
#foreground-header #home
{
	left: calc((100% - 72px) / 2);
	opacity: 0.5;
	position: fixed;
	top: 16px;
	transition-duration: 1s;
}
#foreground-header #home:hover
{
	opacity: 1;
	transform: rotate(360deg);
}
#foreground-header #menu
{
	left: 16px;
	opacity: 0.5;
	position: fixed;
	top: calc(16px + ((72px - 40px) / 2));
	transition-duration: 1s;
}
#foreground-header #menu:hover
{
	cursor: pointer;
	opacity: 1;
}
#foreground-header #search-site
{
	background-color: rgba(0, 0, 0, 0);
	background-image: url(/assets/svg/Search.svg);
	background-position: right;
	background-repeat: no-repeat;
	color: rgba(0, 0, 0, 0);
	height: 48px;
	opacity: 0.5;
	position: fixed;
	right: 16px;
	top: calc(16px + ((72px - 48px) / 2));
	transition-duration: 1s;
	width: calc(((100% - 72px) / 2) - 16px - 16px);
}
#foreground-header #search-site:hover
{
	background-color: rgb(255, 255, 255);
	color: rgb(0, 0, 0);
	opacity: 1;
}
#foreground-header #search-site:focus
{
	background-color: rgb(255, 255, 255);
	color: rgb(0, 0, 0);
	opacity: 1;
}
#foreground-footer
{
	opacity: 0;
	transition-duration: 1s;
	z-index: 1;
}
#foreground-footer #top
{
	bottom: 16px;
	opacity: 0.5;
	position: fixed;
	right: 16px;
	transition-duration: 1s;
}
#foreground-footer #top:hover
{
	opacity: 1;
}
header
{
	margin: calc(16px + 72px + 16px) 16px 0;
}
header .breadcrumb
{
	background-color: rgb(0, 0, 0);
	color: rgb(255, 255, 255);
	padding: 0 16px 16px;
}
header .breadcrumb a
{
	animation-name: none;
	color: rgba(255, 255, 255, 0.5);
	transition-duration: 1s;
}
header .breadcrumb a:hover
{
	animation-name: none;
	color: rgb(255, 255, 255);
}
footer
{
	margin: 0 16px 16px;
}
footer .boilerplate
{
	background-color: rgb(0, 0, 0);
	color: rgb(255, 255, 255);
	padding: 16px 16px 0;
	text-align: center;
}
footer .boilerplate a
{
	animation-name: none;
	color: rgba(255, 255, 255, 0.5);
	transition-duration: 1s;
}
footer .boilerplate a:hover
{
	animation-name: none;
	color: rgb(255, 255, 255);
}
footer #copyright
{
	background-color: rgb(0, 0, 0);
	color: rgb(255, 255, 255);
	padding: 16px;
	text-align: center;
}
nav
{
	backdrop-filter: blur(16px);
	background-color: rgba(0, 0, 0, 0.5);
	content-visibility: hidden;
	margin: 0 16px;
	overflow-x: hidden;
}
nav a
{
	color: rgba(255, 255, 255, 0.5);
	display: block;
	font-size: 24px;
	transition-duration: 1s;
}
nav a:hover
{
	color: rgb(255, 255, 255);
}
nav h1, nav h2, nav h3, nav h4
{
	color: rgb(255, 255, 255);
	font-size: 24px;
}
nav h3
{
	margin: 16px;
}
nav h3 ~ .section
{
	margin: 16px 32px;
}
nav h4
{
	margin: 16px;
}
nav h4 ~ .section
{
	margin: 16px 32px;
}
nav .nav-h1
{
	background-color: rgb(0, 0, 0);
	margin: 0;
	padding: 16px;
	position: sticky;
	text-align: center;
	top: 0;
}
nav .nav-h2
{
	background-color: rgba(0, 0, 0, 0.5);
	margin: 0;
	padding: 16px;
	position: sticky;
	text-align: center;
	top: 0;
}
nav .nav-h3
{
	background-color: rgba(0, 0, 0, 0.25);
	margin: 0;
	padding: 16px;
	position: sticky;
	text-align: center;
	top: 0;
}
nav .nav-content a
{
	display: block;
}
main .nav-content a
{
	display: block;
}
main
{
	background-color: rgba(255, 255, 255, 0.9);
	margin: 0 16px;
	overflow-x: hidden;
}
main :not(h2) a
{
	animation-duration: 1s, 360s;
	animation-iteration-count: 1, infinite;
	animation-name: keyframes-color-off, keyframes-color;
	animation-timing-function: ease, linear;
}
main :not(h2) a:hover
{
	animation-fill-mode: forwards, none;
	animation-iteration-count: 1, 0;
	animation-name: keyframes-color-on, keyframes-color;
	color: rgb(0, 0, 0);
}
main .editor1 form
{
	float: left;
	height: 480px;
	width: 50%;
}
main .editor1 form input
{
	float: left;
	height: 32px;
	width: 50%;
}
main .editor1 form textarea
{
	height: calc(100% - 32px);
}
main .editor1 iframe
{
	height: 480px;
	width: 50%;
}
main .editor2
{
	height: calc(100vh - 16px - 72px - 16px - 16px);
}
main .editor2 form
{
	float: left;
	height: 100%;
	width: 50%;
}
main .editor2 form input
{
	height: 32px;
}
main .editor2 form textarea
{
	height: calc(100% - 32px);
}
main .editor2 iframe
{
	float: left;
	height: 100%;
	width: 50%;
}
main .editor3 iframe
{
	height: 480px;
	width: 33.33%;
}
main .editor3 pre
{
	float: left;
	height: 480px;
	width: 33.33%;
}
main .editor3 pre:nth-of-type(2)
{
	background-color: rgba(255, 255, 255, 0.45);
}
#unity-canvas
{
	background-color: rgb(0, 0, 0);
	height: 100%;
	width: 100%;
}
#unity-progress-bar-full
{
	background-color: rgb(255, 255, 255);
	height: 16px;
	margin-top: -16px;
	position: relative;
	top: -3px;
	width: 0;
}
.button
{
	background-color: rgb(0, 0, 0);
	color: rgb(255, 255, 255);
}
.button:hover
{
	background-color: rgb(255, 255, 255);
	color: rgb(0, 0, 0);
}
.margin-top
{
	margin-top: 16px;
}
.marginTop
{
	margin-top: 16px;
}
.section
{
	margin: 16px;
}