/* Read some articles on css-tricks and documenttation on  w3schools to figure out how to do the CSS
and I couldn't figure out how to do exactly what i wanted so this is the best I could do. */

.box {
  /* margins are used to create space around elements, outside of any defined borders.  */
  width: 850px;
  /* on auto height will stretch? or move to accomodate whatever is put inside */
  height: auto;
  margin: 0 auto;
  /* pretty sure this will center everything inside the box */
  text-align: center;
  border: 8px solid black;
  background: lightgray;
}

h1 {
  /* sets or returns how thick or thin characters in a text should be displayed. */
  font-weight: bolder;
  /* sets the size of a font */
  font-size: 4.5em;
  
}
span {
  color: #387780;
}

textarea {
  background: #387780;
  color: white;
}

#magicball {
  background-color: black;
  /* You may specify the value of border-radius in percentages. This is particularly useful when wanting to create a circle */
  border-radius: 50%;
  width: 400px;
  height: 400px;
  /* centered the circle */
  margin: 0 auto;
}

.triangle {
    
    margin: 10% auto;
    width: 0; 
    height: 0; 
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
    border-bottom: 100px solid #387780;
    padding: 70px;
    
}

#answer {
  color: white;
}