style.css

/* Found colors for die and "water" background in the Blue colors at https://www.rapidtables.com/web/color/html-color-codes.html 

Used wikipedia for magic eight ball reference: https://en.wikipedia.org/wiki/Magic_8-Ball */

html,
body {
  box-sizing: border-box;
  /* overflows may have helped horizontal scroll */
  /* Resource: https://stackoverflow.com/questions/15879710/disabling-horizontal-scroll-on-an-iphone-website */
  /* overflow: hidden; */
  overflow-x: hidden;
  overflow-y: auto;
}
body {
  position: relative;
  height: 100vh;
  width: 100vw;
  margin: 0 auto;
  background: #000;
  font-family: Helvetica, Arial, sans-serif;
  font-size: 10px;
  line-height: normal;
}
pre {
  white-space: pre-wrap;
}
*,
*:before,
*:after {
  box-sizing: border-box;
  /* outline to test to see what is causing the horizontal scroll */
  /* outline: 1px solid yellow; */
}
#magic-eight-ball {
  position: relative;
  width: 100%;
  max-width: 100vw;
  text-align: center;
}
.main-content {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
#magic-eight-ball h1 {
  /* font-size: 2.5vw; */
  font-size: calc(
    16px + (35 - 16) * ((100vw - 300px) / (1400 - 300))
  ); /* Resource: https://css-tricks.com/snippets/css/fluid-typography/ */
  color: #fff;
  margin-top: 3vh;
}
.ask-a-question {
  position: relative;
}
.ask-a-question label {
  display: block;
  /* font-size: 1.5vw; */
  font-size: calc(14px + (21 - 14) * ((100vw - 300px) / (1400 - 300)));
  color: #fff;
  text-align: center;
  margin-bottom: 0.8em;
}
#eight-ball-img {
  /* width: 15vw; */
  width: calc(100px + (210 - 100) * ((100vw - 300px) / (1400 - 300)));
  height: auto;
  margin: calc(5px + (10 - 5) * ((100vw - 300px) / (1400 - 300)));
}
form {
  position: relative;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* align-items: stretch; may need for larger than mobile */
  align-items: center;
}
#question {
  /* max-width: 46vw; */
  width: calc(230px + (460 - 230) * ((100vw - 300px) / (1400 - 300)));
  flex-grow: 1;
  /* font-size: 1.7em; */
  font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1400 - 300)));
  border-radius: 0;
  padding: 0.8em 0.25em;
  margin-bottom: 0.25em;
}
button {
  width: calc(
    230px + (460 - 230) * ((100vw - 300px) / (1400 - 300))
  ); /* may need to be removed for larger than mobile */
  border: none;
  /* font-size: 1vw; */
  font-size: calc(12px + (14 - 12) * ((100vw - 300px) / (1400 - 300)));
  cursor: pointer;
  padding: 0.8em;
  background: #fff;
  color: #000;
  transition: all 0.3s;
}
button:hover,
button:active,
button:focus {
  background: #0000ff;
  color: #1e90ff;
  border-left: 1px solid transparent;
}
#askAnother.btn {
  position: absolute;
  top: 92vh;
}
#answer-wrapper {
  position: relative;
  width: 100%;
  max-width: 100vw;
  margin: 0 auto;
}
#answer-background {
  display: flex;
  justify-content: center;
  width: calc(300px + (350 - 300) * ((100vw - 300px) / (1400 - 300)));
  /* max-width: 30vw; */
  height: calc(300px + (350 - 300) * ((100vw - 300px) / (1400 - 300)));
  background-image: radial-gradient(#00f 0%, transparent 75%);
  margin: 0 auto;
}
#get-your-answer {
  position: relative;
  display: flex;
  justify-content: center;
  /* width: 28%; */
  height: 0;
  top: 30%;
  margin-top: 3em;
  border-left: 5em solid transparent;
  border-right: 5em solid transparent;
  border-radius: 3px;
  opacity: 1;
  animation-name: dieFadeIn;
  animation-iteration-count: 1;
  animation-timing-function: ease-in;
  animation-duration: 2s;
}
@keyframes dieFadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
#get-your-answer.die-up {
  top: 80px;
  border-bottom: 9em solid #0000ff;
}
#get-your-answer.die-down {
  border-top: 9em solid #0000ff;
}
#get-your-answer #answer {
  position: absolute;
  color: #1e90ff;
  font-family: Helvetica, Arial, sans-serif;
  /* font-size: 1.15em; */
  font-size: calc(10.5px + (11.5 - 10.5) * ((100vw - 300px) / (1400 - 300)));
  line-height: 1.1;
  text-align: center;
  text-transform: uppercase;
  white-space: nowrap;
}
#get-your-answer.die-down #answer {
  /* bottom: 60px; */
  bottom: calc(50px + (60 - 50) * ((100vw - 300px) / (1400 - 300)));
  transform: translateY(30%);
}
#get-your-answer.die-up #answer {
  /* top: 70px; */
  top: calc(60px + (70 - 60) * ((100vw - 300px) / (1400 - 300)));
  transform: translateY(-50%);
}
/* .ask-another-question {
  border: none;
  padding: 0.7em 1em;
} */

/* Larger than mobile */
@media (min-width: 361px) {
  #get-your-answer {
    border-left: 5.5em solid transparent;
    border-right: 5.5em solid transparent;
  }
  #get-your-answer.die-up {
    border-bottom: 10em solid #0000ff;
  }
  #get-your-answer.die-down {
    border-top: 10em solid #0000ff;
  }
}

/* Desktop */
@media (min-width: 1024px) {
  form {
    flex-direction: row;
  }
  #question {
    /* padding: 0.25em; */
    margin-bottom: 0;
  }
  button {
    width: 165px;
    border-left: 1px solid #000;
  }
}