main {
	padding: 1em;
}
header {
	background: #000;
	margin-bottom: 1em;
}
#message {
	text-align: center;
	color: #FFF;
	padding: 1em;
}
nav {
	background: #fc03c2;
}
nav ul {
	text-align: center;
}
nav li {
	border-bottom: 1px solid #000;
}
@media (min-width: 600px) {
	nav li {
		display: inline-block;
		border-bottom: none;
	}
	main {
		padding: 0px;
		width: 1000px;
		margin: 0px auto;
	}
}
h1, h2, h3 {
	font-family: sans-serif;
}
h2 {
	font-size:24px;
}
h3 {
	font-size:18px;
}
p.field, p.submit, div.logout {
	margin-top: 1em;
}
label {
	display: block;
	font-weight: bolder;
}
input {
	padding: 1ex;
}
textarea {
	min-height: 10em;
	width: 100%;
}
a:link, a:visited, input[type="submit"], button {
	display: inline-block;
	border-radius: 1ex;
	background: #fc03c2;
	text-decoration: none;
	color: #FFF;
	padding: 1em;
	border: none;
}
input[type="submit"]:hover, button:hover, a:hover {
	text-decoration: underline;
	cursor: pointer;
}
a:active {
	text-decoration: none;
}

ul#journal li {
	margin-bottom: 1em;
}
ul#journal div.datapoints dl dt {
	float: left;
	clear: left;
	font-weight: bolder;
	margin-right: 1ex;
}
ul#journal div.datapoints dl dt:after {
	content: ":";
}
ul#journal div.datapoints dl dd {
	float: left;
}
ul#journal p {
	clear: left;
	padding: 1em 0px;
}
ul#graphs li {
	text-align: center;
}
@media (min-width: 600px) {
	ul#graphs li a {
		visibility: hidden;
	}
	ul#graphs li:hover a {
		visibility: visible;
	}
	ul#journal div.datapoints {
		display: inline-block;
		padding-right: 1em;
		margin-right: 1em;
		width: 200px;
		border-right: 1px solid #fc03c2;
		vertical-align: top;
	}
	ul#journal p {
		padding: 0px;
		vertical-align: top;
		display: inline-block;
	}
	div#data_form {
		column-count: 2;
		column-gap: 2em;
		margin: 0px auto;
		width: 600px;
	}
	div#data_form .field {
		break-before: never;
	}
	div#data_form .field.notes {
		break-before: column;
	}
}