:root {
  --font: monospace;
  --font-size: 1.1em;
  --color: #222;
  --bg: #fff;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color: #ccc;
    --bg: #222;
  }
}

* {
  box-sizing: border-box;
}

body {
  font: var(--font-size) var(--font);
  color: var(--color);
  background: var(--bg);
  padding: 10px 30px;
  max-width: 800px;
  margin: auto;
  overflow-wrap: break-word;
}

h1 {
  color: var(--bg);
  background: var(--color);
  padding: 8px;
}

h1, p {
  margin: 10px 0;
}

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

a:hover {
  opacity: .8;
}

form {
  margin: 20px 0;
}

label {
  display: block;
  margin: 10px 0;
}

input, select, button {
  font-family: var(--font);
}

input, select {
  color: var(--color);
  background: var(--bg);
  padding: 5px;
  border: none;
  outline: 1px solid var(--color);
}

input:focus, select:focus {
  outline: 2px solid var(--color);
}

button {
  color: var(--bg);
  background: var(--color);
  padding: 5px 10px;
  border: none;
  cursor: pointer;
  transition: 100ms;
}

button:hover, button:focus {
  color: var(--color);
  background: var(--bg);
  outline: 1px solid var(--color);
}

button:active {
  transform: translateY(3px);
}

button:focus {
  outline: 2px solid var(--color);
}

div div {
  padding: 10px 20px;
  outline: 1px solid var(--color);
  margin: 20px 0;
}

div div:nth-child(2n), div div:nth-child(2n) a {
  color: var(--bg);
}

div div:nth-child(2n) {
  background: var(--color);
}

div div a {
  display: block;
  margin: 10px 0;
}

span {
	color: var(--bg);
	background: var(--color);
	padding: 3px 5px;
	margin: 0 0 0 10px;
}

div div:nth-child(2n) span {
  color: var(--color);
  background: var(--bg);
}

h1, label, div div a {
  width: fit-content;
  width: -moz-fit-content;
}

::selection {
  color: var(--bg);
  background: var(--color);
}

::-webkit-scrollbar {
	width: 5px;
}

::-webkit-scrollbar-thumb {
	background: var(--color);
}

::-webkit-scrollbar-track {
	background: transparent;
}