@media all and (max-width: 790px) {
  main {
    padding: 15% 10%;
  }
  button {
    width: 100%;
    height: 100px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    background-color: white;
    transition: all 125ms;
    padding: 0 30%;
  }

  button:hover {
    transition: all 125ms;
    background-color: #eff9ff;
  }
  /*  */
  button.selected {
    transition: all 125ms;
    background-color: #eff9ff;
    border: 2px solid #59a5ff;
  }

  button > img {
    height: 50%;
    max-width: 100%;
  }

  #buttons {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0 0 0;
  }

  #search {
    margin: 20px 0;
  }

  #continueButton {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 220px 0 20px 0;
  }

  #continueButton * {
    text-align: center;
  }

  #email {
    margin: 20px 0;
  }
}

@media all and (min-width: 791px) {
  main {
    padding: 7.5% 30%;
  }

  button {
    width: 100%;
    height: 100px;
    border-radius: 10px;
    border: 1px solid rgba(0, 0, 0, 0.3);
    background-color: white;
    transition: all 125ms;
    padding: 0 30%;
  }

  button:hover {
    transition: all 125ms;
    background-color: #eff9ff;
  }
  /*  */
  button.selected {
    transition: all 125ms;
    background-color: #eff9ff;
    border: 2px solid #59a5ff;
  }

  button > img {
    height: 50%;
    max-width: 100%;
  }

  #buttons {
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    margin: 20px 0 0 0;
  }

  #search {
    margin: 20px 0;
  }

  #continueButton {
    display: flex;
    align-items: center;
    flex-direction: column;
    margin: 60px 0 20px 0;
  }

  #continueButton * {
    text-align: center;
  }

  #email {
    margin: 20px 0;
  }
}