.muted {
  color: var(--muted-color);
}

/* Button groups. */
.button-group {
  display: flex;
  gap: var(--spacing);
}

.button-group > button {
  width: auto;
}

/* Copy to clipboard. */
.clipboard-container {
  position: relative;
  float: right;
}

.clipboard-container > .clipboard-button {
  width: auto;
  position: absolute;
  top: 0.65rem;
  right: 0.65rem;
  z-index: 10;
  display: block;
  font-size: 80%;
  padding: calc(0.5 * var(--spacing));
}

/* Armoured result. */
#armoured-result {
  white-space: pre;
}

/* Footer text. */
footer {
  font-size: 80%;
  color: var(--muted-color);
}

footer a {
  color: inherit;
}

/* Loading/error indicator. */
body.js-loaded > #loading-overlay {
  display: none;
}

#loading-overlay {
  z-index: 2000;
  animation-name: fade-in;
  animation-duration: 0.25s;
  animation-delay: 1s;
  animation-fill-mode: both;
  animation-timing-function: ease-in;
  background-color: var(--modal-overlay-background-color);
  position: fixed;
  left: 0;
  top: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

#loading-overlay > #problem-dialog {
  position: absolute;
  animation-name: fade-in;
  animation-duration: 0.25s;
  animation-delay: 10s;
  animation-fill-mode: both;
}

@keyframes fade-in {
  0% {opacity: 0;}
  100% {opacity: 1;}
}