html, body {
  height: 100%;
}

form {
  text-align: center;
  max-width: 30em;
  display:block;
  margin: 2em auto;
}

h2 {
  margin-top: 4em;
}

aside#home-delivery {
  text-align: left;
  max-width: 28em;
  margin: auto;
  padding: 3em;
  line-height: 1.5em;
}

input[type="email"] {
  font-family: mono;
  width: 400px;
  border: none;
  border-bottom: 1px solid var(--foreground-2);
  text-align: center;
}

button[type="submit"] {
  font-family: mono;
  font-weight: bold;
  background-color: var(--highlight);
  line-height: 2.5em;
  height: 3em;
  border: none;
  text-transform: uppercase;
  width: 400px;
}

button[type="submit"][disabled] {
  font-weight: normal;
  background-color: gray;
  color: lightgray;
}

input[type="checkbox"] {
  width:  20px;
  height: 20px;
  vertical-align: sub;
  margin: 10px;
}

#emails-not-equal {
  padding: 0.7em 1em;
  background-color: var(--highlight);
  float: right;
  display: none;
}

input {
  padding: 0.5em 0;
  font-size: 1em;
}

input[name="username"] {
  opacity: 0;
  position: absolute;
  top: 0;
}

#checkboxes {
  text-align: left;
  margin: 2em;
}

.result {
  margin: 2em auto;
  font-family: mono;
  font-size: 1em;
  padding: 4em;
  background-color: var(--highlight);
  max-width: var(--main-width);
  display: none;
}

@media (max-width: 80em) {
  html, body {
    height: unset;
  }

  button[type="submit"], input[type="email"] {
    width: 100%;
  }

  .result {
    padding: 2em;
    display: none;
  }

  a[href="mailto:suscripciones@revistadelauniversidad.mx"] {
    font-size: clamp(0.5em, 3.5vw, 1em);
  }
}