body {
  margin: 0 auto;
  padding: 1em;
  max-width: 600px;
  font: normal 100%/1.5 monospace, monospace;
  text-align: start;
  background: linear-gradient(to top left, color(display-p3 0.06 0.37 0.94), #6eb5f5);
  color: white;
  font-size:18px;
}

h1 {
  line-height: 1;
}

a,
p {
  color: yellow;
}

form {
  position: sticky;
  top: 0;
  z-index: 88;
  display: flex;
  flex-flow: row wrap;
  padding: 0.5em;
  background-color: #f9a812;
  border: 2px outset #f9a812;
  margin: auto -0.5em;
}

label,
input,
button {
  font: inherit;
  margin: 0 auto 0.5em;
  padding: 0.25em;
  flex: 1;
  font-weight: bold;
}

form,
input {
  color: #000000;
}

input {
  flex: 2 1 auto;
  max-width: 100%;
  border: 3px solid white;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border-radius: 0;
  caret-color: #000000;
}

button {
  border: 3px outset #4275f4;
  color: white;
  background-color: #4275f4;
  -webkit-appearance: none;
  appearance: none;
}

button:active,
button:focus {
  background-color: white;
  color: blue;
}

ol {
  padding: 0;
  list-style-position: inside;
  font-size: smaller;
  color: yellow;
}

li {
  padding: 0.125em 0.75em;
}

li:before,
li:after {
  color: turquoise;
}

li:before {
  content: "<";
  content: "<" / "";
}

li:after {
  content: ">";
  content: ">" / "";
}

li:nth-child(odd) {
  background-color: #4275f4;
}

@media (prefers-color-scheme: dark), (prefers-contrast: forced) {
  body {
    background-color: darkblue;
  }

  p,
  form,
  ol,
  a {
    color: whitesmoke;
  }

  li:before,
  li:after {
    color: darkcyan;
  }

  form {
    background-color: darkcyan;
  }

  li:nth-child(odd) {
    background-color: mediumblue;
  }
}

:focus-visible {
  isolation: isolate;
}