/** MARK: Reset
*/

* {
	box-sizing: border-box;
}

body {
	margin: 0;
}

/** MARK: Colors
*/
:root {
	--color-earth: #372a2d;
	--color-clay: #762d02;
	--color-chartreuse: #c5ce27;
	--color-sage: #8f9b72;
	--color-slate: #526f75;
}
.font-earth { color: var(--color-earth); }
.font-clay { color: var(--color-clay); }
.font-chartreuse { color: var(--color-chartreuse); }
.font-sage { color: var(--color-sage); }
.font-slate { color: var(--color-slate); }
.font-white { color: white; }

/** MARK: Fonts
*/
@font-face {
	font-display: swap;
	font-family: 'Flora';
	font-style: normal;
	font-weight: 400;
	src: url('/fonts/Flora.woff2') format('woff2');
}

@font-face {
	font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
	font-family: 'Quicksand';
	font-style: normal;
	font-weight: 300 700;
	src: url('/fonts/Quicksand[wght].woff2') format('woff2');
}

/* lora-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: 'Lora';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/lora-v37-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* lora-italic - 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: 'Lora';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/lora-v37-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* lora-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: 'Lora';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/lora-v37-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* lora-700italic - 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: 'Lora';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/lora-v37-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

.font-flora { font-family: "Flora", sans-serif; }
.font-quicksand { font-family: "Quicksand", sans-serif; }
.font-lora { font-family: "Lora", serif; }
.font-bold { font-weight: bold; }

/** MARK: Layout
*/
html {
	width: 100%;
	height: 100%;
}
body {
	width: 100%;
	height: 100%;
	color: white;
	background-color: #3F4138;
	display: flex;
	flex-direction: row;
	font-family: "Quicksand", sans-serif;
}
header {
	background: #a1a896;
}
main {
	height: 100%;
	flex-grow: 1;
}
@media (max-width: 768px) {
	body {
		flex-direction: column;
	}
	main {
		height: auto;
	}
}
.center-xy {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}
.flex-col {
	display: flex;
	flex-direction: column;
}
.text-lg {
	font-size: 1.2em;
}
.h-1 {
	height: 1em;
}
.h-half {
	height: 0.5em;
}
.p-1 {
	padding: 1em;
}
.p-2 {
	padding: 2em;
}
.wrap-pretty {
	text-wrap: pretty;
}