/* Wrapper of each question */
question {
  border-top: 2px solid lightgray;
  display: block;
  padding: 10px;
  margin: 8px 8px 64px 8px;
}


answer {
  display: inline-block;
  padding: 15px;
  margin: 10px;
  background: #dddada;
  border-radius: 10px;
  cursor: pointer;
  border: 2px solid black;
}


.answerable:hover {
  background: #c9c6c6;
}

.wrong {
  background: rgb(154, 75, 75);
}




answer[good].answered {
  background: rgb(143, 255, 143);
}

answer[good].answered:after {
  content: " 👍";
  display: inline-block;
  animation: goodAnswerAfter 1s;
  transform: rotate(10deg);
}

@keyframes goodAnswerAfter {
  0% {
    scale: 2.0;
    transform: rotate(0deg)
  }

  33% {
    scale: 8.0;
    transform: rotate(20deg)
  }

  100% {
    scale: 1.0;
    transform: rotate(0deg)
  }
}

answer[good].notanswered {
  border-color: rgb(87, 216, 87);
}

answer[good].notanswered::before {
  content: "→ ";
}

answer.notanswered {
  color: rgb(202, 135, 135);
}

answer.answered {
  background: rgb(177, 74, 74);
}

answer.answered:after {
  content: " ❌";
  display: inline-block;
  animation: badAnswerAfter 1s;
}


@keyframes badAnswerAfter {
  0% {
    scale: 2.0;
    transform: rotate(0deg)
  }

  33% {
    scale: 4.0;
    transform: rotate(20deg)
  }

  100% {
    scale: 0.0;
    transform: rotate(0deg)
  }
}


answer.answered {
  content: "⚠";
}



explanation {
  display: none;
  background: #f0dc6e;
  padding: 15px;
  border-radius: 10px;
}



.explanationVisible {
  display: block;
  visibility: visible;
}


solution {
  background: gray;
  color: gray;
}



solution:hover {
  background: inherit;
  color: inherit;
}