.myComponentContainer {
  display: flex;
  justify-content: center;
}

.pageWrapper {
  display: flex;
  justify-content: center;
  text-align: center;
  width: 50%;
  border: 1px solid black;
}

.contentWrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 80%;
  padding: 30px 0px 30px 0px;
  gap: 20px;
}

.pageTitle,
.questionText {
  font-size: large;
  font-weight: bold;
}

.startButton {
  width: 80%;
  padding: 15px;
  border: 0px;
  border-radius: 10px;
  background-color: purple;
  color: white;
}

.questionWrapper,
.answerExplanation {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px;
  border: 1px dotted black;
  border-radius: 10px;
  gap: 20px;
}

.optionContainer {
  display: flex;
  gap: 10px;
  justify-content: center;
  text-align: center;
}

.optionButton {
  padding: 10px 15px 10px 15px;
  border: 0px;
  border-radius: 10px;
  background-color: pink;
  font-weight: bold;
}

.correctOption {
  background-color: greenyellow;
}

.wrongOption {
  background-color: grey;
}

.explanationContainer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.nextEndButton {
  width: 80%;
  padding: 5px;
  border: 0px;
  border-radius: 5px;
  background-color: purple;
  color: white;
}

.outerListContainer{
  text-align: start;
}

.endText {
  color: purple;
}

.numListText {
  color: blue;
}

.dotListText{
  color: black;
}