@import url('https://fonts.googleapis.com/css2?family=Bungee+Spice&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Pirata+One&display=swap');


body {
  background-image: url(/images/fire.jpg);
  margin: 0px;
  font-size: 15px;
  font-weight: 300;
  line-height: 20px;
  letter-spacing: 0.02em;
  overflow-x: hidden;
  margin: 0 auto;
  padding: 0;
}
    
#content { 
 width: 500px; 
 margin: 0 auto; 
 margin-top: 5px;      
 text-align: center; 
 font-family: 'Helvetica Neue', arial; 
 font-weight: 100;
}

p {
    color: rgb(219, 220, 221);
}

input {
    height: 48px;
    background-color: rgba(15, 16, 16, 0.713);
    border: rgb(252, 248, 248) 1px solid;
    color: rgb(165, 4, 4);
    text-align: center;
}

input::placeholder {
    font-size: 16px;
    color: rgb(241,161,0);
    text-align: center;
 
}

div.eight-ball {
  background-color: black;
  border: 3px solid #46e4f3;
  border-radius: 50%;
  width: 300px;
  height: 300px;
  margin: 0 auto;
  margin-bottom: 30px;
  margin-top: 30px;
}

div.answer {
  background-color: white;
  border: 1px solid rgb(154, 220, 234);
  border-radius: 50%;
  width: 50%;
  height: 50%;
  margin: 25% auto;
}

p#eight {
  color: rgb(4, 17, 20);
  font-size: 5em;
  margin: 40% auto;
  font-variant: small-caps;
  font-weight: 800;
}

p#answer {
  color: rgb(46, 2, 25);
  font-variant: small-caps;
  letter-spacing: 1px;
  font-size:1.5rem;
}

#question {
  margin: 20px;
  padding: 10px;
  width: 400px;
  font-size:16px;
}

#info {
  font-size: 24px;
  background-image: url(/images/home-bg.png);
  color: rgb(222,89,0);
  background-color: rgb(225, 233, 183);
 }



.title {
    font-family: 'Bungee Spice', cursive;
    font-size: 38px;
    padding-top: 150px;
    text-align: center;
  }
  


/* pulse */



@-webkit-keyframes pulse {
    70%  { box-shadow: 0 0 80px #f4064d, inset 0 0 80px #e21010; }
    80%  { box-shadow: 0 0 80px #e03d81, inset 0 0 80px #de0945; }
    100% { box-shadow: 0 0 80px #680202, inset 0 0 80px #e46262; }
  }
  

  .pulsing-element {
    animation: pulse 1s infinite;
    background-color:transparent;
    width:300px;
    height:300px;
    border-radius:50%;
    box-shadow: 100px 100px 800px #f93535, inset 10px 10px 10px #eb0808;
    -webkit-animation: pulse 1s linear 1s infinite;
  }

  /* pulse */