/* FONTS
--------------------------------------------------*/

@font-face {
	font-family: 'graphik-md';
	src: url('/fonts/graphik-medium.woff2') format('woff2');
}
@font-face {
	font-family: 'graphik-sb';
	src: url('/fonts/graphik-semibold.woff2') format('woff2');
}

/* CORE
--------------------------------------------------*/

:root {
	--color-brand: #ec0037;
	--color-1000: #000000;
	--color-900: #18191a;
	--color-800: #2e3542;
	--color-700: #454b58;
	--color-600: #5c626d;
	--color-500: #737883;
	--color-400: #8a8f99;
	--color-300: #a1a6af;
	--color-200: #b8bcc4;
	--color-100: #d4d7de;
	--color-50: #f0f2f7;
	--color-00: #fff;
	--container: 640px;
	--container-wide: 900px;
}
* {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-size: 100%;
	vertical-align: baseline;
	background: transparent;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}
address,article,aside,figure,footer,header,hgroup,nav,section {
	display: block;
}
body {
	font-family: "graphik-md", system-ui, sans-serif;
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
	background: #fff;
	margin: 2rem;
}
::-moz-selection {
	color: var(--color-00);
	background: var(--color-1000);
}
::selection {
	color: var(--color-00);
	background: var(--color-1000);
}

/* LINKS
--------------------------------------------------*/

a:link,
a:visited {
	color: var(--color-1000);
	text-decoration-color: var(--color-brand);
	text-decoration-thickness: .1em;
	text-underline-offset: 2px;
}
a:hover {
	text-decoration: none;
}

/* LAYOUT AND TYPOGRAPHY
--------------------------------------------------*/

footer, header, main {
	max-width: var(--container);
	margin: 0 auto;
}
footer p {
	color: var(--color-500);
	font-size: 1.2rem;
	line-height: 1.4;
}
header {
	background-size: 2rem 2rem;
	margin-bottom: 2rem;
}
header h1 {
	font-family: "graphik-sb", system-ui, sans-serif;
	font-weight: normal;
	font-size: 3rem;
	line-height: 1;
	font-weight: normal;
	color: var(--color-1000);
	margin-bottom: 1.5rem;
	padding-right: 2.75rem;
}
header p {
	font-size: 1.4rem;
	line-height: 1.4;
	margin-bottom: 1rem;
	color: var(--color-500);
}
main {
	margin-bottom: 3rem;
}
main > div {
	background: rgba(0,0,0,.9);
	position: relative;
	padding-top: 56.25%;
	margin-bottom: 1.5rem;
}
main > div,
main > div iframe {
	border-radius: .5rem;
}
main > div:before {
	content: "loading…";
	position: absolute;
	top: 50%;
	left: 0;
	margin-top: -1rem;
	width: 100%;
	font-size: 1.5rem;
	text-align: center;
	text-transform: none;
	color: var(--color-00);
}
strong {
	font-family: "graphik-sb", system-ui, sans-serif;
	font-weight: normal;
	color: var(--color-800);
}

/* BIG TIME
--------------------------------------------------*/

@media screen and (min-width: 744px) {
		body {
			margin: 3rem;
		}
}