.background {
  display: flex;
  justify-content: center;
  align-items: center;
}

.quiz_container {
  min-height: 600px;
  background-color: white;
  display: flex;
  align-items: center;
  justify-content: center;
}

#qtn_container {
  width: 100%;
  display: none;
}

#progress {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
}

.prog-ball {
  height: 10px;
  width: 10px;
  margin: 0 5px;
  background-color: #C4C4C4;
  border-radius: 30px;
}

.q_frame {
  width: 100%;
  display: none;
}

.q_frame ol {
  list-style-type: none;
  margin: 10px 0px;
  padding: 0px;
}

.q_frame ol li label {
  font-weight: inherit;
  background-color: #00C7B3;
  border-radius: 20px;
  padding: 10px 40px;
  cursor: pointer;
  width: 100%;
  margin-bottom: 10px;
  border: 3px solid #00C7B3;
}

.q_frame ol li label:hover {
  background-color: #3FDFD0;
  border-color: #3FDFD0;
}

.q_frame ol li input {
  display: none;
}

.q_frame ol li input:checked + label {
  background-color: #ffffff;
  color: #00C7B3;
}

.q_frame ol li input:checked:hover + label {
  border: 3px solid #00C7B3;
}

.q_frame .images_q li label {
  padding: 0px;
  border: none;
  background-color: #ffffff;
}

.q_frame .images_q input:checked + label {
  border: 5px solid #00C7B3;
}

.q_frame .images_q input:checked:hover + label {
  border: 5px solid #00C7B3;
}

.q_frame .images_q {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly;
}

#q5_1_img {
  height: 200px;
  width: 280px;
  background: url("/sites/default/files/assets/quiz/elementary education teacher.jpeg") no-repeat center;
  background-size: cover;
}

#q5_2_img {
  height: 200px;
  width: 280px;
  background: url("/sites/default/files/assets/quiz/middlwe school.jpeg") no-repeat center;
  background-size: cover;
}

#q5_3_img {
  height: 200px;
  width: 280px;
  background: url("/sites/default/files/assets/quiz/high school classroom.jpeg") no-repeat center;
  background-size: cover;
}

#q5_1_img:hover, #q5_2_img:hover, #q5_3_img:hover {
  opacity: 0.7;
}

#start_screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#start_screen button {
  background-color: #00C7B3;
  padding: 10px 20px;
  margin-top: 30px;
  border-radius: 20px;
  border: none;
}

#start_screen button:hover {
  background-color: #3FDFD0;
}

#results_screen {
  padding: 30px 10px;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

#checkmark {
  width: 20%;
  max-width: 400px;
  margin-bottom: 40px;
}

#results_screen p {
  margin-bottom: 30px;
  text-align: center;
}

#retake_button {
  margin-top: 30px;
}

.quiz_nav_button {
  background-color: #00C7B3;
  padding: 10px 20px;
  border-radius: 20px;
  border: none;
}

.quiz_nav_button:hover {
  background-color: #3FDFD0;
}

@media (hover: none) {
  .quiz_nav_button:hover {
    background-color: #00C7B3;
  }
}
.quiz_nav_button:disabled,
.quiz_nav_button[disabled] {
  background-color: #3FDFD0;
}

@media only screen and (min-width: 425px) {
  .q_frame .select_multiple {
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
  }
  .q_frame .select_multiple li {
    flex-basis: 49%;
  }
}
@media only screen and (min-width: 768px) {
  .background {
    height: 90vh;
    background-image: url(/sites/default/files/images/quiz/background.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
  }
  #qtn_container {
    padding: 0 40px;
  }
  .q_frame ol {
    padding: 0px 50px;
    margin: 50px 0px;
  }
  #results_screen {
    padding: 30px 60px;
  }
}