/* tab */

/* Font License: bullerdesignscapes.com/s/fonts/SofiaSans/OFL.txt */

* {
	margin: 0;
	padding: 0;
	border: none;
	outline: none;
	box-sizing: border-box;
	-webkit-tap-highlight-color: transparent;
}
menu { list-style: none }
a, button { cursor: pointer }
ul, ol { list-style-position: inside }
button {
	user-select: none;
	-webkit-user-select: none;
	touch-action: manipulation;
}

:root {
	--color: #669999;
	--color-fg: #fff;
	--bg-color: #f7f7f7;
	--bg-color-2: #eaeaea;
	--text-color: #222;
}

@font-face {
  font-family: "SofiaSans";
  src: url("fonts/SofiaSans/SofiaSans-Regular.woff2");
	font-style: normal;
	font-weight: 400;
}
@font-face {
  font-family: "SofiaSans";
  src: url("fonts/SofiaSans/SofiaSans-Bold.woff2");
	font-style: normal;
	font-weight: 700;
}
@font-face {
  font-family: "SofiaSans";
  src: url("fonts/SofiaSans/SofiaSans-ExtraBold.woff2");
	font-style: normal;
	font-weight: 800;
}
@font-face {
  font-family: "SofiaSans";
  src: url("fonts/SofiaSans/SofiaSans-Black.woff2");
	font-style: normal;
	font-weight: 900;
}

body,
input,
button,
textarea {
	font-family: "SofiaSans", sans-serif;
	font-weight: 400;
	font-size: 16px;
	line-height: calc(1.25em);
}

body {
	background-color: var(--bg-color);
	color: var(--text-color);
	min-height: 100vh;
	cursor: default;
}

header {
	padding: 24px 14px;
	position: absolute;
	top: 0;
	z-index: 100;
}
#site-title {
	font-size: 1.875em;
	font-weight: 900;
	text-transform: uppercase;
	color: #fff;
	text-shadow: 0 0 8px rgba(0,0,0,.75);
	text-align: center;
}
.large {
	font-size: 1.5em;
	line-height: .875em;
	font-weight: 700;
}
.little {
	margin-left: -4px;
	font-size: .25em;
}

.row,
.col { display: flex }
.row { flex-flow: row nowrap }
.col { flex-flow: column nowrap }
.grow { flex-grow: 1 }
.center { align-items: center }
.wrap { flex-wrap: wrap }

#banner {
	width: 100vw;
	height: auto;
}

h1 {
	font-size: 1.5em;
	line-height: 1.25em;
}
h2 {
	font-size: 1.25em;
	line-height: 1.25em;
}

article, footer {
	padding: 14px;
}

menu {
	background-color: var(--color);
	color: var(--color-fg);
	padding: 28px 14px;
	padding-top: 68px;
	line-height: 1.125em;
	overflow: scroll;
	position: fixed;
	z-index: 130;
	right: 10px;
	text-align: center;
	width: 130px;
	height: calc(100vh - 10px);
	gap: 24px;
	top: -100vh;
}
.menu menu {
	top: 10px;
	bottom: 0;
}
.menu #toggle {
	box-shadow: 0 4px 8px rgba(102,153,153,1);
}
#toggle {
	width: 110px;
	height: 40px;
	position: fixed;
	z-index: 150;
	top: 10px;
	right: 20px;
	background-color: var(--color);
	color: var(--color-fg);
	text-align: center;
	font-weight: 900;
	text-transform: uppercase;
	justify-content: center;
}
.on {
	font-size: 2em;
	line-height: 1.375em;
}
body:not(.menu) .on,
.menu .off { display: none }

a {
	color: var(--text-color);
	text-decoration-color: var(--color);
	text-decoration-thickness: 2px;
	text-underline-offset: 3px;
	font-weight: 700;
}

menu a {
	color: var(--color-fg);
	text-transform: uppercase;
	font-weight: 800;
	text-decoration: none;
	display: block;
}
menu li,
menu a {
	width: 100%;
	text-align: center;
}

.border-top {
	border-top: 2px solid var(--color-fg);
	padding-top: 28px;
}

article {
	gap: 24px;
}

.text-right { text-align: right }

section {
	gap: 14px;
}