* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-size: 100%;
	font: inherit;
	/* outline: solid 1px rgba(0,0,0,.2); */
}

@font-face {
	font-family: 'Monument Grotesk';
	src: url('fonts/MonumentGrotesk-Regular.woff2') format('woff2');
	font-style: normal;
	font-weight: normal;
}

html, body {
	height: 100%;
}

body {
	font-size: 18px;
	line-height: 1.5rem;
	font-family: 'Monument Grotesk', sans-serif;
	text-transform: uppercase;
	letter-spacing: 1px;
	background: #fef000;
	transition: all .3s cubic-bezier(0.19, 1, 0.22, 1);
}

body.loading {
	cursor: wait;
}

/* *:focus {
	outline: solid 6px rgba(0,0,0,.4);
} */

a {
	color: inherit;
	text-decoration: none;
}

img {
	max-width: 100%;
}

header {
	padding: 18px;
}

main {
	padding-left: calc(60px + 18px);
	/* header width/height + general padding, might need to change later */
	padding-right: 18px;
	overflow-y: hidden;
}

main, header {
}

::selection {
	background: rgba(0,0,0,.99);
	color: #fff;
}

@media (max-width: 700px), (max-height: 500px) {
	main {
		padding-left: 60px;
	}
}