/* base.css */

:root {
	--color-indigo-cool: #668bf1;
	--color-gold: #c18722;
	--color-gold-shade-2: #e6cfa7;
	--color-gold-shade-7: #130e03;
	--color-asphalt: #333333;
	--color-void: #808080;
	--color-red-warm: #e9672d;
	--color-green-cool: #00a926;
	--color-pale: #f2f2f2;
	--color-meh: #c4c4c4;

	--background-dark: var(--color-asphalt);
	--background-mid: var(--color-void);
	--background-light: var(--color-pale);
	--border-color-dark: var(--color-void);
	--text-color-light: var(--color-pale);
	--text-color-dark: var(--color-asphalt);

	--border-width: 1px;

	--header-height: 80px;

	--row-vertical-spacing: 10px;
	--row-horizontal-spacing: 8px;
}

@font-face {
	font-family: 'public-sans-regular';
	src: url('/static/webfonts/public-sans/PublicSans-Regular.woff2') format('woff2'), url('/static/webfonts/public-sans/PublicSans-Regular.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

body, html, div, section, p, h1, h2, h3, h4, h5, img {
	margin: 0;
	padding: 0;
	font-weight: 300;
}

body {
	font-family: 'public-sans-regular', sans-serif;
	font-size: 18px;
	line-height: 1.2em;
	color: var(--text-color-light);
	background-color: var(--color-gold-shade-7);
}

h1, h2, h3, h4, h5 {
	line-height: 1.2em;	
}

#page {
	position: relative;
	background-color: var(--color-gold-shade-2);
}

#content {
	position: relative;
}

header {
	background-color: var(--color-gold-shade-2);
	height: var(--header-height);
	padding: var(--row-vertical-spacing) var(--row-horizontal-spacing);
	border-bottom: solid var(--border-width) var(--border-color-dark);
}

header img {
	height: calc(var(--header-height));
	position: relative;
	top: 3px;
}

.row {
	position: relative;
}

.row.inner-padded {
	padding: var(--row-vertical-spacing) var(--row-horizontal-spacing);
}