body {
	margin:			0;
	font-size:		0;
	font-family:	Quicksand;
}
section {
	display:				grid;
	min-height:				100vh;
	background:				no-repeat center center / cover;
	background-attachment:	fixed;
	grid-template-columns:	1fr 1fr;
	border-bottom:			solid 1vh rgba(255,255,255,0.75);
	grid-template-areas:	"left right";
}
section.alone {
	grid-template-columns:	1fr;
	grid-template-areas:	"left";
}



section > div {
	display:	flex;
	position:	relative;
	box-sizing:	border-box;
}
section > div > div {
	margin:	auto;
}
section > div:nth-child(1) {
	padding-left:	5vh;
	grid-area:		left;
}
section > div:nth-child(2) {
	padding-right:	5vh;
	grid-area:		right;
}



h1 {
	margin:			0 0 2.5vh 0;
	white-space:	nowrap;
	font-size:		6.5vh;
	font-family:	Philosopher;
	font-weight:	normal;
	text-shadow:	0 0 0.15vh currentColor;
	color:			#FFF;
}
h1 > u {
	text-decoration:	none;
	color:				var(--color-highlight1);
}
p {
	display:		inline-block;
	margin:			0.5vh 0;
	padding:		1vh 2.5vh;
	font-size:		3.25vh;
	color:			#FFF;
	background:		rgba(0,0,0,0.75);
	box-sizing:		border-box;
	border-radius:	1vh;
}
p.info {
	padding:		0;
	font-size:		3.9vh;
	background:		none;
	text-shadow:	0 0 0.15vh currentColor;
}
p > u {
	text-decoration:	none;
	color:				var(--color-highlight2);
}



.button {
	display:			inline-block;
	margin:				3vh 1vh 0 1vh;
	padding:			0 2vh;
	font-size:			3.5vh;
	font-family:		Philosopher;
	line-height:		7vh;
	text-align:			center;
	text-decoration:	none;
	color:				#FFF;
	background:			linear-gradient(to top,rgb(255,150,100),rgb(255,100,100));
	border-radius:		1vh;
	box-shadow:			0 1vh 0 0 rgb(200,50,50),0 2vh 5vh rgba(0,0,0,0.75);
	cursor:				pointer;
}
.button.green {
	background:	linear-gradient(to top,rgb(0,200,150),rgb(0,150,100));
	box-shadow:	0 1vh 0 0 rgb(0,135,85),0 2vh 5vh rgba(0,0,0,0.75);
}
.button.blue {
	background:	linear-gradient(to top,rgb(100,150,200),rgb(50,100,150));
	box-shadow:	0 1vh 0 0 rgb(0,85,135),0 2vh 5vh rgba(0,0,0,0.75);
}



@media only screen and (max-width:1500px) {
	section {
		grid-template-columns:	1fr;
		grid-template-areas:	"left""right";
	}
	section.inverted {
		grid-template-areas:	"right""left";
	}
	section > div:nth-child(1) {
		padding:	0 2.5vh;
	}
	section > div:nth-child(2) {
		padding:	0 2.5vh;
	}
	h1 {
		font-size:	3.9vh;
		text-align:	center;
	}
	p.info {
		font-size:	3vh;
	}
	.button {
		display:	block;
		width:		100%;
		margin:		2vh 0 0 0;
		padding:	0;
	}
}