/*master style sheet*/
body {
  font-family:Arial;
  margin:15px;
  text-align:center;
  background-color:SeaGreen;
}
.title {
  border:5px solid black;
  margin:15px;
  padding:10px;
  text-align:center;
  background-color:blue;
}
.card_dec1 {
  padding:15px;
  margin:15px;
  background-color:MediumBlue;
  height:1680px;
}
.card {
  padding:15px;
  background-color:rgb(94,103,217);
  height:500px;
  width:300px;
  float:left;
  margin:15px;
}
@keyframes answerreveal {
  0% {
    color:#004DE6;
  }
  50% {
    color:gray;
  }
  100% {
    color:black
  }
}
#answerbox {
  background-color:#004DE6;
  transition:2s;
}
#answerbox:hover {
  background-color:#6699FF;
  cursor:pointer;
}
/*should only apply to question*/
p {
  color:black;
}
/*bluetext=answer*/
#bluetext {
  color:#004DE6;
  animation-name:answerreveal;
  animation-duration:4s;
}
.an1{
  animation-delay:5s;
}
.an2{
  animation-delay:10s;
}
.an3{
  animation-delay:15s;
}
.an4{
  animation-delay:20s;
}
.an5{
  animation-delay:25s;
}
.an6{
  animation-delay:30s;
}
.an7{
  animation-delay:35s;
}
.an8{
  animation-delay:40s;
}