body, html {
	overflow: hidden;
}

#main {
	width: 100%;
	height: 100%;
	display: grid;
	grid-template-columns: 1fr 1fr;
	font-family: 'Futura', 'FuturaCustom';
}

.centerAlignedWithPadding {
	width: 100%;
	max-width: 450px;
	height: fit-content;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 20px;
	box-sizing: border-box;
}

@media (max-aspect-ratio: 5/3) {
	#main {
		grid-template-columns: 1fr;
		grid-template-rows: 1fr 1fr;
	}
}

/* HERO */

#hero {
	background-color: var(--colorB);
	color: var(--colorA);
}

#hero .logo {
	width: 100%;
}
#hero .subheader {
	width: 40%;
}
#hero p {
	padding-top: 10px;
	font-size: 0.5em;
}


/* START */

#start {
	background-color: var(--colorA);
	color: var(--colorB);
}

#start > div {
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
}

#start button {
	font-size: 1.5em;
}