body {
  background-color: #0c0014;
  background-image: url(../image/Quiz\ App.jpg);
  background-position: center center;
  background-repeat: no-repeat;
  background-size: 90% 100%;
  min-height: 100vh;
  background-attachment: fixed;
  font-family: "Changa", sans-serif;
  overflow: hidden;
}

/* ========> Global Rules */
.form-select:focus,
.form-control:focus {
  border-color: transparent;
  box-shadow: none;
}

.correct,
.correct:hover {
  --main-color: #7cb518 !important;
  background-color: var(--main-color);
  color: #fff !important;
}

.wrong,
.wrong:hover {
  --main-color: #bf0603 !important;
  background-color: var(--main-color);
  color: #fff !important;
}

.score-color {
  color: #434371;
}
.btn-category {
  --bs-btn-color: #fff;
  --bs-btn-bg: #a1c349;
  --bs-btn-border-color: #a1c349;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #a1c349;
  --bs-btn-hover-border-color: #a1c349;
}

.btn-questions,
.btn-start {
  --bs-btn-color: #fff;
  --bs-btn-bg: #38369a;
  --bs-btn-border-color: #38369a;
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #4c4aae;
  --bs-btn-hover-border-color: #4c4aae;
}

/*=======> Question Card  */

.heading {
  width: fit-content;
  --radius: 10px;
  border-radius: var(--radius);
  padding: 6px;
  position: relative;
  overflow: hidden;
  margin-bottom: 50px;
}

.heading h1 {
  background-image: linear-gradient(30deg, #f966fa, #88f4fa);
  font-size: 50px;
  font-family: "Rethink Sans", sans-serif;
  padding: 15px;
  border-radius: inherit;
}

.heading::before {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  background-image: conic-gradient(#f966fa, #88f4fa);
  animation: spinning 6s infinite linear;
  left: -5px;
  top: -5px;
  transform: scale(2) translate(-50%, -50%);
  border-radius: inherit;
  -webkit-transform: scale(2) translate(-50%, -50%);
  -moz-transform: scale(2) translate(-50%, -50%);
  -ms-transform: scale(2) translate(-50%, -50%);
  -o-transform: scale(2) translate(-50%, -50%);
  z-index: -1;
}

@keyframes spinning {
  0% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(45deg);
  }
  75% {
    transform: rotate(315deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.animate__animated.animate__zoomInDown {
  --animate-duration: 1s;
}

.animate__animated.animate__fadeInBottomLeft {
  --animate-duration: 1s;
  --animate-delay: 1s;
}

/*=======> Question Card  */

.question {
  background-color: #fff;
  position: relative;
}

.question h2 {
  font-family: "Dosis", sans-serif;
  font-weight: 600;
}

.choices {
  gap: 10px;
}

.choices li {
  --main-color: #434371;
  width: calc((100% - 10px) / 2);
  font-size: 19px;
  font-weight: 600;
  border-radius: 100vh;
  border: 2px solid var(--main-color);
  color: var(--main-color);
  padding: 5px 12px;
  transition: background-color 350ms, color 350ms;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

.choices li:hover {
  background-color: var(--main-color);
  color: #f1f1f1;
}

.question i {
  cursor: pointer;
}