#how {
  position: absolute;
  top: 0;
  left: 0;
  width: 100svw;
  height: 100svh;
  display: flex;
  justify-content: center;
  background-color: #fff;
  overflow: hidden;
  transition: top 0.5s ease-in-out;
  transition: left 0.5s ease-in-out;
  z-index: 2;
}
#how > #how-banner {
  position: absolute;
  top: -10svh;
  height: 25svh;
}
#how > #how-container {
  position: absolute;
  top: 13svh;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  height: 80svh;
}
#how > #how-container > p {
  width: 80svw;
  font-size: 2svh;
  text-align: center;
  font-family: 'BuckeyeSans2';
  font-weight: normal;
}
#how > #how-container > #how-title {
  font-size: 12svw;
  font-family: 'BuckeyeSerif2';
  font-weight: normal;
  color: var(--osuRed);
}
#how > #how-container > #how-placement {
  height: 20svh;
}
#how > #how-container > #how-start-button {
  width: 70svw;
  height: 7svh;
  background-color: var(--osuRed);
  color: white;
  border-radius: 0px;
  font-size: 2.5svh;
  font-family: 'BuckeyeSans2';
  border: none;
  font-weight: bold;
  cursor: pointer;
}
#how > #how-container > #how-table {
  display: flex;
  align-items: center;
  justify-content: center;
}
#how > #how-container > #how-table > svg {
  height: 100%;
}
#how > #how-container > #how-table > svg > g > text {
  font-family: 'BuckeyeSans2';
}
/* iphone small */
@media screen and (min-aspect-ratio: 2/3) {
  #how > #how-banner {
    top: -7svh;
    height: 19svh;
  }
  #how > #how-container {
    top: 12svh;
  }
  #how > #how-container > #how-title {
    font-size: 8svh;
  }
  #how > #how-container > #how-placement {
    height: 20svh;
  }
  #how > #how-container > p {
    font-size: 2.5svh;
  }
  #how > #how-container > #how-table > div > p {
    font-size: 2.5svh;
  }
}
@media screen and (min-aspect-ratio: 1/1) {
  #how > #how-banner {
    top: -7svh;
    height: 19svh;
  }
  #how > #how-container > #how-start-button {
    font-size: 4svh;
    max-width: 400px;
  }
}