:root {
	--background-color: #FAEBD7;
	--button-color: #fa6400;
	--button-color-hover: #fb8332;
	--label-color-active: #c85000;
	--text-color: #a64303;
	--input-color: black;
	--input-background-color: white;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background-color: rgb(5,15,0);
    --button-color: rgb(196,55,0);
    --button-color-hover: rgb(164,64,0);
    --label-color-active: #c85000;
    --text-color: rgb(255,141,66);
	--input-color: rgb(233,231,277);
	--input-background-color: black;
	scrollbar-color: #2a3034 #000304;
  }
}
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
	a {
		font-size: 1.2em;
	}
}
.regular-checkbox + label,
label, input, p, a, button, select, h1, span {
	align-items: center;
	background-clip: padding-box;
	color: var(--text-color);
	font-size: 14px;
	border: 0px solid transparent;
	border-radius: .25rem;
	box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
	box-sizing: border-box;
	font-family: system-ui,-apple-system,system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 500;
	line-height: 1.0;
	margin: 0;
	padding: calc(.75rem - 1px) calc(1rem - 1px);
	display: inline-flex;
}
th {
	color: var(--text-color);
	font-family: system-ui,-apple-system,system-ui,"Helvetica Neue",Helvetica,Arial,sans-serif;
	font-weight: 500;
	line-height: 1.0;
}
select {
	color: var(--input-color);
	background: var(--input-background-color)
}
span {
	color: var(--input-color);
}
h1 {
	font-size: 48px;
	text-align: center;
}
p {
	font-size: 18px;
}
br {
	content: "";
	margin: 2em;
	display: block;
	font-size: 10%;
}
canvas {
	width: 100%;
	max-width: 120rem;
	height: 50px;
}
input {
	color: var(--input-color);
	background-color: var(--input-background-color);
	cursor: pointer;
	text-align: center;
	-webkit-appearance: none;
	max-width: 7.5rem;
}
label, button {
	background-color: var(--button-color);
	box-shadow: rgba(0, 0, 0, 0.02) 0 1px 3px 0;
	color: white;
	cursor: pointer;
	transition: all 250ms;
	width: 5.5rem;
	text-align: left;
}
button {
	border-top-left-radius: 1.5rem;
	border-bottom-left-radius: 1.5rem;
	border-top-right-radius: 1.5rem;
	border-bottom-right-radius: 1.5rem;
	width: auto;
}
label:hover,  a:hover, button:hover {
	transform: translateY(-1px);
	background-color: var(--button-color-hover);
	box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
}
label:active {
	background-color: var(--label-color-active);
	box-shadow: rgba(0, 0, 0, .06) 0 2px 4px;
	transform: translateY(0);
}
.regular-checkbox {
	display: none;
}
.regular-checkbox + label {
	background-color: var(--background-color);
	border: 3px solid var(--button-color);
	width: 11.7rem;
	border-top-right-radius: 1.5rem;
	border-bottom-right-radius: 1.5rem;
	border-top-left-radius: 1.5rem;
	border-bottom-left-radius: 1.5rem;
}
.regular-checkbox:checked + label {
	background-color: var(--button-color);
	border: 3px solid transparent;
	color: white;
}
.regular-checkbox:hover + label, button:focus {
	background-color: var(--button-color-hover);
	box-shadow: rgba(0, 0, 0, 0.1) 0 4px 12px;
}
body { background-color: var(--background-color); }