html, body, #container { height: 100%; }
body { background: rgb(25,30,35); color: #CCC; font-size: 1.8rem; font-family: system-ui, -apple-system, -apple-system-font, 'Segoe UI', 'Roboto', sans-serif; }
h1, h2, h3, p, ul, ol, figure, table, video { margin: 0 0 2rem 0; }
ul { padding: 0 0 0 2rem; list-style-type: square; }
ol {}
a, .link { color: var(--blue-dark); text-decoration: none; border-bottom: 2px solid; cursor: pointer; }
h1 { font-size: 2.4rem; }
h2 { font-size: 2.2rem; }
h3 { font-size: 2.0rem; }

input[type=text],
input[type=password],
input[type=number],
input[type=date],
input[type=time],
input[type=datetime-local],
input[type=month],
input[type=week],
input[type=year],
input[type=email],
input[type=tel],
input[type=url],
input[type=search],
textarea,
select,
button,
.button,
.bullet { padding: 1rem; background: rgba(255,255,255,.05); color: var(--light); border-radius: .5rem; border: .1rem solid transparent; }
button, .button { cursor: pointer; text-align: center; padding: 1rem 2rem; background: var(--blue-dark); color: var(--dark);  }
button.inverted,
.button.inverted,
.bullet { background: transparent; border-color: var(--blue-dark); color: var(--blue-dark); }
.bullet { text-transform: uppercase; display: inline-block; padding: 0 1rem .3rem 1rem; }

form.standard { display: flex; flex-direction: column; }
form .field { padding: 0 0 2rem 0; display: flex; flex-direction: column; }
form .field * { flex-grow: 1; }
form .field:last-child { padding: 0; }

main { padding: 2rem; }

@media (min-width: 960px) {
	.action.back { display: none; }
	#container { margin: 0 auto; width: 90rem; }
	main { padding: 4rem; }
}