body {
  font-family: system-ui, sans-serif;
  line-height: 1.5;
  box-sizing: border-box;
  background-color: #000;
  color: #eee;
}
h1, h2 {
  font-family: Bahnschrift, 'DIN Alternate', 'Franklin Gothic Medium', 'Nimbus Sans Narrow', sans-serif-condensed, sans-serif;
  text-transform: uppercase;
}
nav {
  max-width: 36rem;
  margin: 0 auto;
}
nav ul, nav li {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline;
  margin-right: 1em;
}
nav .current {
  font-weight: bold;
}
nav a {
  color: #eee;
  text-decoration: underline;
}
main {
  max-width: 36rem;
  margin: 4em auto;
}
h1 {
  margin-bottom: 2em;
}
h1 .brand {
  font-size: 2em;
  display: block;
  color: #fcb95c;
}
h2 {
  margin: 0 0 1em;
  text-align: left;
}
section {
  margin: 0 0 1em;
  padding: 1em;
  border: 5px solid #fcb95c;
  border-radius: 10px;
}

a {
  color: #fcb95c;
  text-decoration-line: underline;
  text-underline-offset: 0.1em;
  text-decoration-thickness: 1px;
  text-decoration-color: oklch(from currentColor l c h / 75%);
}
a:hover {
  opacity: 0.75
}
a::selection {
  background: #b3d4fd;
}
a::-moz-selection {
  background: #b3d4fd;
}
a:active {
  opacity: 0.5
}
a:focus {
  background: oklch(from currentColor l c h / 10%);
  text-decoration-line: none
}

select {
  font-size: 1em;
  background-color: #000;
  color: #eee;
  width: 100%;
}
option {
  padding: 0.125em 0.5em;
}

#patch-list-results a {
  font-size: 0.75em;
}

#patches {
  display: none;
}
.state {
  padding: 0.5em;
  border: 2px solid #fcb95c;
  border-radius: 5px;
  text-align: center;
}
.hint {
  display: none;
  margin-bottom: 0;
  font-style: italic;
  opacity: 0.8;
}
#drop-zone {
  margin: 0 0 1em;
  padding: 2em 0;
  border: 4px solid #fcb95c;
  border-radius: 10px;
  background-color: hsl(35, 96%, 20%);
}
#drop-zone span {
  display: block;
  text-align: center;
  color: #eee;
  font-size: 0.8em;
}
#drop-zone.enticing {
  animation: pulse 3s infinite;
}

button.cancel {
  display: block;
  margin: 0 0 0 auto;
}

dialog {
  max-width: 24rem;
}

dialog button {
  display: block;
  margin: 0 auto;
}

@keyframes pulse {
  0% {
    background-color: hsl(35, 96%, 20%)
  }

  50% {
    background-color: hsl(35, 96%, 30%)
  }

  100% {
    background-color: hsl(35, 96%, 20%)
  }
}

.side-by-side {
  display: flex;
  margin-bottom: 2em;
}

.side-by-side > * {
  flex: 1 1 50%;
}