html {
	font-size: 16px;
}

@media screen and (max-width: 1280px) { html { font-size: 15px; } }
@media screen and (max-width: 1060px) { html { font-size: 14px; } }
@media screen and (max-width: 900px) { html { font-size: 13px; } }
@media screen and (max-width: 720px) { html { font-size: 12px; } }

.full {
	width: 100%;
	height: 100%;
}
body {
	margin: 0;
	background-color: #fff;
}
nav {
	position: relative;
	z-index: 2;
	display: flex;
	height: 4rem;
	border-bottom: 1px solid #ccc;
	background-color: #303440;
}
#inner-nav {
	display: flex;
	padding-left: 0.5rem;
}
.nav-item {
	font-family: Noto Sans, Gadugi, sans-serif;
	text-decoration: none;
	color: #bbc;
}
.nav-item span {
	display: block;
	height: calc(100% - 1.3rem);
	font-size: 1.3rem;
	font-weight: bold;
	padding-top: 1.3rem;
	padding-left: 0.6rem;
	padding-right: 0.6rem;
	margin-left: 0.5rem;
	margin-right: 0.5rem;
}
.nav-item :hover {
	color: #fff0a0;
}
.nav-item-cur {
	color: #dde;
}
.nav-item-cur :hover {
	color: #fff0a0;
}
.nav-dropdown {
	background-color: inherit;
	user-select: none;
	cursor: default;
	overflow: hidden;
}
.nav-dropdown div {
	background-color: inherit;
	padding-top: 0.2rem;
	font-size: 1rem;
	border-bottom-left-radius: 6px;
	border-bottom-right-radius: 6px;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	width: 100%;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: clip;
}
.nav-dropdown div p {
	margin-top: 0;
	margin-bottom: 0.5rem;
}
.nav-dropdown div a {
	text-decoration: none;
	color: #eee;
	margin-top: 0.5rem;
	padding-left: 1rem;
	padding-right: 2rem;
}
/* this CSS selector only works if you take out the whitespace in the selector itself... ??? */
div.nav-dropdown:hover {
	overflow: visible;
}

hr {
	width: 100%;
	height: 1px;
	background-color: #ccc;
	border-top: 0;
	border-bottom: 0;
	border-left: 2px solid #e0e0e0;
	border-right: 2px solid #e0e0e0;
}
.button {
	font-family: Noto Sans, Gadugi, sans-serif;
	font-weight: bold;
	padding: 0.65rem;
}
.no-margin-top-bottom {
	margin-top: 0;
	margin-bottom: 0;
}
.flex-column {
	display: flex;
	flex-direction: column;
}
.flex-g {
	flex-grow: 1;
}
.link a {
	text-decoration: none;
	color: #222;
}
.link a:hover {
	text-decoration: underline;
}