/* use a flexible layout that adapts to different screen sizes */

p{
font-family: Arial;
}
h1,h2,h3,h4,ul,li{
font-family: Arial;
} 

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.question {
  background-color: #F0F8FF;
  padding: 10px;
font-family: Arial;
  margin: 10px;
  cursor: pointer;
  width: 80%;
  /* add a transition effect when the question is clicked */
  transition: transform 0.3s;
}

.answer {
  display: none;
font-family: Arial;
  background-color: #FAEBD7;
  padding: 10px;
  margin: 10px;
  width: 80%;
}

/* use Unicode symbols for icons */
.question::before {
  content: "\2753"; /* question mark symbol */
  margin-right: 10px;
}

.answer::before {
  content: "\2714"; /* check mark symbol */
  margin-right: 10px;
}