* {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
}

body {
	font-family: sans-serif;
	color: #141700;
	background-color: #fcfef4;
	min-height: 100vh;
}

h1 {
	margin: 20px 0;
}

h2 {
	margin: 20px 0;
	font-size: 1.75em;
}

h3 {
	margin: 20px 0;
	font-size: 1.5em;
}

.user-entered h1 {
	font-size: 1.5em;
	margin: 0.66em 0;
}
.user-entered h2 {
	font-size: 1.3em;
	margin: 0.75em 0;
}
.user-entered h3 {
	font-size: 1.2em;
	margin: 0.83em 0;
}
.user-entered h4, h5, h6 {
	font-size: 1em;
	margin: 1em 0;
}

.light {
	color: #7d8356;
}
.not-light {
	color: #141700;
}

p {
	margin: 1em 0;
}
.no-p p {
	margin: 0;
}

a {
	color: #0b7832;
	transition: 0.4s;
}
a:hover {
	color: #01220d;
	transition: 0.1s;
}

hr {
	color: #84e1a5;
}

.exit-floater {
	position: fixed;
	top: 5em;
	right: 20px;
	padding: 20px;
	background-color: #110310;
	opacity: 0.3;
	color: #f4f9fe;
	transition: 0.1s;
	text-decoration: none;
}

.exit-floater:hover {
	opacity: 0.8;
	background-color: #FF0000;
	color: #110310;
}

.wrap {
	max-width: 800px;
	margin: 0 auto;
	padding: 10px;
	padding-top: 7em;
}

.top-bar {
	width: 100%;
	height: 5em;
	position: fixed;
	top: 0px;
	padding: 20px;
	margin-bottom: 20px;
	background-color: #84e1a5;
	border-bottom: 2px solid #0b7832;
}

@media screen and (max-height: 650px), screen and (max-width: 1000px) {
	.top-bar {
		position: static;
	}
	.wrap {
		padding-top: 10px;
	}
	.exit-floater {
		display: none;
	}
}

.top-bar h1 {
	margin: 0;
	padding: 0;
	font-size: 2em;
}

.top-bar h1 a {
	text-decoration: none;
	margin: 0;
	font-family: sans-serif;
}

.top-bar h1 a:hover {
	color: #e6fcee;
}

.centered-bar {
	max-width: 800px;
	margin: 0 auto;
}

.user-entered {
	background-color: #f5ffcc;
	padding: 10px;
}

table {
	width: 100%;
	border-spacing: 0;
}
td {
	padding: 10px;
	text-align: center;
}
tr:nth-child(odd) {
	background-color: #ebf6bf;
}
tr:nth-child(even) {
	background-color: #f5ffcc;
}
.browse {
	border: 3px solid #84e1a5;
}
.browse tr {
	cursor: pointer;
	transition: background-color 0.4s;
}
.browse tr:first-child {
	background-color: #84e1a5;
	cursor: initial;
}
.browse tr:first-child:hover {
	/* Don't change title color on hover */
	background-color: #84e1a5;
}
.browse tr:hover {
	background-color: #4ac074;
	transition: background-color 0.1s;
}
.browse a:visited {
	color: #01220d;
}

.section, .section-title {
	background-color: #f5ffcc;
	padding: 0.5em;
}
.section-title {
	cursor: pointer;
	margin-bottom: 0;
	border-bottom: 1px solid #0b7832;
}
.section-title::after {
	content: " \25B2"
}
.collapsed-title.section-title::after {
	content: " \25BC"
}
.collapsed-title {
	border-bottom: none;
}
.collapsed {
	display: none;
}

.logout {
	font-size: 1.3em;
}

ul.dash, .user-entered ul {
	list-style: none;
	margin: 5px 20px;
	padding: 5px 20px;
}

ul.dash > li:before, .user-entered ul > li:before {
	display: inline-block;
	content: "- ";
	width: 20px;
	margin-left: -20px;
}

.flashes li {
	list-style: none;
	text-align: center;
	background-color: #84e1a5;
	margin: 10px;
	padding: 10px;
}

input {
	padding: 4px;
	background-color: #e6fcee;
	font-size: 1em;
	border: 2px solid #84e1a5;
}

input[type="submit"] {
	border: none;
	font-size: 1em;
}

input[type="submit"], .button {
	background-color: #84e1a5;
	color: #01220d;
	padding: 0.4em;
	text-decoration: none;
	font-size: 1.1em;
	transition: 0.4s;
}
input[type="submit"]:hover, .button:hover {
	background-color: #4ac074;
	transition: 0.1s;
}
input[type="submit"]:active, .button:active {
	background-color: #0b7832;
}

textarea {
	padding: 8px;
	font-family: sans-serif;
	border: 2px solid #84e1a5;
	background-color: #e6fcee;
}

.login form {
	display: inline;
}
.login, .logout {
	float: right;
}
.login input {
	width: 200px;
}
.login input[type="submit"] {
	width: auto;
	background-color: #4ac074;
}
.login input[type="submit"]:hover {
	background-color: #0b7832;
}

.big-form {
	display: block;
	width: 100%;
	max-width: 400px;
	margin: 0 auto;
	float: none;
	text-align: center;
}
.big-form input, textarea {
	margin-bottom: 20px;
	width: 100%;
}
.big-form input[type="submit"] {
	width: 100%;
}
.big-form img {
	width: 100%;
}

.full-form {
	width: 100%;
}
.full-form input, textarea {
	display: block;
	margin: 20px 0;
	width: 100%;
}
input[type="checkbox"] {
	display: inline;
	width: auto;
	margin: 0;
	margin-right: 10px;
}
.full-form textarea {
	height: 80px;
}
.full-form img {
	max-width: 90%;
}