@font-face {
	font-family: "Remachine";
	src: url("font/RemachineScript.eot");
	src: url("font/RemachineScript.eot?#iefix") format("embedded-opentype"), url("font/RemachineScript.svg#RemachineScript") format("svg"), url("font/RemachineScript.ttf") format("truetype");
	font-weight: normal;
	font-style: normal;
	size-adjust: 130%;
}

@font-face {
	font-family: "Right";
	src: url("font/Righteous.eot");
	src: url("font/Righteous.eot?#iefix") format("embedded-opentype"), url("font/Righteous.svg#Righteous") format("svg"), url("font/Righteous.ttf") format("truetype"), url("font/Righteous.woff") format("woff");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: 'Carre';
	font-style: normal;
	font-weight: normal;
	src: url('font/Carre.otf'), url("font/Carre.ttf") format('truetype');
	unicode-range: U+30-39;
}

::-webkit-scrollbar {
	width: 0.75vw;
	transition: color 200ms ease-in-out;
}

::-webkit-scrollbar:hover {
	width: 2vw;
}

::-webkit-scrollbar-track {
	background: #0000;
}

::-webkit-scrollbar-track:hover {
	background: #0008;
}

::-webkit-scrollbar-thumb {
	background: #0b0;
	border-radius: 5em;
}

::-webkit-scrollbar-thumb:hover {
	background: #0f0;
}

body {
	color: white;
	cursor: default;
	font-family: 'Carre', 'Right';
}

html,
body {
	margin: 0;
	padding: 0;
}

body {
	height: 100vh;
	width: 100%;
}



@media only screen and (orientation:portrait) {
	.lan {
		display: none;
	}

	:root {
		--f-size-1: 36px;
		--f-size-2: 32px;
		--f-size-3: 28px;
	}
}

@media only screen and (orientation:landscape) {
	:root {
		--f-size-1: 3vw;
		--f-size-2: 2vw;
		--f-size-3: 1.5vw;
	}

	.por {
		display: none;
	}
}

h1 {
	font-family: "Carre", "Remachine";
	font-size: var(--f-size-1);
	text-decoration: none;
	font-weight: normal;
	margin: 10px 0 10px 0;
}

h2 {
	font-family: "Carre", "Right";
	font-size: var(--f-size-2);
	text-decoration: none;
	font-weight: normal;
	margin: 10px 0 10px 0;
}

a {
	color: #0f0;
	cursor: pointer;
	text-decoration: none;
}

a:hover {
	color: #fff;
}

input {
	font-size: 3vh;
	margin: 1vh auto;
	padding: 1vh 1ch;
	background: #040;
	color: #8f8;
	transition: border-radius 200ms ease-in-out;
	border-radius: 1em;
	border: 3px #080 solid;
}

input::placeholder {
	color: #0a0;
}

input:placeholder-shown {
	background: #000;
}

input:focus,
input:hover {
	color: #fff;
	outline: none;
	border-radius: 0;
}

input:invalid {
	border: 5px solid red;
}

input {
	width: 95%;
}

#con {
	transition: opacity 200ms ease-in-out 0ms, color 200ms ease-in-out 100ms;
	text-align: center;
}

#con h1 {
	margin: 2vh auto;
	font-size: 2em;
	color: #fff;
	background: #0804;
	border: 3px #080 solid;
	padding: 1vh 3vw 2vh;
	border-radius: 1em;
	text-align: center;
	cursor: default;
}

#con h2 {
	margin: 2vh auto;
	font-size: 1.75em;
	color: #fff;
	text-align: center;
}

#con a {
	font-family: 'Right';
	margin: 5vh auto;
	font-size: 36px;
	background: #0804;
	border: 3px #080 solid;
	padding: 1vh 2vw 2vh;
	border-radius: 1em;
}

#con a:hover {
	background: #0F0;
	color: #000;
}

#con table {
	width: 75vw;
	margin: 0 auto 5vh auto;
}