:root
{
	--primary-color: #0A0A0A;
}

/***********/
/* General */
/***********/

html,
body
{
	margin: 0px;
	padding: 0px;
	
	width: 100%;
	height: 100%;

	/*
	overflow: hidden;
	
	overflow-y: scroll;
	*/
	font-size: 16px;
	font-family: 'Arial-Nova-Light';
}

/********/
/* Main */
/********/

body
{
	color: white;
	background-color: #000;
}

main
{

}

main > section
{
	height: 100vh;
	max-width: 100vw;

	overflow-x: hidden;

	display: flex;
	grid-template-columns: 1;
	justify-content: center;
	justify-items: center;
	align-items: center;
	
	scroll-snap-align: center;
	position:relative;
}

main > section:nth-of-type(1){z-index: 1;}
main > section:nth-of-type(2){z-index: 2;}
main > section:nth-of-type(3){z-index: 3;}
main > section:nth-of-type(4){z-index: 4;}
main > section:nth-of-type(5){z-index: 5;}
main > section:nth-of-type(6){z-index: 6;}
main > section:nth-of-type(7){z-index: 7;}
main > section:nth-of-type(8){z-index: 8;}


main > section:nth-of-type(2){
	height: calc(100vh - 51px);
	background-color: var(--primary-color);

	display:flex;
}

main > section:nth-of-type(2)
{
	gap: 4rem 1rem;
	justify-content: center;
	align-content: center;

	display: flex;
	flex-wrap: wrap;
}

main > section:nth-of-type(2) > div
{
	width: 100%;
	min-width: 100%;
	text-align: center;
	align-content: center;
	padding: 1rem;
}


main > section:nth-of-type(1) > div
{
	width: 600px;
	max-width: 100%;
	position: fixed;
}

main > section:nth-of-type(2) > div:nth-of-type(1) { font-size: 20px; }

main > section:nth-of-type(1) img
{
	width: 100%;
	
	top: 0;
	left: 0;
	position: absolute;
}

main > section:nth-of-type(2) div:nth-of-type(1)
{
	padding:1em;
}

main > section:nth-of-type(2) div a div
{
	width: fit-content;
}

main > section:nth-of-type(2) img
{
	width: 50px;
	height: 50px;
}

main > section:nth-of-type(1) > div > img:nth-of-type(2)
{
	opacity: calc(var(--scroll) * 2);

	/*
	opacity: 0;
	animation: fadein 1s linear infinite;
	animation-play-state: paused;
	animation-delay: calc(var(--scroll) * -1s);
	*/
}

.box
{
	position: relative;
	justify-content: center;
	align-items: center;
	
	display: flex;
	/*
	flex-grow: 1;
	flex-direction: row;
	*/

	width: 150px;
	height: 150px;
	min-width: 150px;

	color: #A50;
	padding: 1rem;
	background-color: #222;
	border-radius: 0.25rem;
}

.box-text
{
	position: absolute;
	bottom: 1rem;
}