@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,400;0,700;1,400;1,700&display=swap');
@import url('static/normalize.min.css');

/* 111827 */
/* F9FAFB */

:root {
	--bg-color: #1f2937;
	--font-color: #F9FAFB;
}

body {
	align-items: center;
	background-color: var(--bg-color);
	box-shadow:
		inset -3px  -3px 0 3px #FF0900,
		inset -6px  -6px 0 6px #FF7F00,
		inset -9px  -9px 0 9px #FFEF00,
		inset -12px -12px 0 12px #00F11D,
		inset -15px -15px 0 15px #0079FF,
		inset -18px -18px 0 18px #A800FF;
	color: var(--font-color);
	display: flex;
	flex-direction: column;
	font-family: 'Source Sans Pro', sans-serif;
	font-size: 16px;
	min-height: 100vh;
	position: relative;
}

header, main, footer {
	box-sizing: border-box;
	padding: 0 2rem;
	margin-top: 2rem;
	max-width: 100ch;
	width: 100%;
}

header {
	border-bottom: 1px dotted #4B5563;
	text-align: center;
}

h1 {
	font-size: 3rem;
	margin: 0;
}

h2 {
	font-size: 2rem;
	margin: 1rem 0 0;
}

p, ul {
	font-size: 1.25rem;
}

p {
	margin: 1.25rem 0 0;
}

ul {
	list-style: none;
	margin: 0;
}

main {
	display: flex;
	flex-direction: column;
	flex: 1;
}

section {
	flex: 1;
}

section:not(:first-of-type) {
	margin: 1.5rem 0 0;
}

a {
	color: #818CF8;
}

embed {
	margin-top: 1.25rem;
}

footer {
	border-top: 1px dotted #4B5563;
	bottom: 0;
	padding-bottom: 4rem;
	padding-top: 2rem;
	text-align: center;
}

footer small {
	font-size: 0.75rem;
	font-style: italic;
}

@media (max-width: 720px) {
	body {
		box-shadow:
			inset -1px -1px 0 1px #FF0900,
			inset -2px -2px 0 2px #FF7F00,
			inset -3px -3px 0 3px #FFEF00,
			inset -4px -4px 0 4px #00F11D,
			inset -5px -5px 0 5px #0079FF,
			inset -6px -6px 0 6px #A800FF;
	}
}