:root {
  --button-hover-bg: #c0c0c0;
  --button-active-bg: #a00000;
  --container-colour: rgb(255, 0, 255, 0.2);
  --image-colour: rgb(255, 220, 0);
  --content-gutter-colour: rgb(255, 255, 0, 1);
  --viewport-colour: rgb(0, 255, 255, 0.1);
}

.container-bg {
  background: var(--container-colour);
}

.image-bg {
  background: var(--image-colour);
}

.content-gutter-bg {
  background: var(--content-gutter-colour);
}

.viewport-bg {
  background: var(--viewport-colour);
}

form {
  margin-top: var(--spacing-unit);
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

label {
  display: flex;
  flex-flow: row wrap;
  align-items: center;
  justify-content: center;
  flex: 100% 0 0;
  margin-top: calc(var(--spacing-unit) * 2);
}

label + label {
  margin-top: 0.5lh;
}

input,
output {
  margin-left: calc(var(--spacing-unit) * 2);
}

input {
  padding: calc(var(--spacing-unit) * 1);
}

.suffix {
  margin-left: var(--spacing-unit);
}

button {
  width: max-content;
  border: 1px solid;
  padding: var(--spacing-unit) calc(var(--spacing-unit) * 2);
  margin: calc(var(--spacing-unit) * 2) auto 0;
}

button:hover,
button:focus {
  background: var(--button-hover-bg);
}

button:active {
  background: var(--button-active-bg);
}

.htmx-request + .viewport {
  opacity: 0.5;
}

:invalid {
  border-color: red;
}