/* variables */
:root {
	--ind-bg-f: rgb(60,70,75);
	--ind-bg-b: rgb(75,85,90);
	--ind-bg-ba: rgb(75,85,90,0);
	--ind-bg-bha: rgb(75,85,90,0.5);
	--ind-bg-l: rgb(90,100,105);
	--ind-bg-la: rgba(105,115,120,0.375);
	
	--ind-ye-0: rgba(255,240,60,255);
	--ind-ye-1: rgba(255,255,150,255);
	--ind-ye-2: rgba(255,240,60,150);
	
	--ind-li-0: rgba(210,220,225);
	--ind-li-1: rgba(180,190,195);
	--ind-li-2: rgba(150,160,165);
	
	--round-0: 8px;
	
	--width-m: calc(100% - 16px);
	--h-cards: calc(512px - 16px);
	--h-sline-0: 128px;
	--h-sline-1: calc(100 - 16px);
	
	/*
		Sizes: x-y-z, where:
			x (t - transform)
			y is element (h - header, m - main, f - footer, g - global)
			z is param (w - width, h - header, t - top)
	*/
	
	/*global*/
	--t-g-mw: 1024px;
	
	/*header*/
	--t-h-i: 8px;
	--t-h-h: calc(128px - 2 * var(--t-h-i));
	--t-h-w: calc(100% - 2 * var(--t-h-i));
	
	/*line*/
	--t-l-h: 32px;
	--t-l-w: 100%;
	--t-l-t: calc(var(--t-h-h) * -1 - 2 * var(--t-h-i)); 
	
	/*main*/
	--t-m-h: 512px;
	--t-m-w: 100%;
	--t-m-t: calc(var(--t-h-h) + var(--t-l-h) + var(--t-h-i));
	
	/*card*/
	--t-c-h: 512px;
	--t-c-w: 100%;
	
	/*footer*/
	--t-f-h: 256px;
	--t-f-w: 100%;
	--t-f-t: calc(var(--t-m-t));
}

/* font */
@font-face {
	font-family: 'NotoSans';
	src: url('fonts/NotoSans-VariableFont_wdth,wght.ttf');
}

/* background-chaos */
html {
	background-color: var(--ind-bg-b);
	user-select: none;
	justify-content: center;
	align-items: center;
	scroll-behavior: smooth;
	scrollbar-width: none
}

body {
	font-family: NotoSans;
	
	margin: 0px;
	display: block;
	position: relative;
	flex-direction: column;
	align-items: center;
	
	width: 100%;
}

/* navigation-barline */
header {
	z-index: 1;
	position: fixed;
	/*display: flex;
	flex-direction: row;
	justify-content: center;
	align-items: center;*/
	
	top: 8px;
	left: 50%;
	transform: translate(-50%, 0%);
	height: var(--t-h-h);
	max-width: 1024px;
	width: var(--t-h-w);
}

.nav-bar {
	background-color: var(--ind-bg-la);
	backdrop-filter: blur(8px);
	position: relative;
	
	display: flex;
	flex-direction: column;	
	justify-content: space-around;
	align-items: center;
	
	width: 100%;
	height: 100%;
	
	border-radius: 8px;
}

.back-nv {
	background: linear-gradient(
		var(--ind-bg-b),
		var(--ind-bg-ba));
	
	z-index: -1;
	position: relative;
	top: calc(-100% - 8px);
	left: -8px;
	height: calc(100% - 16px);
	width: calc(100% - 16px);
	border: 16px solid var(--ind-bg-b);
	border-radius: 16px;
}

#menu-buttons {
	color: var(--ind-ye-0);
	font-weight: 600;
	font-size: 16px;
	
	display: flex;
	flex-direction: row;
	justify-content: space-around;
	align-items: flex-end;
	
	width: 100%;
}

.nav-bar #button {
	color: var(--ind-ye-0);
	opacity: 1.0;
	text-transform: uppercase;
	display: flex;
	
	text-shadow: 0px 0px 0px rgba(0,0,0,0);
	text-decoration: none;
	
	transition: 250ms;
}

.nav-bar #button:hover {
	color: var(--ind-ye-1);
	opacity: 1.0;
	text-shadow: 0px 0px 8px var(--ind-ye-2);	
}

.nav-bar #title {
	color: var(--ind-ye-0);
	opacity: 1.0;
	font-weight: 900;
	font-size: 48px;
	
	text-transform: uppercase;
	margin: 0;
}

.frontier-back {
	z-index: 10;
	position: relative;
	background-color: var(--ind-bg-b);
	
	top: calc(var(--t-l-t));
	left: 50%;
	height: calc(var(--t-l-h) / 2);
	width: calc(100% - 32px);
	transform: translate(-50%, 0%);
	border-radius: 16px 16px 0px 0px;
}

.frontier-main {
	z-index: 11;
	position: relative;
	background-color: var(--ind-bg-bha);
	
	top: calc(var(--t-l-t) - var(--t-l-h) / 2);
	left: 50%;
	height: var(--t-l-h);
	width: calc(100% - 32px);
	transform: translate(-50%, 0%);
	filter: blur(8px);
	backdrop-filter: blur(2px) brightness(150%) contrast(2.5);
	border-radius: 16px;
}

.frontier-line {
	z-index: 12;
	position: relative;
	background-color: rgba(255,255,255,1);
	box-shadow: 0px 0px 8px var(--ind-li-0);
	
	top: calc(var(--t-l-t) - var(--t-l-h));
	left: 50%;
	height: 1px;
	width: calc(100% - 64px);
	transform: translate(-50%, -50%);
}

/* cards-menu */
main {
	z-index: 0;
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	
	top: var(--t-m-t);
	max-width: calc(1024px - 64px);
	width: calc(100% - 82px);
	left: 50%;
	transform: translate(-50%, 0%);
}

.card {
	background-color: var(--ind-bg-l);
	width: 100%;
	height: 512px;
	
	border-radius: 8px;
	margin-bottom: 8px;
	scroll-margin-top: var(--t-m-t);
}

.card #title {
	text-transform: uppercase;
	font-weight: 900;
	font-size: 32px;
	margin: 0px 0px 0px 8px;
	color: var(--ind-li-2);
}

/* down-menu */
footer {
	color: var(--ind-li-2);
	z-index: 0;
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: space-around;
	top: var(--t-f-t);
	
	width: 100%;
	height: var(--t-f-h);
	background-color: var(--ind-bg-f);
}

footer #title {
	font-size: 32px;
	text-transform: uppercase;
	margin: 32px 0px 0px 0px;
	font-weight: 900;
}

footer .column {
	font-size: 16px;
	text-transform: uppercase;
	margin: 32px 0px 0px 0px;
}

footer .column #chapter {
	margin: 0px;
}

footer .column #link {
	margin: 0px;
}