:root {
	--background: #f7f0eb;
	--blue: #318ce7;
	--darkpurple: #9440a0;
	--green: #64ad66;
	--pink: #cb5699;
	--purple: #7561c1;
	--red: #e53f51;
	--yellow: #ffce03;
	--orange: #f78d2b;
	--navy: #364c93;
	--neutral: #000000;
	--font_main: Montserrat, sans-serif;
	--font_code: 'Source Code Pro', monospace;
}

@font-face {
	font-family: Montserrat;
	font-style: normal;
	font-weight: 600;
	src: url('../fonts/Montserrat-SemiBold.ttf') format('truetype');
}

@font-face {
	font-family: Montserrat;
	font-style: italic;
	font-weight: 500;
	src: url('../fonts/Montserrat-MediumItalic.ttf') format('truetype');
}

@font-face {
	font-family: Montserrat;
	font-style: normal;
	font-weight: 500;
	src: url('../fonts/Montserrat-Medium.ttf') format('truetype');
}

@font-face {
	font-family: Montserrat;
	font-style: italic;
	font-weight: 600;
	src: url('../fonts/Montserrat-SemiBoldItalic.ttf') format('truetype');
}

@font-face {
	font-family: Montserrat;
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/Montserrat-Regular.ttf') format('truetype');
}

@font-face {
	font-family: Montserrat;
	font-style: italic;
	font-weight: 400;
	src: url('../fonts/Montserrat-Italic.ttf') format('truetype');
}

@font-face {
	font-family: Montserrat;
	font-style: normal;
	font-weight: 700;
	src: url('../fonts/Montserrat-Bold.ttf') format('truetype');
}

@font-face {
	font-family: Montserrat;
	font-style: italic;
	font-weight: 700;
	src: url('../fonts/Montserrat-BoldItalic.ttf') format('truetype');
}

@font-face {
	font-family: 'Source Code Pro';
	font-style: normal;
	font-weight: 400;
	src: url('../fonts/SourceCodePro-Regular.ttf') format('truetype');
}

*, *:before, *:after {
	box-sizing: border-box;
	outline-offset: 0.2em;
	text-decoration-skip-ink: auto;
	font-family: inherit;
}

*:focus {
	outline: 3px solid var(--yellow);
}

body, html {
	max-width: 100vw;
	overflow-x: hidden;
}

body {
	position: absolute;
	top: 0;
	width: 100vw;
	margin: 0;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	flex-direction: column;
}

.sr-only {
	position: absolute;
	right: -200vw;
}

main {
	padding: 50px 20px;
}

body {
	color: var(--neutral);
	font-family: var(--font_main);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
}

a {
	color: var(--darkpurple);
	font-weight: bolder;

	&:hover {
		text-decoration: none;
	}
}

pre, code {
	font-family: var(--font_code);
	font-weight: 400;
}

h1, h2, h3 {
	font-weight: 700;
	text-transform: uppercase;
}

h1 {
    font-size: 3.5em;
	margin-top: 0;
}

h2 {
	color: var(--darkpurple);
}

h3 {
	color: var(--navy);
}

h1 a, h2 a, h3 a, h4 a, h5 a {
	color: inherit;
	text-decoration: none;
}

h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover {
	text-decoration: underline;
}

.pattern {
	position: absolute;
	top: 0;
	left: 0;
	min-width: 100vh;
	min-height: 100vh;
	z-index: -1;
	background: var(--background);
}

@media(min-aspect-ratio: 1/1) {
	.pattern {
		min-width: 100vw;
		min-height: 100vw;
	}
}

@media(min-width: 50em) {
	main {
		padding: 50px;
	}

	h1 {
		font-size: 5em;
	}
}

@media(min-width: 60em) {
	main {
		padding: 50px 5vw;
	}
}

@media(min-width: 70em) {
	main {
		padding: 50px 10vw;
	}
}

@media(min-width: 80em) {
	main {
		width: 90vw;
		max-width: 1200px;
		margin: 0 auto;
		padding: 50px;
	}
}