:root {
	--bg: #1c1f1c;
	--bg-light: #202320;
	--text: #eee;
	--text-dark: #a9a9a9;
	--main-light: #00cf00;
	--main-medium: #009a00;
	--warning1 : #ffa13c;
	--warning2 : #ff713a;
	--warning3 : #ff3a3a;
	--attn1-1 : #41d3ff;
	--attn1-2 : #000;
	--attn1-3 : #000;
	--attn2-1 : #db5aff;
	--attn2-2 : #000;
	--attn2-3 : #000;
}
* { box-sizing: border-box; }
.warning1 { color: var(--warning1); }
.warning2 { color: var(--warning2); }
.warning3 { color: var(--warning3); }
.attn1-1 { color: var(--attn1-1); }
.attn1-2 { color: var(--attn1-2); }
.attn1-3 { color: var(--attn1-3); }
.attn2-1 { color: var(--attn2-1); }
.attn2-2 { color: var(--attn2-2); }
.attn2-3 { color: var(--attn2-3); }
.underlined { text-decoration: underline; }
body {
	font-family: sans-serif;
	line-height: 1.2rem;
	background-color: var(--bg);
	color: var(--text);
}
header {
	text-align: center;
	padding: 1rem;
	color: var(--main-medium);
}
header img {
	height: 3rem;
	max-width: 90vw;
}
a {
	color: var(--main-light);
}
s {
	color: var(--text-dark);
}
input, select {
	color: var(--text);
	padding: .5rem;
	border-radius: .4rem;
	border: 1px solid transparent;
	background: var(--bg);
}
input:hover, select:hover {
	background: var(--bg-light);
	border-color: var(--text-dark);
}
.settings, .days, .calculation {
	padding: 2rem;
	margin: 1rem;
	border-radius: 1rem;
	border: 1px solid black;
}
.settings, .day, .calculation {
	background: var(--bg-light);
}
.settings {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	grid-gap: 1rem;
}
.settings > div {
	/* ... */
}
.settings * {
	width: 100%;
	margin: .5rem 0;
}
.day {
	border-radius: .7rem;
	border: none;
	padding: 1rem;
	margin: 1rem 0rem;
/*
	background: blue;
*/
}
.day .label {
	font-weight: bold;
}
footer {
	font-family: Monospace;
	font-size: 0.7rem;
	text-align: center;
	padding-top: 5rem;
}