*
{
	margin:0;
	padding:0;
	scrollbar-color:#194e4f80 #11324240;
	scrollbar-width:thin;
}

:root
{
	--background-header_footer-color:#2b323d;
	--background-color:#2e3540;
	--test:red;
}

body
{
	display:flex;
	flex-direction:column;
	align-content:center;
	text-align:center;
	background-color: var(--background-color);
	color:#f7e6c1;
	overflow-x:hidden;
}

header
{
	position: sticky;
    top: 0;
    z-index: 1;
    text-align: center;
    padding-top: 1.75rem;
    padding-bottom: 1.25rem;
    background-color: var(--background-header_footer-color);
    border-bottom: transparent 1px solid;
    border-radius: 0 0 7px 7px;
    filter: drop-shadow(0px 0px 0.35rem #12161d);
    cursor: default;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
}

h1
{
	font-family: 'Times New Roman', serif;
	margin-bottom:.75rem;
	white-space: nowrap;
	text-decoration:underline #e3d2ad;
	text-shadow:1px 1px .25rem #141a16;
}
h1 before, h1 after
{
	position: absolute;
	white-space: nowrap;
	transform-origin: center;
	rotate: 0deg;
	animation: rotate 25s infinite linear;
	animation-play-state: paused;
}
h1 before
{
	translate: -100% 16.5%;
}
h1 after
{
	translate: 0% 16.5%;
}
h1:hover before, h1:hover after
{
	animation-play-state: running;
}
header > pre
{
	margin-top:.75rem;
	color:#d9c79e;
	text-decoration:overline #b1a17e;
}

noscript
{
	z-index:5;
	margin:calc(7.5rem + 2vw) auto;
	font-size:calc(.55rem + (0.25vw + 0.25vh));
	color:#feb397;
	font-weight:700;
	cursor:default;
	user-select:none;
	-moz-user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
    transition:all .5s ease-out;
}
noscript > h1
{
	text-decoration-color: #d59076;
}

main
{
    text-align: center;
    width: 75vw;
    margin: 3em auto;
    flex: 1;
    position: absolute;
    right: 50%;
    top: 50%;
    transform: translate(50%, -50%);
    transition: all .5s ease-out;
}

main > span
{
	display:flex;
	flex-direction:row;
	align-items:stretch;
	flex-wrap:wrap;
	justify-content:center;
}

footer
{
    text-align: center;
    position: fixed;
    bottom: 0;
    right: 50%;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    z-index: 1;
    transform: translateX(50%);
    width: 100%;
    background-color: var(--background-header_footer-color);
    color: #d8caad;
	font-family: Georgia, sans-serif;
	font-size: clamp(1rem, 0.9641rem + 0.1795vw, 1.35rem);
    border-bottom: transparent 1px solid;
    border-radius: 7px 7px 0 0;
    filter: drop-shadow(0px 0px 0.35rem #12161d);
}

footer > *
{
	margin-bottom:.25rem;
}

fieldset
{
	margin:.5rem;
	padding:1rem;
	background-color:#3a4650;
	border:solid 2px #ac864f;
	border-radius:3px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align:center;
	box-shadow:1px 1px .25rem #141a16;
}

fieldset > *
{
	margin:.4rem;
}

legend
{
	margin:0;
	font-size:calc(1.25rem + (0.25vw + 0.25vh));
	transform:translateY(-2.5px);
	font-weight:700;
	font-family: Georgia, serif;
	white-space:nowrap!important;
	text-wrap:nowrap;
	text-shadow:1px 1px .25rem #141a16;
	transition:all .25s ease-out;
	z-index:0;
	user-select:none;
	-moz-user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
}

legend::before
{
	content:"\2027\16EB\2022\25CF\0020";
	font-size:calc(1rem + (0.25vw + 0.25vh));
	font-weight:700;
	white-space:nowrap!important;
	text-wrap:nowrap;
	transition:all .25s ease-out;
	z-index:0;
}

legend::after
{
	content:"\0020\25CF\2022\16EB\2027";
	font-size:calc(1rem + (0.25vw + 0.25vh));
	font-weight:700;
	white-space:nowrap!important;
	text-wrap:nowrap;
	transition:all .25s ease-out;
	z-index:0;
}
legend:hover, fieldset:hover legend, fieldset:has(a:focus) legend
{
	color:#d0b186;
}

fieldset a
{
	display:inline-flex;
	color:#d8c4a7;
	font-weight:700;
	text-decoration: none;
	font-size:calc(.75rem + (0.25vw + 0.25vh));
	filter: drop-shadow(2px 2px 0.15rem #293239);
}
fieldset a pre{
	padding: 3.5px;
	text-decoration:underline 1.45px transparent;
	transition:all .5s ease-out;
}

fieldset a::after
{
	content:"\00A0\00AB";
	display:inline-flex;
	align-items:center;
	justify-content:center;
	font-family:monospace;
	color:#c4a37a;
	font-size:calc(.75rem + (0.25vw + 0.25vh));
	font-weight:700;
	text-wrap:nowrap!important;
	white-space:nowrap!important;
	transform: translateX(2.75px);
	transition:all .25s ease-out;
}

fieldset a::before
{
	content:"\00BB\00A0";
	display:inline-flex;
	align-items:center;
	justify-content:center;
	font-family:monospace;
	color:#c4aa7a;
	font-size:calc(.75rem + (0.25vw + 0.25vh));
	font-weight:700;
	text-wrap:nowrap!important;
	white-space:nowrap!important;
	transform: translateX(-2.75px);
	transition:all .25s ease-out;
}

fieldset a:hover::before, fieldset a:focus::before
{
	transform: translateX(0.5px);
}
fieldset a:hover::after, fieldset a:focus::after
{
	transform: translateX(-0.5px);
}
fieldset a:hover pre,fieldset a:focus pre
{
	text-decoration-color:#d7c3a9;
	text-shadow: 2px 2px 0.25rem #293239;
}

fieldset a:active pre
{
	box-shadow: inset 0px 0px 0.5rem 0px rgba(28, 42, 49, 0.25);
}
fieldset a:active:before{
	transform: translateX(4.5px);
}
fieldset a:active::after{
	transform: translateX(-4.5px);
}
.new
{
	color:#ecd9ab;
}
.old
{
	color:#b4a595;
}
fieldset a.new::before, fieldset a.new::after{
	color:#edc388;
}
fieldset a.old::before, fieldset a.old::after{
	color:#997f5b;
}
fieldset a.new:hover pre,fieldset a.new:focus pre
{
	text-decoration-color:#ffda96;
}
fieldset a.old:hover pre,fieldset a.old:focus pre
{
	text-decoration-color:#a09281;
}

.owner
{
	cursor:default;
	user-select:none;
	-moz-user-select:none;
	-webkit-user-select:none;
	-ms-user-select:none;
}

.owner u
{
	cursor:progress;
}

/* Animation */
@keyframes rotate
{
	0% {
		transform: rotate(0deg);
		rotate: 0deg;
	}
	100% {
		transform: rotate(360deg);
		rotate: 360deg;
	}
}

/* Media Queries */
@media (max-width: 975px) {
	h1 before, h1 after, h1:hover before, h1:hover after{
		animation-play-state: paused;
	}
	main > span
	{
		flex-direction:column;
		align-items:center;
		flex-wrap:nowrap;
	}
}

@media (max-width: 645px) {
	*
	{
		scrollbar-width:none;
	}
}

@media (max-height: 550px) and (min-width: 976px) {
	header{
		padding-top: 1rem;
		padding-bottom: 0.75rem;
	}
	main
	{
		position: relative;
		right: 0;
		top: 0;
		transform: translate(0%, 0%);
	}
}

@media (max-height: 850px) and (max-width: 975px) {
	header{
		padding-top: 1rem;
		padding-bottom: 0.75rem;
	}
	main
	{
		position: relative;
		right: 0;
		top: 0;
		transform: translate(0%, 0%);
	}
}