/* RESET */
* {
	margin: 0px;
	padding: 0px;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border-radius: 0px;
}
*:focus {
	outline: 0;
}
/* FONTS */
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: normal;
	src: local('Open Sans'),
		 local('OpenSans'),
		 url('../fonts/OpenSans/OpenSans.woff') format('woff'),
		 url('../fonts/OpenSans/OpenSans.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-style: normal;
	font-weight: bold;
	src: local('Open Sans Bold'),
		 local('OpenSans-Bold'),
		 url('../fonts/OpenSans/OpenSans-Bold.woff') format('woff'),
		 url('../fonts/OpenSans/OpenSans-Bold.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: normal;
	src: local('Open Sans Italic'),
		 local('OpenSans-Italic'),
		 url('../fonts/OpenSans/OpenSans-Italic.woff') format('woff'),
		 url('../fonts/OpenSans/OpenSans-Italic.ttf') format('truetype');
}
@font-face {
	font-family: 'Open Sans';
	font-style: italic;
	font-weight: bold;
	src: local('Open Sans Bold Italic'),
		 local('OpenSans-BoldItalic'),
		 url('../fonts/OpenSans/OpenSans-BoldItalic.woff') format('woff'),
		 url('../fonts/OpenSans/OpenSans-BoldItalic.ttf') format('truetype');
}
@font-face {
	font-family: 'Font Awesome';
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/FontAwesome/fa-solid-900.woff2') format('woff2');
}
@font-face {
	font-family: 'Font Awesome Brands';
	font-style: normal;
	font-weight: normal;
	src: url('../fonts/FontAwesome/fa-brands-400.woff2') format('woff2');
}
@font-face {
	font-family: 'Bebas Neue';
	font-style: normal;
	font-weight: normal;
	src: local('Bebas Neue'),
		 local('BebasNeue'),
		 url('../fonts/BebasNeue/BebasNeue-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: normal;
	src: local('Montserrat'),
		 url('../fonts/Montserrat/Montserrat-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Montserrat';
	font-style: normal;
	font-weight: bold;
	src: local('Montserrat Bold'),
		 local('Montserrat-Bold'),
		 url('../fonts/Montserrat/Montserrat-Bold.ttf') format('truetype');
}
@font-face {
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: normal;
	src: local('Montserrat Italic'),
		 local('Montserrat-Italic'),
		 url('../fonts/Montserrat/Montserrat-Italic.ttf') format('truetype');
}
@font-face {
	font-family: 'Montserrat';
	font-style: italic;
	font-weight: bold;
	src: local('Montserrat Bold Italic'),
		 local('Montserrat-BoldItalic'),
		 url('../fonts/Montserrat/Montserrat-BoldItalic.ttf') format('truetype');
}
@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: normal;
	src: local('Barlow'),
		 local('Barlow'),
		 url('../fonts/Barlow/Barlow-Regular.ttf') format('truetype');
}
@font-face {
	font-family: 'Barlow';
	font-style: normal;
	font-weight: bold;
	src: local('Barlow Bold'),
		 local('Barlow-Bold'),
		 url('../fonts/Barlow/Barlow-Bold.ttf') format('truetype');
}
@font-face {
	font-family: 'Barlow';
	font-style: italic;
	font-weight: normal;
	src: local('Barlow Italic'),
		 local('Barlow-Italic'),
		 url('../fonts/Barlow/Barlow-Italic.ttf') format('truetype');
}
@font-face {
	font-family: 'Barlow';
	font-style: italic;
	font-weight: bold;
	src: local('Barlow Bold Italic'),
		 local('Barlow-BoldItalic'),
		 url('../fonts/Barlow/Barlow-BoldItalic.ttf') format('truetype');
}
/* VARIABLES */
:root {
	
	/* BASIC COLORS */
	
	--black: 0,0%,0%;
	--dark: 0,0%,20%;
	--gray: 0,0%,50%;
	--light: 0,0%,80%;
	--white: 0,0%,100%;
	
	--red: 5,100%,30%;
	--orange: 30,100%,50%;
	--yellow: 45,100%,50%;
	--lime: 110,100%,70%;
	--green: 105,100%,35%;
	--teal: 180,100%,50%;
	--cyan: 190,100%,50%;
	--blue: 230,100%,50%;
	--purple: 280,100%,20%;
	--magenta: 330,100%,40%;
	
	/* PROJECT COLORS */
	
	--graphite: 30,7%,22%;
	--iron: 20,4%,73%;
	--steel: 202,15%,90%;
	--lightred: 2,85%,64%;
	
	/* LAYOUT COLORS */
	
	--main-header: var(--black);
	--main-layer: var(--black);
	--main-front: var(--white);
	--main-body: var(--dark);
	--main-footer: var(--white);
	
	--alt-header: var(--white);
	--alt-layer: var(--white);
	--alt-front: var(--black);
	--alt-body: var(--light);
	--alt-footer: var(--black);
	
	--main: var(--white);
	--alt: var(--black);
	--link: var(--lightred);
	
	--main-highlight: var(--lightred);
	--alt-highlight: var(--purple);
	
	/* OPACITY */
	
	--text-opacity: 0.8;
	--text-opacity-half: 0.6;
	--text-opacity-quarter: 0.4;
	--text-opacity-min: 0.2;
	--text-opacity-full: 1;
	
	--bg-opacity: 0.8;
	--bg-opacity-half: 0.6;
	--bg-opacity-quarter: 0.4;
	--bg-opacity-min: 0.1;
	--bg-opacity-full: 1;
	
	--border-opacity: 0.8;
	--border-opacity-half: 0.6;
	--border-opacity-quarter: 0.4;
	--border-opacity-min: 0.1;
	--border-opacity-full: 1;
	
	/* BORDERS */
	
	--corner: 0;
	--alt-corner: 0;
	
	--border-color-null: hsla(var(--main),0);
	--border-color-min: hsla(var(--main),0.2);
	--border-color-idle: hsla(var(--main),0.4);
	--border-color-hover: hsla(var(--main),0.8);

	--bg-min: hsla(var(--main),0.1);
	--bg-idle: hsla(var(--main),0.2);
	--bg-hover: hsla(var(--main),0.4);
	
	/* TYPEFACE */
	
	--plain-font: 'Montserrat', Arial, Helvetica, sans-serif;
	--title-font: 'Bebas Neue', Arial, Helvetica, sans-serif;
	--alt-font: 'Barlow', Arial, Helvetica, sans-serif;
	--icon-font: 'Font Awesome';
	
	--title-spacing: 0.05rem;
	--double-spacing: 0.1rem;
	
	--small-font-size: 0.6rem;
	--plain-font-size: 0.8rem;
	--h4-font-size: 1rem;
	--h3-font-size: 1.2rem;
	--h2-font-size: 1.4rem;
	--h1-font-size: 1.6rem;
	
	--small-line-height: 0.8rem;
	--plain-line-height: 1.2rem;
	--h4-line-height: 1.4rem;
	--h3-line-height: 1.6rem;
	--h2-line-height: 1.8rem;
	--h1-line-height: 2rem;
	
	--form-input-padding: 0.6rem 1.2rem;
	
	--text-line-height: 1.2rem;
	
	/* SHADOWS */
	
	--drop-shadow-idle: 0px 0px 6px 0px hsla(var(--black),0);
	--drop-shadow-hover: 0px 3px 6px 0px hsla(var(--black),0.2);
	--inner-shadow-idle: 0px 0px 10px 0px hsla(var(--black),0.2) inset;
	--inner-shadow-hover: 0px 0px 10px 0px hsla(var(--black),0.4) inset;

}

/* BASIC */
html, body {
	margin: 0px;
	padding: 0px;
}
iframe, 
video {
	margin: 0px;
	padding: 0px;
	border: none;
}
html {
	position: relative;
	height: 100%;
	font-size: calc( 16px + (24 - 16) * (100vw - 440px) / (1900 - 440) );
	text-rendering: optimizeLegibility;
}
body {
	position: relative;
	background: hsla(var(--main-body),1);
	color: hsla(var(--alt),var(--text-opacity));
	font-family: var(--plain-font);
	min-height: 100%;
	display: flex;
	flex-flow: row wrap;
	justify-content: flex-start;
	align-items: flex-start;
}
a {
	color: hsla(var(--link),0.6);
	text-decoration: none;
	transition: color 0.3s;
}
a:hover {
	color: hsla(var(--link),0.8);
}
h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
}
/* SCROLL */
*,
.scrollbar {
	scrollbar-width: 6px;
}
*::-webkit-scrollbar,
.scrollbar::-webkit-scrollbar {
	width: 6px;
	height: 6px;
	background: transparent;
}
*::-webkit-scrollbar-track,
.scrollbar::-webkit-scrollbar-track {
	background: hsla(var(--main-front),0);
	transition: background 0.3s;
	border: none;
}
*::-webkit-scrollbar-track:hover ,
.scrollbar::-webkit-scrollbar-track:hover {
	/*background: var(--bg-min);*/
}
*::-webkit-scrollbar-thumb,
.scrollbar::-webkit-scrollbar-thumb {
	background: hsla(var(--main-front),0.2);
	transition: background 0.3s;
	border: none;
}
*::-webkit-scrollbar-thumb:hover,
.scrollbar::-webkit-scrollbar-thumb:hover {
	background: hsla(var(--main-front),0.4);
}
*::-webkit-scrollbar-thumb:active,
.scrollbar::-webkit-scrollbar-thumb:active {
	background: hsla(var(--main-highlight),0.4);
}
*::-webkit-scrollbar-corner,
.scrollbar::-webkit-scrollbar-corner {
	background: transparent;
}
/* DEV */

h1.dev-title, 
h2.dev-title {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin: 2rem 0px;
	padding: 1rem;
	background: hsla(var(--main-layer),0.3);
	color: hsla(var(--main),0.8);
	font-size: var(--h1-font-size);
	line-height: var(--h1-line-height);
	font-weight: bold;
	text-transform: uppercase;
	opacity: 0.5;
}
h1.dev-title::before, 
h2.dev-title::before {
	content: '\f063';
	margin-right: 0.5rem;
	font-family: var(--icon-font);
}
h2.dev-title {
	font-size: var(--h2-font-size);
	line-height: var(--h2-line-height);
	background: hsla(var(--main-layer),0.1);
	padding: 0.5rem 1rem;
}

/* ANIMATION */

.dismiss:checked + [data-interaction='dismiss'] {
	overflow: hidden;
	animation-name: dismiss;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
	margin: 0px;
	transition: margin 1s;
	user-select: none;
	pointer-events: none;
}
@keyframes dismiss {
	0% {
		opacity: 1;
		max-height: 100vh;
	}
	100% {
		opacity: 0;
		max-height: 0px;
	}
}

/* LOADING */

.loading {
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0px;
	left: 0px;
	background-color: hsla(var(--alt-front),0.8);
	z-index: 30;
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(3px);
}
.loading.now-loading {
	display: block;
}
.loading-scene {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
	box-sizing: border-box;
	overflow: hidden;
}
.loading-scene-wrapper {
	display: flex;
	justify-content: center;
	align-content: center;
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 40%;
	padding-bottom: 40%;
}
.loading-scene-object {
	position: absolute;
	width: 86.5%;
	height: 100%;
	animation: loading-object 6s infinite linear;
}
@keyframes loading-object {
	0%, 14.66% {
		transform: rotateZ(0deg);
	}
	16.66%, 31.33%{
		transform: rotateZ(30deg);
	}
	33.33%, 48% {
		transform: rotateZ(60deg);
	}
	50%, 64.66% {
		transform: rotateZ(90deg);
	}
	66.66%, 81.33% {
		transform: rotateZ(120deg);
	}
	83.33%,98% {
		transform: rotateZ(150deg);
	}
	100% {
		transform: rotateZ(180deg);
	}
}
.loading-scene-object-core {
	position: absolute;
	top: 50%;
	left: 50%;
	transform-style: preserve-3d;
	transform: translate(-50%,-50%);
	width: 34.6%;
	height: 34.6%;
}
.loading-scene-object-core::before {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
	animation: loading-core 1s infinite linear;
	background: rgba(255,255,255,0.4);
}
@keyframes loading-core {
	0% {
		transform: scale(1.5,1.5);
		opacity: 0;
	}
	50%, 70% {
		transform: scale(1,1);
		opacity: 1;
	}
	100% {
		transform: scale(0.5,0.5);
		opacity: 0;
	}
}
.loading-scene-side {
	position: absolute;
	width: 100%;
	height: 41.3%;
}
.loading-scene-side-top {
	top: 0;
	animation: loading-side-top 1s infinite linear;
}
@keyframes loading-side-top {
	0% {
		transform: translate(0,40%) scale(0.5,0.5);
		opacity: 0;
	}
	50%, 70% {
		transform: translate(0,0%) scale(1,1);
		opacity: 1;
	}
	100% {
		transform: translate(0,-50%);
		opacity: 0;
	}
}
.loading-scene-side-bot {
	bottom: 0;
	animation: loading-side-bot 1s infinite linear;
}
@keyframes loading-side-bot {
	0% {
		transform: translate(0,-40%) scale(0.5,0.5);
		opacity: 0;
	}
	50%, 70% {
		transform: translate(0,0%) scale(1,1);
		opacity: 1;
	}
	100% {
		transform: translate(0,50%);
		opacity: 0;
	}
}
.loading-scene-side::before {
	content: '';
	display: block;
	position: absolute;
	width: 100%;
	height: 100%;
	clip-path: polygon(0% 60.5%, 50% 0%, 100% 60.5%, 100% 100%, 85% 100%, 85% 79.6%, 50% 37.7%, 15% 79.6%, 15% 100%, 0% 100%);
	background: rgba(255,255,255,0.4);
}
.loading-scene-side-bot::before {
	transform: rotateX(180deg);
}
.loading-btn {
	opacity: 0.4 !important;
	pointer-events: none !important;
}