:root {
	color-scheme: light dark;
}
@font-face {
	font-family: 'CenturyGothic';
	font-display: swap;
	src: url('../fonts/CenturyGothic.ttf');
}
@font-face {
	font-family: 'OCRATributeWBold';
	font-display: swap;
	src: url('../fonts/OCRATributeWBold.ttf');
}
* {
	margin: 0;
	padding: 0;
	outline: none;
	font-family: 'CenturyGothic', Arial, Helvetica, sans-serif;
	scrollbar-color: #00cc00 #ccbbbb;
	scrollbar-width: thin;
	-webkit-tap-highlight-color: transparent;
}
*::selection {
	background-color: #009900;
}
*::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}
*::-webkit-scrollbar-thumb {
	background: #00cc00;
	border-radius: 4px;
	border: 1px solid #151515;
}
*::-webkit-scrollbar-thumb:active {
	background: #00ff00;
}
html {
	background-color: #151515;
}
body {
	font-size: 12.5pt;
	background-color: #151515;
	background: radial-gradient(ellipse at left bottom, #1e1e1e 0%, #252525 100%);
	color: #d4d4d4;
	min-height: 100vh;
	display: grid;
	grid-template-columns: 100%;
	grid-template-rows: auto 1fr auto;
	grid-gap: 0;
	grid-template-areas: 'header' 'content' 'footer';
	justify-content: stretch;
}
a {
	position: relative;
	cursor: pointer;
	text-decoration: none;
	color: #00cc00;
	outline: none;
	text-shadow: 0px 0px 0px #000000;
	transition: text-shadow 0.5s ease 0s;
	will-change: text-shadow;
}
a:hover {
	text-shadow: 0px 0px 2px #00ff00;
}
a::after {
	content: '';
	width: 0%;
	height: 1px;
	background: #00cc00;
	position: absolute;
	bottom: -1px;
	left: 0;
	box-shadow: 0px 0px 0px #000000;
	transition: width 0.5s ease 0s,
				box-shadow 0.5s ease 0s;
	will-change: width, box-shadow;
}
a:hover::after {
	width: 100%;
	box-shadow: 0px 0px 4px #00ff00;
}
p {
	margin: 15px 0;
}
li {
	list-style-type: none;
}
.content {
	grid-area: content;
	display: grid;
	grid-template-columns: auto 1fr auto;
	grid-template-rows: 1fr;
	grid-template-areas: 'navigation main aside';
	grid-gap: 0;
}
main {
	display: grid;
	align-items: start;
    align-self: start;
	padding: 15px 7px;
}
.main {
	display: grid;
	grid-area: main;
	grid-template-columns: 100%;
	grid-gap: 40px 0;
	grid-template-areas: 'slogan';
	justify-content: stretch;
	padding: 20px;
}
.slogan {
	grid-area: slogan;
	display: grid;
	grid-gap: 35px;
	min-height: calc(100vh - 40px);
	text-align: center;
	align-content: center;
	justify-items: center;
	color: #00cc00;
}
.sloganLogotypeImage {
	width: 50%;
	max-width: 200px;
}
.sloganLogotypeImage svg {
	align-self: center;
	fill: none;
	stroke: #00cc00;
	stroke-width: 20;
	stroke-linecap: round;
	stroke-linejoin: round;
	stroke-miterlimit: 10;
	width: 100%;
	height: auto;
	filter: drop-shadow(0 0 7px #00cc00);
}
.slogan h1 {
	font-size: 24pt;
	font-weight: normal;
}
.slogan h1 strong {
	font-family: 'OCRATributeWBold', Arial, Helvetica, sans-serif;
	color: #1a1a1a;
	font-size: 28pt;
	animation: shadow 3s infinite linear;
}
.slogan h2 {
	font-size: 16pt;
}
@keyframes shadow {
	from {text-shadow: 0px 0px 10px #00ff00;}
	25% {text-shadow: 0px 0px 2px #00ff00;}
	50% {text-shadow: 0px 0px 10px #00ff00;}
	to {text-shadow: 0px 0px 10px #00ff00;}
}
.button {
	position: relative;
	cursor: pointer;
	font-size: 12pt;
	display: grid;
	grid-template-columns: auto;
	justify-items: center;
	align-items: center;
	margin: 10px 0px;
	z-index: 1;
	border: 1px solid #00cc00;
	padding: 0;
	overflow: hidden;
	color: #00cc00;
	border-radius: 5px;
	background: none;
	text-decoration: none;
	transition: background-color 0.3s ease 0s;
	will-change: background-color;
}
.button:focus {
	outline: none;
}
.button::before {
	content: '';
	position: absolute;
	left: -50%;
	width: 200%;
	height: 200%;
	background: RGBA(0, 0, 0, 0.7);
	top: -50%;
	z-index: -1;
	transform: translate3d(0, 100%, 0) rotate3d(0, 0, 1, 10deg);
}
.button > span {
	display: grid;
	grid-template-columns: auto auto;
	align-items: center;
	grid-gap: 5px;
	justify-content: center;
}
.button > span,
.button .buttonIcon {
	padding: 15px 30px;
	transition: transform 0.3s cubic-bezier(0.75, 0, 0.125, 1) 0s;
	will-change: transform;
}
.button > span > svg {
	height: 12pt;
	width: auto;
	fill: #00cc00;
	transition: filter 0.5s ease 0s;
	will-change: filter;
}
.button .buttonIcon {
	position: absolute;
	width: 100%;
	height: 18pt;
	width: auto;
	fill: #00cc00;
	transform: translate3d(0, 100%, 0);
}
.button:hover::before {
	animation: toTopIcon 0.3s forwards ease-in;
}
.button:hover .buttonIcon {
	transform: translate3d(0, 0, 0);
}
.button:hover > span {
	opacity: 0;
	transform: translate3d(0, -100%, 0);
}
.button:active {
	box-shadow: 0px 0px 5px #00cc00;
}
@keyframes toTopIcon {
	50% {
		transform: translate3d(0, 50%, 0) rotate3d(0, 0, 1, 10deg);
		animation-timing-function: ease-out;
	}
	100% {
		transform: translate3d(0, 0%, 0) rotate3d(0, 0, 1, 0deg);
	}
}
p a {
	font-family: 'OCRATributeWBold', Arial, Helvetica, sans-serif;
}