* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  scrollbar-width: auto;
  scrollbar-color: rgba(255, 255, 255, 0) rgba(255, 255, 255, 0);
}
*::-webkit-scrollbar {
  width: 4px;
}
*::-webkit-scrollbar-track {
  background: #ffffff;
}
*::-webkit-scrollbar-thumb {
  background-color: #303030;
  border-radius: 10px;
  border: 3px solid rgba(255, 255, 255, 0);
}

@font-face {
  font-family: Inter;
  src: url(../fonts/Inter-Regular.ttf);
}
@font-face {
  font-family: Urbanist;
  src: url(../fonts/Urbanist-Regular.ttf);
}
@font-face {
  font-family: Urbanist-bold;
  src: url(../fonts/Urbanist-Bold.ttf);
}
body {
  background: radial-gradient(52.25% 41.43% at 20.63% 22.59%, #C3D4FF 0%, #AAC2FF 100%);
  font-family: Inter;
}

#quiz-card {
  background: linear-gradient(149deg, #EAF0FF 9.66%, #C6D6FF 91.32%);
  width: 100%;
  position: relative;
}

.quiz-card-border {
  padding: 5px;
  border-radius: 22px;
  background: linear-gradient(145deg, #EAF0FF 0%, #AAC2FF 100%);
  box-shadow: 20px 20px 50px 0px rgba(0, 0, 0, 0.25);
}

#info-section {
  font-family: Urbanist;
}

#scores {
  font-family: Urbanist;
}
#scores p {
  font-family: Urbanist-bold;
}
#scores p:first-child {
  color: #159313;
  text-shadow: 0px 0px 10px rgba(106, 226, 104, 0.8);
}
#scores p:last-child {
  color: #B93838;
  text-shadow: 0px 0px 20px rgba(185, 56, 56, 0.7);
}

#question-section {
  border-bottom: 2px solid #AAC2FF;
}

.option {
  color: #14213D;
  transition: all 0.12s;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
  border: 3px solid #AAC2FF;
}
.option:hover {
  background: #AAC2FF;
  border: 3px solid #8FA6E1;
}
.option:active {
  background: #99b0ed;
  border: 3px solid #8FA6E1;
}

@media screen and (max-width: 640px) {
  .option:hover {
    background: none;
    border: 3px solid #AAC2FF;
  }
}
#check {
  transform: translate(-50%, -50%);
  left: 50%;
  top: 2.4rem;
}

.check-true {
  color: rgba(114, 202, 113, 0.3019607843);
}

.check-false {
  color: rgba(205, 109, 109, 0.3490196078);
}

.fade-down {
  animation: fade-down 0.4s ease-in;
}

@keyframes fade-down {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.correct {
  border-color: #59e157;
  background: #59e157;
  box-shadow: 0px 0px 30px 0px #59e157;
}
.correct:hover {
  border-color: #2feb2b;
  background: #2feb2b;
  box-shadow: 0px 0px 10px 0px #2feb2b;
}
.correct:active {
  border-color: #2feb2b;
  background: #2feb2b;
  box-shadow: 0px 0px 30px 0px #2feb2b;
}

.wrong {
  border-color: #E74444;
  background: #E74444;
  box-shadow: 0px 0px 30px 0px #E74444;
}
.wrong:hover {
  border-color: #ea2d2d;
  background: #ea2d2d;
  box-shadow: 0px 0px 10px 0px #ea2d2d;
}
.wrong:active {
  border-color: #ea2d2d;
  background: #ea2d2d;
  box-shadow: 0px 0px 30px 0px #ea2d2d;
}