@font-face {
	font-family: 'Recursive';
	src: url('../assets/Recursive.ttf'); }

:root {
	--default-spacing: 0.5em; }

body {
	accent-color: #9d8774; /* affects checkbox, radio button, range, progress inputs */
	background-color: black;
	color: white;
	margin: 12px; }

a:link {
	color: #b0494e; }

a:visited,
a:active {
	color: #9e8778; }

footer,
header,
main,
#acc-tools {
	background-color: #23212e;
	box-shadow: 0 2px black, 0 4px #fff3;
	margin-block-end: 4px;
	padding: 5px; }

button,
footer,
header,
main,
#acc-tools {
	border-radius: 0.25em; }

button {
	background-color: #f0ce74; }

header {
	display: flex; }

nav {
	flex-grow: 1; }

nav > ul {
	display: flex;
	flex-wrap: wrap; }

nav > ul > li {
	display: inline;
	flex: 1 1 auto;
	margin: 0.5em;
	padding: 0.5em;
	text-align: center; }

section {
	display: inline-block;
	vertical-align: text-top; }

section:first-of-type {
	margin-inline-end: 2em;
	width: 30%; }

section:not(:first-of-type) {
	box-shadow: -1.3em 0 #23212e, calc(-1.3em - 1px) 0 #9d8774; }

/*
main {
	grid-area: main; }
footer {
	grid-area: footer; }
#acc-tools {
	grid-area: banner; }
*/
h1,
h2 {
	--offset: 0.03em;
	margin-block: 0;
	text-shadow: calc(var(--offset) / 2) var(--offset) #23212e,
	             calc(var(--offset) * 1) calc(var(--offset) * 2) #9d8774; }

label:after {
	content: ":"; }

#acc-tools > button + button {
	margin-inline-start: var(--default-spacing); }

hr {
	border-color: #9d8774; }

:focus {
	background-color: #e38c4e;
	outline: 1px dotted; }
a:focus {
	background-color: white; }
input:focus {
	accent-color: #e38c4e; }
input[type=range] {
		/* If set to 0 then you won't see any accent-color and currentColor is black.  Change to white */
	color: inherit; }

:where(code, kbd, pre, samp, textarea) {
	font-family: "Courier New", monospace; }

		/* I long resisted using :has for lack of a reasonable use-case, but I think I just found one. */
		/* Not supported by Firefox (Feb. 2023) */
li:has(> a[target="_blank"]) {
	list-style-image: url(../icons/external-link.svg); }

button > svg {
	height: 1em; }

		/*** IDs ***/
#counter {
	contain: paint; }

#pause-timer,
#start-timer {
	background-position: 0.25em center;
	background-repeat: no-repeat;
	background-size: 0.7em;
	font-size: 1em;
	padding-inline: 1.2em 0.3em; }

#start-timer {
	background-image: url("../icons/play.svg"); }

#pause-timer {
	background-image: url("../icons/pause.svg"); }

#acc-tools {
	display: flex; }
#acc-tools > :last-child {
	margin-inline-start: auto; }

#acc-settings {
	display: flex;
	flex-wrap: wrap;
	font-size: 75%;
	justify-content: space-evenly; }
#acc-settings:not(.show) {
	display: none; }
#acc-settings [type="range"] {
	margin-inline-end: 2em;
	width: 100px; }
#acc-settings > p {
	margin-block: 0; }
#acc-settings > span {
	align-items: center;
	display: flex; }

		/*** MEDIA QUERIES ***/
/* @media screen and (prefers-color-scheme: dark) { /* don't print dark theme */
	:root:has(> body.dark) /* This is a silly selector.  Put the class on the root instead. */ {
		color-scheme: dark; }

	body.dark {
		accent-color: #ee0;
		background-color: #000;
		background-image: none;
		border-color: black; }

	.dark a {
		color: #ee0; }

	.dark a:visited {
		color: yellowgreen; }

	.dark button:not(:focus) {
		background-color: white;
		color: black; }
/*}*/