@font-face {
	font-family: 'A';
	src: url(/r.ttf);
	font-weight: normal;
}
@font-face {
	font-family: 'A';
	src: url(/b.ttf);
	font-weight: bold;
}
:root {
    --blue: #004e9b;
    --blueDark: #001b68;
    --accent: #f80;
    --accentDark: #c50;
	--gray: rgba(0, 0, 0, 0.5);
    --black: #000;
    --white: #f0f0f0;
    --realWhite: #fff;
    --shadow: rgba(0, 0, 0, 0.125);

	--themeColor: #ffb164;
	--themeColorLight: #ffe497;
}
*, ::after, ::before {
    outline: 0;
    border: 0;
    margin: 0;
    padding: 0;
    box-sizing: border-box;

	scrollbar-color: var(--blue) var(--white);
	scrollbar-width: thin;

    scroll-behavior: smooth;
    transition: all 0.125s;

    font-family: "A", -apple-system, BlinkMacSystemFont,
    "Segoe UI", system-ui, Roboto, Oxygen-Sans, Ubuntu, Cantarell,
    "Helvetica Neue", sans-serif;

    font-size: inherit;
    word-spacing: 0.25rem;
    line-height: 1.25;
    color-scheme: light;
    accent-color: var(--accent);
    /*user-select: none;*/
}
:active, :focus {
    outline: 0;
    -webkit-tap-highlight-color: transparent;
}
::selection {
    opacity: 1;
    background: var(--black);
    color: var(--white);
}
::placeholder {
    color: var(--black);
    opacity: 0.5;
}
::-webkit-scrollbar {
    width: 0.5rem;
    height: 0.5rem;
}
::-webkit-scrollbar-thumb { background: var(--white); }
::-webkit-scrollbar-track { background: var(--blue); }
html, body {
    width: 100%;
    height: 100%;
}
a {
    text-decoration: none;
    color: var(--black);
}
a[href]:hover, a[href]:active, a[href]:focus { opacity: 0.5; }
html { background-color: var(--white); }
body {
    overscroll-behavior: none;
    text-align: left;
    font-size: 1rem;
    text-shadow: 0 0.05rem 0.05rem var(--shadow);
    color: var(--black);
    overflow: hidden;
	overflow-y: auto;
}

ol, ul { list-style: none; }
header {
	margin-bottom: 0.5rem;
	padding: 0.5rem 1rem;
	display: flex;
}
h1 {
	line-height: 0 !important;
	position: relative;
}
#M input, #M label, nav {
	position: fixed;
	right: 0;
	top: 0;
}
[data-floating] > a {
	display: block !important;
	padding: 0.5rem 1rem;
	position: fixed;
	top: 0;
	left: -7rem;
	opacity: 0;
	animation: I 0.5s ease-out 0s normal forwards;
	line-height: 0;
}
[data-logo] img,
[data-floating] > [data-logo] img,
footer [data-logo] img {
	height: 2.5rem;
	filter: drop-shadow(0 0.05rem 0.05rem var(--shadow));
}
h1, [data-floating] > a { z-index: 3; }
[data-floating] label { padding: 0.925rem 1rem; }
 
#M input:checked ~ nav,
[data-floating] nav,
[data-floating] label,
[data-floating] > a { background: linear-gradient(to bottom, var(--white), var(--realWhite)); }

