:root {
  --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

html, body {
  -webkit-text-size-adjust: none;
  font-family: var(--font-family);
  line-height: 1.4;
  overflow: initial;
  padding: var(--block-space-half) var(--block-space);
  text-size-adjust: none;
}

.skip-navigation {
  display: none;
}

main {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

main > section {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--block-space-half);
  justify-content: center;
  padding: var(--block-space);
}

section article, .modal-content turbo-frame section {
  align-items: center;
  display: flex;
  flex-direction: column;
  gap: var(--block-space-double);
  justify-content: center;
  padding: var(--block-space);
}

article section, article header, article footer {
  align-items: center;
  display: flex;
  flex-direction: row;
  gap: var(--block-space-double);
  flex-wrap: wrap;
}

h1 {
  color: #666;
  display: block;
  font-weight: 500;
  font-size: 0.8rem;
  letter-spacing: 0.1rem;
  padding: var(--block-space);
  text-align: center;
  text-transform: uppercase;
}

a, a:visited {
  color: var(--color-secondary);
}

a:hover {
  text-decoration: none;
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

:where(button, textarea, summary, .input, .btn) {
  --outline-size: min(0.2em, 2px);
  appearance: none;
  border: none;
  background-color: transparent;
  font: inherit;
  line-height: inherit;
  text-decoration: none;
  touch-action: manipulation;
  transition: box-shadow 150ms ease, outline-offset 150ms ease, background-color 150ms ease, opacity 150ms ease, filter 150ms ease;

  /* Hover */
  @media (any-hover: hover) {
    &:where(:not(:active):hover) {
      filter: var(--hover-filter);
      box-shadow: 0 0 0 var(--hover-size) var(--hover-color);
    }
  }
}