:root {
	--c-bg-1: #000;
	--c-bg-2: #060;
	--c-bg-m: #0F04;
	--c-b: #080;
	--c-text: #FFF;
	--top-border-col-l: #0F0;
	--top-height: 33vh;
	--top-border-width-l: 2vh;
	--top-border-width-s: .5vh;
}

html {
	overflow: hidden;
	background: linear-gradient(var(--c-bg-1), var(--c-bg-2));
}

body {
	background: url(/style/media/6-leaf-pattern-5-dark.png);
	background-size: 50vh;
	background-color: #0000;
	background-attachment: fixed;
	margin: 0;
	color: white;
	font-family: Right;
	overflow: hidden;
	height: 100vh;
	text-align: center;
}

body.noani * {
	transition-duration: 0ms !important;
	transition-delay: 0ms !important;
}

header {
	height: var(--top-height);
	width: 100%;
	position: absolute;
	top: calc(-1 * var(--top-height));
	z-index: 4;
	border-bottom: var(--top-border-width-l) solid var(--c-b);
	margin-bottom: 0;
	background: linear-gradient(to top, var(--c-bg-m), #000a 10%, black);
	backdrop-filter: blur(3px);
	transition-property: border, top;
	transition-duration: 500ms;
	transition-timing-function: ease-in-out;
}

header:hover {
	top: 0;
	border-bottom: var(--top-border-width-s) solid var(--top-border-col-l);
	transition-timing-function: ease-in-out;
}

header.hidden {
	top: calc(-1 * var(--top-height));
}

#menu {
	display: grid;
	grid-template-columns: auto auto auto;
	font-size: var(--f-size-1);
	color: #0F0;
	align-items: start;
}

.label {
	position: absolute;
	bottom: -2.5em;
	left: 50%;
	transform: translateX(-50%);
	z-index: 50;
	background: #FFF;
	border: var(--top-border-width-s) solid var(--c-b);
	border-radius: 0 0 2vh 2vh;
	padding: 0 1ch;
	color: black;
	border-top-width: 0;
	transition-property: border, border-radius, bottom;
	transition-duration: 500ms;
	transition-timing-function: ease-in-out;
}

header:not(.hidden):hover .label {
	bottom: 0;
	border-radius: 2vh 2vh 0 0;
	border-width: var(--top-border-width-s);
	border-color: var(--top-border-col-l);
}

.logout {
	display: grid;
	grid-template-columns: auto auto;
	font-size: var(--f-size-1);
	color: #0F0;
	width: 95%;
	justify-content: space-between;
	margin: 1vh auto;
	justify-items: end;
}

.dropbtn {
	color: #FFF;
	display: inline-block;
	margin: 0 auto;
}

.dropbtn:hover {
	color: #0F0;
}

.dropdown {
	width: fit-content;
	margin: 0px 1vw;
	display: inline-block;
	font-size: 3.5vh;
	border-radius: 3vh;
	background-color: #0808;
	text-align: center;
	z-index: 1;
	transition: max-height 200ms ease-out;
}

.dropdown a {
	color: #0F0;
	background-color: #020;
	display: block;
	margin: 1vh;
	padding: .5vh 1ch;
	border-radius: 5vh;
}

.dropdown a:hover {
	background-color: #040;
	color: #FFF;
}

.dropdown a:not(:first-child) {
	margin-top: .5vh;
}

.dropdown:hover,
.dropdown:hover #selected.dropbtn {
	background-color: #0F08;
	color: #0F0;
}

#micon {
	height: 20vh;
	position: fixed;
	bottom: -21vh;
	right: 0;
	transition-property: bottom;
	transition-duration: 500ms;
	transition-timing-function: cubic-bezier(0.5, -1, 1, 0);
	transition-delay: 3s;
}

#micon.show {
	bottom: 0vh;
	transition-delay: 0s;
	transition-timing-function: cubic-bezier(0, 1, 0.5, 2);
}

#selected {
	color: #000;
	background-color: #0A0;
}

#logout {
	min-width: unset;
}

header img {
	height: 1em;
	margin-bottom: -.1em;
	filter: invert(1);
}

form {
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	display: grid;
	grid-template-columns: 30vw 30vw;
	align-items: center;
	justify-items: center;
}

form * {
	font-size: 8vh !important;
}

div#uname {
	margin: 0 0 0 0;
	background-color: transparent;
	background-image: url(/style/media/user.png);
	background-repeat: no-repeat;
	background-size: 8vh;
	background-position: 2vw center;
	transition: all 300ms ease-in-out;
}

input {
	padding: 0.25em 0 0.25em 5vw;
	line-height: 9vh;
	background-color: transparent;
	backface-visibility: hidden;
	transform-style: preserve-3d;
	font-family: Right;
}

input#uname {
	color: #0F0;
	width: 100%;
	padding-left: 7vw;
}

input#uname::placeholder {
	color: #0a0;
	letter-spacing: 1.5px;
}

input#uname:placeholder-shown {
	background-color: #0000;
}

:hover {
	border-radius: 0;
}

input:-webkit-autofill {
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: white !important;
	-webkit-text-size-adjust: 5vh;
}

#ok {
	color: #0a0;
	background-image: url(/style/media/ok-green.png);
	background-size: 7vh;
	background-position: 10% center;
	background-repeat: no-repeat;
}

#ok:hover {
	color: #0000;
	background-size: 15vh;
	background-position: center center;
	border-radius: 2em;
}

#loader {
	opacity: 1;
	max-height: 89vh;
	max-width: 100%;
	position: fixed;
	top: 50%;
	left: 50%;
	-ms-transform: translateY(-50%) translateX(-50%);
	transform: translateY(-50%) translateX(-50%);
	z-index: -2;
	transition: opacity 150ms ease-in-out;
}

#site {
	width: 100vw;
	opacity: 1;
	height: 98vh;
	margin: 2vh auto;
	padding: 0;
	border: none;
	overflow: overlay;
	transition: opacity 50ms ease-in-out;
}

.hide {
	opacity: 0 !important;
}

#rightNav,
#leftNav {
	font-size: 2em;
	display: flex;
	align-items: center;
	position: fixed;
	top: 50vh;
	transform: translateY(-50%);
	width: 10ch;
	padding: 1em 0;
	transition-property: left, right;
	transition-duration: 250ms;
	transition-timing-function: ease-in-out;
}

#leftNav {
	left: -10ch;
	background: linear-gradient(270deg, transparent, #080A 2.5ch);
}

#rightNav {
	right: -10ch;
	background: linear-gradient(90deg, transparent, #080A 2.5ch);
}

#rightNav span,
#leftNav span {
	position: relative;
	left: 0;
	width: 100%;
	transition-property: left, right;
	transition-duration: 250ms;
	transition-timing-function: ease-in-out;
}

#rightNav:hover {
	right: 0;
}

#rightNav span {
	left: -.75ch;
	text-align: left;
}

#rightNav:hover span,
#leftNav:hover span {
	left: 0;
	right: 0;
}

#leftNav span {
	left: .75ch;
	text-align: right;
}

#leftNav:hover {
	left: 0;
}

header #headerInner {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

header p {
	font-size: var(--f-size-2);
}

header>div {
	margin-top: 1vh;
}