/* Base Styles
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
html {
	font-size: 112.5%;
}

body,
button,
input,
select,
optgroup,
textarea {
	font-family: 'Barlow', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
	font-size: 1em;
	font-weight: 400;
	color: var(--color-text);
}

/* 1200px */
@media (max-width: 75em) {

	html {
		font-size: 100%;
	}

}


/* Typography
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5 {
	margin: 0;
	font-family: inherit;
	font-weight: bold;
}

h1, .h1 {
	margin-bottom: 0.5em;
	font-size: 2em;
	line-height: 1.2;
}

h2, .h2 {
	margin-top: 1.25em;
	font-size: 1.75em;
	line-height: 1.175;
}

h3, .h3 {
	margin-top: 1.25em;
	margin-bottom: -0.25em;
	font-size: 1.35em;
	line-height: 1.225;
}

h4, .h4 {
	margin-top: 1.5em;
	margin-bottom: -0.5em;
	font-size: 1.15em;
	line-height: 1.4;
}

h5, .h5 {
	margin-top: 1.5em;
	margin-bottom: -1em;
	font-size: 1em;
	line-height: 1.6;
}

.main-content :where(h2, .h2, h3, .h3, h4, .h4, h5, .h5):first-child {
	margin-top: 0;
}

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

small {
	font-size: 0.889em;
}

/* 720px */
@media (max-width: 45em) {

	h1, .h1 {
		font-size: 1.75em;
	}

	h2, .h2 {
		font-size: 1.5em;
	}

}


/* Links
–––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––––– */
a {
	color: var(--color-primary);
	text-decoration: underline;
	text-underline-offset: 0.25em;
	text-decoration-thickness: 1px;
	cursor: pointer;
}

a:hover,
a:focus,
a:active {
	text-decoration-thickness: 2px;
	text-decoration-color: var(--color-secondary);
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}