body {
  font-family: system-ui, sans-serif;
}

.grid {
  display: grid;
  place-content: end center;
}

.grid + .grid {
  margin-top: 1em;
}

.checkbox-container,
.secret-container {
  width: fit-content;
}

.checkbox-container span {
  margin-left: 0.5em;
  margin-right: 0.5em;
  outline-style: solid;
  outline-offset: 0.15em;
  outline-width: thin;
}

.checkbox-container + .checkbox-container {
  margin-top: 1em;
}

.disabled {
  opacity: 0.5;
}

.clickable {
  cursor: pointer;
}

input[type="range"] {
  -webkit-appearance: none;
  background-color: transparent;
  width: 100%;
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 2em;
  height: 2em;
  background-color: #fff;
  border: 0.5em solid #000;
  border-radius: 0.15em;
  cursor: pointer;
  margin-top: -0.8em;
}

input[type="range"]::-webkit-slider-runnable-track {
  width: 100%;
  height: 0.5em;
  background-color: #000;
}

input[type="range"]::-moz-range-thumb {
  width: 1em;
  height: 1em;
  background-color: #fff;
  border: 0.5em solid #000;
  border-radius: 0.15em;
  cursor: pointer;
}

input[type="range"]::-moz-range-track {
  width: 100%;
  height: 0.5em;
  background-color: #000;
}

#length-label {
  margin-top: 1em;
  width: fit-content;
}

.length-container {
  font-size: 2em;
}

.length-container > *:not(:last-child) {
  margin-right: 1em;
}

#secret {
  word-break: break-all;
  cursor: pointer;
}