*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  font-size: 16px;
  background-color: #fdfdfd;
  font-family: "Josefin Sans", sans-serif;
}

/* At start, all sections are hidden except start-page */
section:not(:first-child) {
  display: none;
}
#timer-container {
  display: none;
}

/* alert box keep hidden till user make a correct/wrong choice  */
[data-state="hidden"]{
  display:none;
}
[data-state="display"]{
  display:block;
}

/* adjust the container width in medium screen  */
@media (max-width: 991px) {
  .w-50 {
    width: 75% !important;
  }
}

/* remove the focus effect on the button that is inherited from last question */
.btn-primary.focus, .btn-primary:focus {
  box-shadow: none !important;
  background-color: #007bff;
}

/* adjust container width and font-size in small screen  */
@media (max-width: 768px) {
  h2 {
    font-size: 1.5rem;
  }

  h4 {
    font-size: 1.2rem;
  }

  .w-50 {
    width: 100% !important;
  }

  .p-3 {
    padding: 0.2rem !important;
  }
}