* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}

img,
.noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none; /* Safari */
	-khtml-user-select: none; /* Konqueror HTML */
	-moz-user-select: none; /* Old versions of Firefox */
	-ms-user-select: none; /* Internet Explorer/Edge */
	user-select: none; /* Non-prefixed version, currently
                                    supported by Chrome, Edge, Opera and Firefox */
}

html {
	font-size: 62.5%;
}

body {
	font-family: "Funnel Sans", sans-serif;
	font-optical-sizing: auto;
	position: relative;
	/* making the footer stay on the bottom */
	display: flex;
	min-height: 100vh;
	flex-direction: column;
	justify-content: flex-start;
}

/* COLORS */
/* HEADER: #29322e  #364037 #96b298  #fafafa */

/* HEADER */
.masthead {
	width: 100%;
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 1.2rem;
	padding: 2rem 8rem;
	background-color: #364037;
	color: #fafafa;

	font-size: 1.8rem;
	z-index: 9999;
}

.masthead-nav {
	display: flex;
	gap: 3rem;
}

.masthead-link:link,
.masthead-link:visited {
	color: #fafafa;
	text-decoration: none;
	transition: all 200ms;
}
.masthead-link:hover,
.masthead-link:active {
	color: #d1d1d1;
}

/* FOOTER */
.footer {
	display: flex;
	margin-top: auto;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2.4rem;
	padding: 2rem 8rem;
	background-color: #364037;
	color: #bbd8bd;

	font-size: 1.4rem;
}

.footer-logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4rem;
}

.footer-link:link,
.footer-link:visited {
	color: #bbd8bd;
	text-decoration: none;
	transition: all 200ms;
}
.footer-link:hover,
.footer-link:active {
	color: #96b298;
}

.footer-icon {
	width: 3rem;
	height: 3rem;
}

/* 404 */
.e404-container {
	display: grid;
	width: 100%;
	grid-template-columns: 1fr 3fr;
	padding: 10rem 10rem;
	justify-content: center;
	align-content: center;
	align-items: center;
}

.e404-left {
	font-size: 25rem;
}

.e404-right {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	align-items: flex-start;
	justify-content: center;
	font-size: 2rem;
}