#game-container { 
  width: 600px; 
  margin: 0 auto; 
  margin-top: 50px; 
  border: 2px dashed black;
  text-align: center; 
  font-family: "Open Sans", sans-serif; 
  font-weight: 100;
}

input {
  font-size: 22px;
  text-align: center;
  width: 240px;
}

#eight-ball {
  cursor: pointer;
  background-color: black;
  border: 4px solid rgb(95, 95, 95);
  border-radius: 50%;
  width: 300px;
  height: 300px;
  margin: 40px auto;
}

#window {
  position: relative;
  background-color: #333;
  border: 8px solid rgb(95, 95, 95);
  border-radius: 50%;
  width: 150px;
  height: 150px;
  margin: 75px auto;
  color: white; 
}

#eight {
  font-size: 5em;
  line-height: 150px;
}

#eight.hidden {
  display: none;
}

#triangle {
  position: absolute;
  top: 35px;
  left: 15px;
  width: 0; 
  height: 0; 
  border-left: 60px solid transparent;
  border-right: 60px solid transparent;
  border-top: 100px solid #56007a;
  transition-duration: 2s;
}

#triangle.hidden  {
  opacity: 0;
  transition-duration: 0s;
}

#answer-text {
  position: absolute;
  width: 60px;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -40%);
  font-size: 12px;
  transition-duration: 2s;
}

#answer-text.hidden {
  opacity: 0;
  transition-duration: 0s;
}