body {
    background-image: url(../images/skulls.png)
}


.answer-btn {
    width: 100% !important;
    height: 50px;
    margin-bottom: 15px;
    font-size: 1.5rem;
    
}

.btn-light {
  width: 100%;
  height: 50px;
  margin-bottom: 15px;
  border: 1px solid lightgrey;

}
/* 
.answer-button:hover {
    background: red; 
    background: rgb(98, 244, 66, .5);
    margin-bottom: 15px;
} */

.container {
    background: whitesmoke;
    border: 1px solid lightgrey;
    border-radius: 5px;
    padding: 2rem;
    box-shadow: 0px 0px 20px lightgrey; 
    height: auto;
    max-height: 40%;
    margin-top: 10%;
    width: 100%;
    max-width: 600px;
}

.correct-answer {
  width: 100%;
  height: 50px;
  background: rgba(98, 244, 66, 0.5);
  margin-bottom: 15px;
}


.hide {
    display: none;
  }
  

.start-button {
    width: 150px;
    font-size: 30px;
}
.btn-danger {
  width: 100%;
  height: 50px;
  background: rgba(172, 37, 19, 0.705);
  margin-bottom: 15px;
}

#final-score {
    font-size: 40px;
}

#play-again {
    font-size: 30px;
}

#timer {
  font-size: 3rem;
}

#question {
    font-size: 35px;
}

@media (max-width: 700px) {
    .btn-light:hover {
        background-color: #f8f9fa;
    }

.btn-light:focus, .btn-light.focus {
    box-shadow: 0 0 0 0;
  }
  
  .btn-light.disabled, .btn-light:disabled {
    
    background-color: #f8f9fa;
    border-color: #f8f9fa;
  }
  
  .btn-light:not(:disabled):not(.disabled):active, .btn-light:not(:disabled):not(.disabled).active,
  .show > .btn-light.dropdown-toggle {
    
    background-color: #f8f9fa;
    border-color:  #f8f9fa;
  }
  
  .btn-light:not(:disabled):not(.disabled):active:focus, .btn-light:not(:disabled):not(.disabled).active:focus,
  .show > .btn-light.dropdown-toggle:focus {
    box-shadow: 0 0 0 0;
  }
}