:root {
	--icon-size: 6em;
	--card-transition-duration: 600ms;
	--card-margin: min(-.1rem, calc(1.5vw + .1vh));
	--card-width: min(23rem, calc(100vw));
	--card-height: min(calc(var(--card-width) * 3/4));
	--close-button-size: 2.5rem;
	--header-height: max(7rem, min(calc(10vh + 10vw), var(--card-height)));
	--secondary-factor: .8;
}

html {
	min-height: 100%;
	background: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), radial-gradient(circle at bottom, #06ffc1, #00e8fe, #5351ff, #f000c7, #ffcb1b) repeat scroll 0 0;
	background: fixed radial-gradient(circle at bottom, #dfa3c1, #3a4761, #0c2637, black);
}

body {
	font-size: calc(.7em + .3vw);
	font-family: "Contrail One";
	margin: 0;
	padding: 0;
	color: #4a5c73;
	min-width: 20em;
	min-height: 100%;
	overflow-x: hidden;
	display: flex;
	flex-direction: column;
}

footer {
	font-family: "Contrail One";
	text-align: center;
	color: white;
	margin: 5em;
}

body>footer a {
	text-align: center;
	color: white;
}

body>footer .logo {
	width: 10em;
}


body>header img {
	margin: auto;
	width: 40%;
	min-width: 40em;
	max-height: 15em;
}

@media (max-width: 40rem) {
	body>header img {
		margin: auto;
		width: 100%;
		min-width: auto;
	}
}

body>p {
	font-family: "Contrail One";
	color: rgba(255, 255, 255, 0.6);
	text-align: center;
	max-width: 50rem;
	margin: 0 auto;
	padding: 0 3rem;
	font-size: calc(1.4em + .1vw);
	line-height: calc(1.3em + .1vw);
}

body>p strong, body>p a {
	color: rgba(255, 255, 255, 0.9);
}

body>h2 {
	font-family: "Contrail One";
	font-size: 3em;
	text-align: center;
	color: rgba(255, 255, 255, 0.9);
	margin-top: 1.5em;
}

body>main {
	max-width: 150em;
	margin: auto;
	flex: 1;
}

body>main>.cards {
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	padding: 0 5vw;
}