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


/** GLOBALS */
/* TODO: clean out uses of magic values */
:root {
	/* Sizes */
	--spacing-sm: .35rem;
	--spacing-base: 1rem;

	--text-sm: .8rem;
	--text-base: 1rem;
	--text-lg: 1.2rem;
	--text-xl: 2rem;

	/* Typography */
	--main-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

	--text-light: 100;
	--text-normal: 400;

	/* Colors */
	--black: #333;
	--gray: #eee;
	--white: #ebf5fe;
	--orange: #ff3e00;
	--azure: #007ff0;
	--blue: #0050a0;
}


/** LAYOUT */
html, body {
	width: 100%;
	height: 100%;
}

body {
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}

main {
	margin: var(--spacing-sm);
	height: 100%;

	display: grid;
	overflow: hidden;
	gap: var(--spacing-sm);

	background: var(--gray);
}

section {
	padding: var(--spacing-sm);
	min-width: 0;
	overflow: auto;

	display: flex;
	flex-direction: column;
	align-items: start;

	background: white;
}


/** DEFAULTS */
body {
	color: var(--black);
	font-family: var(--main-font);
	font-size: var(--text-base);
}


/** CONTENT */
/* Links */
a {
	color: var(--azure);
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

a:visited {
	color: var(--blue);
}

/* Controls */
form {
	text-align: center;
}

label {
	display: block;
}

input, button, select, textarea {
	font-family: inherit;
	font-size: inherit;
	padding: .4em;
	border: 1px solid #ccc;
	border-radius: 2px;
}

input:disabled {
	color: #ccc;
}

button {
	cursor: pointer;
	color: var(--white);
	background: var(--azure);
	border: none;
	font-size: var(--text-lg);
}

button:focus, button:hover {
	background: var(--blue);
}

button:disabled {
	color: #999;
	cursor: not-allowed;
}