:root {
	--color-base: #231F20;
	--color-accent: #be1e2d;
	--color-accent-shift: #1a3f70;

	--color-black: #231F20;
	--color-green: #46813e;
	--color-blue: #1a3f70;
	--color-yellow: #fac90e;
	--color-red: #be1e2d;
	--color-white: #fff;
	--color-eggshell: #f7f8f9;

	--font-family-primary: sans-serif;
	--font-family-secondary: sans-serif;

	--layout-content-width: 72rem;
	--layout-full-width: 120rem;
	--fixed-header-spacing: 184px; /* Sets a default spacing */
}

html {
	-webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -moz-text-size-adjust: none;
    -webkit-text-size-adjust: none;
    text-size-adjust: none;
    text-rendering: optimizeLegibility;
    scroll-behavior: smooth;
    font-family: var(--font-family-primary);
	scroll-padding-top: 16vh;
	scroll-behavior: smooth;
}

body {
	color: var(--color-base);
	line-height: 1.25;
	min-height: 100vh;
}

html, body {
	overflow-x: hidden;
	overflow-x: clip;
}

main {

}

aside {

}

section {
	margin: 3em auto;
}

section .container {
	max-width: var(--layout-content-width);
	margin: 0 auto;
	padding: 0 1.5em;
}

p {
	font-size: 1.2rem;
	line-height: 1.6;
}

p + p,
ul + p,
ol + p {
	margin-top: 1em;
}

a {
	color: var(--color-accent);
	text-decoration: underline;
	text-underline-offset: 0.2em;
	transition: 0.2s ease;
}

a:hover,
a:focus {
	/* text-underline-offset: 0.25em; */
}

.buttons {
	display: flex;
	align-items: center;
	flex-flow: row wrap;
	list-style: none;
	padding-left: 0;
	margin: 1em auto;
}

a.button,
button.button,
input.button {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 0.5em 1em;
	color: var(--color-white);
	background: var(--color-accent);
	border-radius: 3px;
	font-size: 1.125rem;
	text-decoration: none;
	transition: 0.2s ease;
	margin-right: 0.5em;
	margin-bottom: 0.5em;
}

a.button:hover,
a.button:focus,
button.button:hover,
button.button:focus,
input.button:hover
input.button:focus {
	background: var(--color-accent-shift);
	text-decoration: underline;
}

b, strong {
	font-weight: 600;
}

h1 {
	font-size: 2.75rem;

}

h2 {
	font-size: 2rem;
}

h3 {
	font-size: 1.5rem;
}

h4 {
	font-size: 1.25rem;
}

h5 {
	font-size: 1rem;
}

h1,
h2,
h3,
h4,
h5 {
    font-family: var(--font-family-secondary);
    text-wrap: balance;
    line-height: 1.2;
	font-weight: 600;
	margin-bottom: 0.35em;
}

ul, ol {
	padding-left: 2em;
	margin-bottom: 1em;
}

ul {
	list-style: outside disc;
}

blockquote {
	font-style: italic;
	font-size: 1.25rem;
	line-height: 1.6;
	text-align: center;
	margin: 1em auto;
	padding: 1em;
	background: #f6f9fc;
}

address {
	font-style: normal;
}

figure {
	display: block;
}

img {
	display: block;
	max-width: 100%;
	height: auto;
	border: none;
}

figcaption {
	font-size: 1rem;
	font-style: italic;
}

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}

.screen-reader-text {
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto;
	color: #21759b;
	display: block;
	font-size: 14px;
	font-weight: bold;
	height: auto;
	line-height: normal;
	padding: 15px 23px 14px;
	position: absolute;
	left: 5px;
	top: 5px;
	text-decoration: none;
	text-transform: none;
	width: auto;
	z-index: 100000;
}

::-moz-selection {
	background: var(--color-accent);
	color: var(--color-white);
	text-shadow: none;
}

::selection {
	background: var(--color-accent);
	color: var(--color-white);
	text-shadow: none;
}