@import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap");

:root {
  --au: max(2px, 1vmin);
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
}

.page {
  display: grid;
  place-items: center;
  min-height: 100%;
  width: 100%;
}

.area {
  width: min(48rem, 94vw);
}

.closed {
  width: calc(50 * var(--au));
  font-family: "Instrument Sans", sans-serif;
  font-size: calc(3.5 * var(--au));
  margin: var(--au);
}

.form {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  align-items: center;
  column-gap: var(--au);
  row-gap: var(--au);
}

.row {
  display: contents;
}

.title,
label,
input,
button,
.status {
  font-family: "Instrument Sans", sans-serif;
}

.title {
  font-size: calc(7 * var(--au));
  font-weight: 550;
  text-align: center;
  margin: var(--au);
}

label {
  justify-self: start;
  white-space: nowrap;
  margin: calc(1.2 * var(--au));
  font-size: calc(3.5 * var(--au));
}

input {
  width: 100%;
  padding: calc(1.5 * var(--au));
  border-radius: var(--au);
  margin: calc(1.2 * var(--au));
  font-size: calc(3.5 * var(--au));
}

.status {
  grid-column: 1 / -1;
  margin: calc(1.2 * var(--au));
  font-size: calc(2.8 * var(--au));
}

.status[data-state='error'] {
  color: #a11;
}

button {
  background-color: #000;
  color: #fff;
  padding: calc(1.8 * var(--au));
  width: fit-content;
  justify-self: center;
  grid-column: 1 / -1;
  margin: calc(2.5 * var(--au));
  font-weight: 650;
  border-radius: var(--au);
  font-size: calc(3.5 * var(--au));
  cursor: pointer;
}

button:disabled {
  cursor: wait;
  opacity: 0.75;
}