section.page {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 1em;
  padding: 1em;
}

strong {
  font-size: 2em;
}

.danger {
  width: clamp(50%, 400px, 90%);
  background: color-mix(in oklch, var(--red) 10%, transparent 90%);
  color: var(--red);
  border: 1px dashed var(--red);
  text-align: center;
}

article {
  width: 80%;
  background: var(--card);
  color: var(--card-foreground);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1em;
  border-radius: var(--radius);
  border: 1px dashed var(--border);
  gap: 1em;
}

article h1 {
  font-size: 1em;
  padding: 0;
  padding-bottom: 0.5em;
}

.inputBx {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  gap: 1em;
}

.inputBx label {
  width: 16em;
  text-wrap: nowrap;
}

@media (max-width: 768px) {
  .inputBx {
    flex-direction: column;
    align-items: flex-start;
  }
}