nav li a.A { color: var(--accentDark) !important; }
nav li a.B { color: var(--accent) !important; }
nav li a.A:hover::after, nav li a.A:focus::after, nav li a.A:active::after { animation-play-state: paused; }
@keyframes I {
	to {
		left: 0;
		opacity: 1;
	}
}
@media screen and (max-width: 640px), (max-width: 960px) {
	#M label, #M label b { cursor: pointer; }
	#M input, #M label { display: none; }
	nav, #M ol {
		display: flex;
		flex-flow: row;
	}
	#M ol { align-self: center; }
	#M li { margin-right: 1.5rem; }
	#M li:last-child { margin: 0 !important; }
	#M a b { color: var(--accent); }
	#M > a { display: none; }
	nav {
		justify-content: center;
		display: block;
		width: 5rem;
		height: 5rem;
		overflow: hidden;
		z-index: 1;
		display: none;
		animation: E 0.25s ease-in-out 0s normal 1 forwards;
	}
	nav, nav li { opacity: 0; }
	nav li { animation: F 0.25s ease-in-out 0.125s normal 1 forwards; }
	nav li:last-child { margin-bottom: 0; }
	nav li a {
		display: block;
		padding: 0.5rem 0 0.25rem 0;
		box-shadow: 0 0 0.5rem var(--realWhite);
	}
	nav li a:hover, nav li a:focus, nav li a:active, nav li a.A, nav li a.B {
		transform: scale(1.125);
		background: linear-gradient(to left, transparent, var(--realWhite), transparent);
		box-shadow: 0 0 0.5rem var(--realWhite);
	}
	nav li a.A { background: linear-gradient(to left, transparent, var(--realWhite), transparent); }
	nav li a.A, nav li a.B { font-weight: bold; }
	nav li a::after {
		content: '';
		display: block;
		margin-top: 0.25rem;
		width: 50%;
		height: 0.15rem;
		position: relative;
		transform: rotate3d(0, 0, 1, 90deg);
		left: -25%;
		opacity: 0;
	}
	nav li a:hover::after, nav li a:focus::after, nav li a:active::after, nav li a.A::after {
		filter: drop-shadow(0 0.05rem 0.05rem var(--shadow));
		background: linear-gradient(to right, var(--accentDark), transparent);
		transform: rotate3d(0, 0, 0, 0deg);
		left: 0;
		opacity: 1;
		transition: all 0.25s;
		animation: H 0.4s ease-in-out 0.125s alternate infinite;
	}
	@keyframes H {
		to {
			left: 50%;
			background: linear-gradient(to right, transparent, var(--accent));
		}
	}
	@keyframes F { to { opacity: 1; } }
	@keyframes E {
		to {
			width: 66%;
			height: 100vh;
			opacity: 1;
		}
	}
	#M input, #M label { display: block; }
	#M input { visibility: hidden; }
	#M label {
		z-index: 2;
		padding: 0.925rem 1rem;
	}
	#M label b {
		position: relative;
		display: block;
		width: 1.75rem;
		height: 0.375rem;
		border-radius: 0.25rem;
		background: var(--blue);
		filter: drop-shadow(0 0.05rem 0.05rem var(--shadow));
	}
	#M label b:first-child, #M label b:first-child + b, nav li { margin-bottom: 0.25rem; }
	#M input:checked + label { background: transparent !important; }
	#M input:checked + label b:first-child {
		transform: rotate(45deg);
		top: 0.625rem;
	}
	#M input:checked + label b:first-child + b { opacity: 0; }
	#M input:checked + label b:last-child {
		top: -0.625rem;
		transform: rotate(-45deg);
	}
	#M input:checked ~ nav { display: block; }
	#M ol {
		flex-flow: column;
		height: 100%;
		justify-content: center;
		text-align: center;
	}
	#M li { margin-right: 0; }
	#M label:hover b, #M label:active b, #M label:focus b { opacity: 0.5; }
}

@media screen and (max-width: 640px){
	#M > a { display: none; }
	@keyframes E {
		to {
			width: 100%;
			height: 100vh;
			opacity: 1;
		}
	}
}

