/* Contains for the info initially presented to the user */
#info {
  width: 440px;
  text-align: center;

  position: absolute;
  padding: 30px 45px 35px;
  background: rgba(0, 0, 80, 0.04);
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
}

#info h1 {
  margin: 0;
  position: relative;
}

#info p {
  margin: .65em 0 1.25em;
}


/* == Rules for small screens == */

@media (max-width: 750px) { /* Full width on small screens (namely iPhones) */
  #info {
    width: 100%;
    padding: 0 20px 0;
    background: none;
    top: 35%;
    left: 0;
    transform: translateY(-50%);
  }
}

@media (max-height: 400px) { /* Hide text on iPhones in portrait to prevent button from being cut off */
  #info p {
    display: none;
  }
}