/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit;
}

body {
  --form_max-wh: 40em;
  place-items: center;
  min-height: 100vh;
  font-size: var(--font-size-1);
  font-family: var(--font-sans);
}

.form {
  color: var(--gray-9);
  background-color: var(--gray-3);
  display: grid;
  gap: var(--size-2);
  width: 100%;
  padding: var(--size-6) var(--size-4);
  max-width: var(--form_max-wh);
  border: 1px solid var(--gray-5);
  border-radius: var(--radius-2);
  box-shadow: 0 0.5em 0.5em rgba(0, 0, 0, 0.2);
}
.form__linput {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.form__label {
  flex: 1.5;
}
.form__input {
  width: 100%;
  flex: 2;
  padding: 0.7em !important;
  border: 1px solid var(--gray-4);
  border-radius: var(--radius-2);
}
.form__button {
  margin-top: 1em;
  margin-left: auto;
}
.form__button_big {
  min-height: 10em;
}

.primary-button {
  color: var(--gray-0);
  background-color: var(--blue-5);
  padding: var(--size-4) var(--size-6);
  border: none;
  border-radius: var(--radius-2);
  font-size: var(--font-size-2);
  cursor: pointer;
  transition: background-color 95ms ease-in;
}
.primary-button:hover {
  background-color: var(--blue-7);
}