@media screen and (min-width: 961px){
	#M > input, #M label { display: none; }
	#M:not([data-floating]) > a { display: none !important; }
	#M nav ol {
		padding: 1rem 0.5rem;
		display: flex;
		overflow: hidden;
		justify-content: flex-end;
	}
	#M nav li {
		align-self: center;
		font-weight: bold;
		padding-right: 0.5rem;
	}
	nav li { padding-right: 0.5rem; }
	nav li:last-child { padding-right: 0; }
	#M nav a {
		display: inline-block;
		padding: 0 0.5rem;
		position: relative;
	}
	#M nav a.A, [data-floating] nav a.A {
		top: 0.15rem;
		padding: 0 0.75rem;
	}
	#M nav a.A::after, [data-floating] nav a.A::after  {
		content: '';
		display: block;
		height: 0.15rem;
		margin-top: 0.15rem;
		filter: drop-shadow(0 0.05rem 0.05rem var(--shadow));
		background: linear-gradient(to right, var(--accentDark), transparent);
		transform: rotate3d(0, 0, 0, 0deg);
		position: relative;
		left: -10%;
		opacity: 1;
		transition: all 0.25s;
		animation: H 0.4s ease-in-out 0.125s alternate infinite;
	}
	@keyframes H {
		to {
			left: 10%;
			background: linear-gradient(to right, transparent, var(--accent));
		}
	}
	#M nav a.A, #M nav a:hover, #M nav a:active, #M nav a:focus { transform: scale(1.1); }
	#M nav a:hover::after, #M nav a:hover::after, #M nav a:active::after, #M nav a:focus::after,
	[data-floating] nav a:hover::after, [data-floating] nav a:hover::after, [data-floating] nav a:active::after, [data-floating] nav a:focus::after {
		background: var(--accent);
		animation-play-state: paused;
	}
}

footer { 
	padding: 1rem;
	background: var(--shadow);
	margin-top: 3rem;
}
footer, footer section { 
	display: flex;
	flex-wrap: wrap;
}
footer > div { width: 25%; }
footer > div:last-child { width: 50%; }
footer [data-logo] {
	display: block;
	line-height: 0;
}
footer p, footer ul, footer section > a:first-child { margin-top: 1rem; }
footer h5, footer h5 a { color: var(--blue); }
footer section > * { align-self: center; }
footer section > a:first-child img {
	width: 5rem;
	height: 5rem;
	border-radius: 50%;
	object-fit: cover;
}
footer section li img {
	height: 1.5rem;
	vertical-align: middle;
	margin-right: 0.5rem;
}
footer section > a:first-child, footer section p { margin-right: 1rem; }
footer section li:first-child { margin-bottom: 0.5rem; }
@media screen and (max-width: 640px), (max-width: 960px) {
	footer > div { width: 50%; }
	footer > div:last-child {
		width: 100% !important;
		margin-top: 1rem;
	}
}

@media (prefers-color-scheme: dark) {
	:root {
		--gray: rgba(255, 255, 255, 0.5);
		--shadow: rgba(255, 255, 255, 0.125);
	}
    *, ::after, ::before { color-scheme: dark; }
    ::selection {
        opacity: 1;
        background: var(--white);
        color: var(--black);
    }
    html { background-color: var(--blueDark); }
    body {
        color: var(--white);
        text-shadow: 0 0.05rem 0.05rem var(--shadow);
    }
    ::placeholder {
        color: var(--white);
        opacity: 0.5;
    }
	a, a[href]:hover, a[href]:active, a[href]:focus { color: var(--white); }
	footer { background: var(--shadow); }

	[data-logo] img, #M label b { filter: invert() drop-shadow(0 0.05rem 0.05rem var(--shadow)) !important; }
	footer h5, footer h5 a { color: var(--themeColor); }

	#M input:checked ~ nav,
	[data-floating] nav,
	[data-floating] label,
	[data-floating] > a { background: linear-gradient(to bottom, var(--blueDark), var(--blue)); }

	#M input:checked ~ nav li a { box-shadow: 0 0 0.5rem var(--blue); }
	#M input:checked ~ nav li a:hover, 
	#M input:checked ~ nav li a:focus,
	#M input:checked ~ nav li a:active,
	#M input:checked ~ nav li a.A,
	#M input:checked ~ nav li a.B {
		background: linear-gradient(to left, transparent, var(--blue), transparent);
		box-shadow: 0 0 0.5rem var(--blue);
	}
	#M input:checked ~ nav li a.A { background: linear-gradient(to left, transparent, var(--blue), transparent); }

	nav li a.A { color: var(--themeColor) !important; }
	nav li a.B { color: var(--accent) !important; }

	#M nav a.A::after, [data-floating] nav a.A::after,
	nav li a:hover::after, nav li a:focus::after, nav li a:active::after, nav li a.A::after { background: linear-gradient(to right, var(--themeColor), transparent); }

	footer [data-logo] img { filter: drop-shadow(0 0.05rem 0.05rem var(--shadow)); }
	footer section li img { filter: invert(); }
}