:root {
	--background: #c9b458;
	--umber: #804000;
	--tangerine: #ff8000;
	--onyx: #171614;
	--lightgold: #e2d58b;
	--custard: #f0e2a3;
}

html, body {
	background-color: var(--custard);
	font-family: "Overpass Mono", "Courier New", Courier, monospace;
	color: var(--onyx);
}

/* overpass-mono-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Overpass Mono';
  font-style: normal;
  font-weight: 300;
  src: url('/assets/fonts/overpass-mono-v21-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* overpass-mono-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Overpass Mono';
  font-style: normal;
  font-weight: 400;
  src: url('/assets/fonts/overpass-mono-v21-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* overpass-mono-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Overpass Mono';
  font-style: normal;
  font-weight: 500;
  src: url('/assets/fonts/overpass-mono-v21-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* overpass-mono-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Overpass Mono';
  font-style: normal;
  font-weight: 600;
  src: url('/assets/fonts/overpass-mono-v21-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* overpass-mono-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Overpass Mono';
  font-style: normal;
  font-weight: 700;
  src: url('/assets/fonts/overpass-mono-v21-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

.header {
	width: 100%;
	height: 2rem;
	display: flex;
	justify-content: center;
}

.header > div {
	min-width: 40%;
	display: flex;
	justify-content: space-between;
	line-height: calc(2rem - 0.1rem);
	border-bottom: solid var(--umber) 0.1rem;
}

.header > div > a {
	margin-left: 1rem;
	text-decoration: none;
	color: var(--onyx);
}
.header > div > a:hover {
	color: var(--tangerine);
}
.header > div > a:active {
	color: var(--umber);
}

.header > div img {
	cursor: pointer;
}
.header > div img:hover {
	filter: brightness(1.2);
}
.header > div img:active {
	filter: brightness(0.8);
}

.chosen-tab {
	border-bottom: solid var(--umber) 0.1rem;
}

.content {
	margin: 5rem 10rem 2rem 10rem;
	display: flex;
	flex-direction: column;
	align-items: center;
}

.content > div {
	margin-bottom: 5rem;
	background-color: var(--lightgold);
	padding: 1rem;
	width: 60rem;
	max-width: 100vw;
}

#intro-card {
	display: flex;
	align-items: center;
	justify-content: space-around;
}

#intro-card > div {
	max-width: 30rem;
}

#intro-card > div > h1 {
	margin-left: 2rem;
}