:root {
}

main {
  margin-top: 12vh;
  height: 50vh;
}

main h2 {
  font-size: var(--font-size-11);
  text-align: center;
  font-weight: 700;
}

main h3 {
  text-align: left;
  padding: 10px;
}

main .main-button-container {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 10px;
}

main .main-button-container button {
  margin: 10px;
}

main button {
  color: var(--blue);
  background-color: black;
  border: 2px solid var(--blue);
  border-radius: 30px;
  margin: 0 15px;
  padding: 18px 15px;
  font-size: 1.2rem;
  cursor: pointer;
  box-shadow: 0 0 10px var(--blue);
}

main button:hover {
  transform: translateY(-1px);
}

.arrow {
  width: 1.5rem;
  height: auto;
  vertical-align: middle;
  margin-left: -4px;
}

/* tablet */
@media only screen and (min-width: 600px) {
}

/* desktop */
@media only screen and (min-width: 1200px) {
  main .main-button-container button {
    margin: 30px 20px;
  }

  main h3 {
    text-align: center;
  }

  main {
    margin-top: 15vh;
  }

  .bottom-arrow-container {
    margin-top: 20vh;
  }

  main button:hover .arrow {
    transform: rotate(360deg);
    transition: transform 0.9s ease;
  }
}