* {
  margin: 0%;
  padding: 0%;
  box-sizing: border-box;
}
body {
  display: flex;
  justify-content: center;
  align-items: center;
  background: rgb(6, 22, 6);
  font-family: "Roboto", sans-serif;
}

.quiz-container {
  margin-top: 200px;
  max-width: 800px;
  padding: 40px;
  color: white;
  text-align: center;
  border-radius: 8px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
h1 {
  font-size: 2.5rem;
  margin-bottom: 20px;
}
p {
  font-size: 1.2rem;
  margin-bottom: 40px;
}
.de{
  font-size: 2.4rem;
  font-style: italic;
  color: #0056b3;
  margin-bottom: 0;
}
.start-button {
  padding: 10px;
  background-color: rgb(6, 179, 12);
  color: #fff;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  /* transition:  0.3s; */
}
.start-button a {
  color: #fff;
  font-size: 20px;
  text-decoration: none;
}
.start-button:hover {
  background-color: #0056b3;
}
.circle {
  position: absolute;
  border-radius: 50%;
  border: 100px solid rgba(7, 80, 53, 0.8);
  width: 800px;
  height: 800px;
  z-index: -1;
  opacity: 0.15;
  top: 6%;
  left: -15%;
  position: fixed;
}
@media screen and (max-width: 700px) {
  h1 {
    font-size: 2.2rem;
  }
  p {
    font-size: 1em;
  }
  
}
/* }
.triangle-sparkles {
  position: absolute;
  width: 200px;
  height: 200px;
  top: 255px;
  left: 416px;
  animation: triangle-sparkle 5s ease-in-out infinite;

  .sparkle {
    position: absolute;
    top: 0;
    left: 98px;
    width: 4px;
    height: 200px;

    &:before,
    &:after {
      display: block;
      content: "";
      position: absolute;
      width: 4px;
      height: 25px;
      top: 0;
      left: 0;
      border-radius: 2px;
      background: #089bc8;
    }
  }

  .s1 {
    top: 10px;
  }
  .s2 {
    transform: rotate(124deg);
  }
  .s3 {
    transform: rotate(237deg);
  } */

/* 
@keyframes blobby {
  0% {
    transform: translate3d(0, -300px, 0) scaleY(1.2);
  }
  10% {
    transform: translate3d(0, 50px, 0) scaleY(0.8);
  }
  14% {
    transform: translate3d(0, -30px, 0) scaleY(1.1);
  }
  18% {
    transform: translate3d(0, 10px, 0) scaleY(0.9);
  }
  20%,
  22% {
    transform: translate3d(0, 0, 0) scaleY(1);
  }
  26% {
    transform: translate3d(0, 0, 0) scale(1.2);
  }
  32%,
  74% {
    transform: translate3d(0, 0, 0) scale(0);
  }
  80% {
    transform: translate3d(0, 0, 0) scale(1.2);
  }
  84% {
    transform: translate3d(0, 0, 0) scale(0.9);
  }
  86%,
  88% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  92% {
    transform: translate3d(0, -30px, 0) scaleY(0.9);
  }
  100% {
    transform: translate3d(0, 300px, 0) scaleY(1.2);
  }
}

@keyframes blobby-ring {
  0%,
  74% {
    transform: translate3d(0, 0, 0) scale(0);
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  84%,
  100% {
    transform: translate3d(0, 0, 0) scale(1.4);
    opacity: 0;
  }
}

@keyframes octa {
  0%,
  30% {
    transform: translate3d(0, 0, 0) scale(0) rotate(22.5deg);
  }
  36% {
    transform: translate3d(0, 0, 0) scale(1.2) rotate(22.5deg);
  }
  40% {
    transform: translate3d(0, 0, 0) scale(0.9) rotate(22.5deg);
  }
  42%,
  44% {
    transform: translate3d(0, 0, 0) scale(1) rotate(22.5deg);
  }
  48% {
    transform: translate3d(0, 0, 0) scale(1.2) rotate(22.5deg);
  }
  54%,
  100% {
    transform: translate3d(0, 0, 0) scale(0) rotate(22.5deg);
  }
}

@keyframes octa-sparkle {
  0%,
  30% {
    transform: translate3d(0, 0, 0) scale(0);
    opacity: 1;
  }
  36% {
    opacity: 1;
  }
  40%,
  100% {
    transform: translate3d(0, 0, 0) scale(1.4);
    opacity: 0;
  }
}

@keyframes triangle {
  0%,
  52% {
    transform: translate3d(0, 0, 0) scale(0);
  }
  58% {
    transform: translate3d(0, 0, 0) scale(1.2);
  }
  62% {
    transform: translate3d(0, 0, 0) scale(0.9);
  }
  64%,
  66% {
    transform: translate3d(0, 0, 0) scale(1);
  }
  70% {
    transform: translate3d(0, 0, 0) scale(1.2);
  }
  76%,
  100% {
    transform: translate3d(0, 0, 0) scale(0);
  }
}

@keyframes triangle-sparkle {
  0%,
  52% {
    transform: translate3d(0, 0, 0) scale(0);
    opacity: 1;
  }
  58% {
    opacity: 1;
  }
  62%,
  100% {
    transform: translate3d(0, 0, 0) scale(1.4);
    opacity: 0;
  }
} */