@font-face {
	font-family: "Poppins";
	src:
		url("/fonts/poppins-light-webfont.woff2") format("woff2"),
		url("/fonts/poppins-light-webfont.woff") format("woff");
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src:
		url("/fonts/poppins-lightitalic-webfont.woff2") format("woff2"),
		url("/fonts/poppins-lightitalic-webfont.woff") format("woff");
	font-weight: 300;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src:
		url("/fonts/poppins-semibold-webfont.woff2") format("woff2"),
		url("/fonts/poppins-semibold-webfont.woff") format("woff");
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Poppins";
	src:
		url("/fonts/poppins-semibolditalic-webfont.woff2") format("woff2"),
		url("/fonts/poppins-semibolditalic-webfont.woff") format("woff");
	font-weight: 600;
	font-style: italic;
	font-display: swap;
}

:root {
	/* Fonts */
	--primary-font: "Poppins", -apple-system, Helvetica, Arial, sans-serif;
	--font-weight-default: 300;
	--font-weight-bold: 600;
	--line-height: 1.5;

	/* Colors */
	--color-one: #eb5b33;
	--color-one-h: 13;
	--color-one-s: 82%;
	--color-one-l: 56%;
	--color-one-r: 235;
	--color-one-g: 91;
	--color-one-b: 51;
	--color-two: #1496dc;
	--color-two-h: 204;
	--color-two-s: 87%;
	--color-two-l: 43%;
	--color-two-r: 20;
	--color-two-g: 150;
	--color-two-b: 220;
	--color-three: #51af50;
	--color-three-h: 120;
	--color-three-s: 39%;
	--color-three-l: 50%;
	--color-three-r: 81;
	--color-three-g: 175;
	--color-three-b: 80;
	--color-gray-0: #f8f9fa;
	--color-gray-1: #f1f3f5;
	--color-gray-2: #e9ecef;
	--color-gray-3: #dee2e6;
	--color-gray-4: #ced4da;
	--color-gray-5: #adb5bd;
	--color-gray-6: #868e96;
	--color-gray-7: #495057;
	--color-gray-8: #343a40;
	--color-gray-9: #212529;

	/* Sizes and widths */
	--content-w-wide: 80rem;
	--content-w-regular: 60rem;
	--content-w-narrow: 40rem;
	--content-w-narrower: 20rem;
	--aspect-ratio: 16/9;
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

@media screen and (min-width: 40rem) {
	html {
		font-size: 112.5%; /* 1rem = 18px */
	}
}

body {
	box-sizing: border-box;
	font-family: var(--primary-font);
	font-size: 1rem;
	font-weight: var(--font-weight-default);
	line-height: var(--line-height);
}

@media screen and (min-width: 60rem) {
	body {
		font-size: 1.25rem;
	}
}

@media screen and (min-width: 80rem) {
	body {
		font-size: 1.5rem;
	}
}

.container {
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	padding: 0 2rem;
}

@media screen and (min-width: 90rem) {
	.container {
		width: var(--content-w-wide);
	}
}

.color-one {
	color: var(--color-one);
}

.color-two {
	color: var(--color-two);
}

.color-three {
	color: var(--color-three);
}

.site {
	background: var(--color-gray-0);
	color: var(--color-gray-9);
	display: flex;
	flex-flow: column;
	margin: auto;
	min-height: 100vh;
}

.site_header {
	align-items: center;
	display: flex;
	flex-direction: column;
	gap: 1rem;
	justify-content: space-between;
	margin: 1rem 2rem 4rem;
}

@media screen and (min-width: 30rem) {
	.site_header {
		flex-direction: row;
	}
}

@media screen and (min-width: 60rem) {
	.site_header {
		flex-direction: column;
	}
}

@media screen and (min-width: 80rem) {
	.site_header {
		flex-direction: row;
		margin: 1rem 2rem 6rem;
	}
}
.site_main {
	margin-bottom: 4rem;
}

.site_footer {
	font-size: 1rem;
	line-height: 1.2;
	margin: auto 2rem 1rem;
}

.site_footer a {
	text-decoration-thickness: 1px;
}

.site_footer .dot {
	color: var(--color-one);
	padding: 0 0.25em;
}

/* Main Navigation */

.site_logo {
	max-width: 100%;
	width: 375px;
}

.mainNavigation {
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	align-items: center;
	font-weight: 300;
	/* margin-top: 2rem; */
}

@media screen and (min-width: 40rem) {
	.mainNavigation {
		flex-direction: row;
		width: auto;
	}
}

@media screen and (min-width: 80rem) {
	.mainNavigation {
		margin-top: 0;
	}
}

#mainmenu {
	display: flex;
	margin-top: 2rem;
}

li.nav-item {
	flex-basis: content;
	margin-top: 0;
	width: 100%;
}

.mainNavigation a {
	background-color: var(--color-gray-2);
	border-bottom: 2px solid transparent;
	border-radius: 2px;
	color: var(--color-one);
	display: block;
	font-size: 1rem;
	margin-top: 0.25rem;
	padding: 1em 1.25em 0.75em;
	text-align: center;
	text-decoration: none;
	width: 100%;
}

.mainNavigation .highlight {
	background-color: var(--color-two);
	color: var(--color-gray-0);
}

.mainNavigation .highlight:hover {
	background-color: var(--color-one);
	color: var(--color-gray-0);
}

@media screen and (min-width: 60rem) {
	.mainNavigation a {
		margin: 1rem 1rem 0 0;
		width: auto;
	}
}

@media screen and (min-width: 80rem) {
	.mainNavigation a {
		margin-top: 0;
	}
}

.mainNavigation a[aria-current] {
	background-color: var(--color-one);
	color: var(--color-gray-0);
}

.mainNavigation a:hover {
	background-color: var(--color-gray-2);
	border-bottom-color: var(--color-one);
	color: var(--color-one);
}

.mainNavigation a.highlight:hover {
	background-color: var(--color-two);
	border-bottom-color: var(--color-one);
	color: var(--color-gray-0);
}

.mainNavigation li:last-child a {
	margin-right: 0;
}

/* Mobile Navigation */

.open-btn,
.close-btn {
	--button-color-bg: #fff;
	--button-color-shadow: var(--color-gray-9);
	margin-top: 0;
	padding: 1rem 1.25rem;
}

@media (width >= 60rem) {
	.site_header .open-btn,
	.site_header .close-btn {
		display: none;
	}
}

.open-btn {
	width: 100%;
}

.open-btn[aria-expanded="true"] + .menu-container {
	translate: 0;
}

@media (prefers-reduced-motion) {
	.open-btn[aria-expanded="true"] + .menu-container {
		opacity: 1;
	}
}

.open-btn-txt {
	font-size: 1rem;
	font-weight: var(--font-weight-bold);
	margin-left: 0.25rem;
}

.close-btn {
	align-self: flex-end;
	background-color: var(--color-gray-2);
	color: var(--color-one);
}

@media (width < 60rem) {
	.menu-container {
		display: flex;
		flex-direction: column;
		position: fixed;
		inset: 0;
		padding: 1rem;
		background-color: var(--color-one);
		translate: 100vw 0;
		transition: translate 0.3s ease-in-out;
		z-index: 1000;
	}
}
@media (width < 60rem) and (prefers-reduced-motion) {
	.menu-container {
		translate: 0;
		opacity: 0;
		transition: opacity 500ms ease-in-out;
	}
}

@media (width < 60rem) {
	.menu-links {
		align-items: center;
		flex-direction: column;
		gap: 1rem;
	}
}

.menu-links {
	justify-content: center;
}