@import url("https://fonts.googleapis.com/css2?family=Caesar+Dressing&display=swap");
:root {
  --primary: #9a1c29;
  --secondary: #2a6df5;
}

@keyframes cycle-shapes {
  0% {
    -webkit-clip-path: unset;
            clip-path: unset;
  }
  8.3333333333% {
    -webkit-clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
            clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
  }
  16.6666666667% {
    -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  }
  25% {
    -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
            clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  }
  33.3333333333% {
    -webkit-clip-path: circle(50% at 50% 50%);
            clip-path: circle(50% at 50% 50%);
  }
  41.6666666667% {
    -webkit-clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
            clip-path: polygon(100% 0%, 75% 50%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
  }
  50% {
    -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
            clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
  }
  58.3333333333% {
    -webkit-clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
            clip-path: polygon(75% 0%, 100% 50%, 75% 100%, 0% 100%, 25% 50%, 0% 0%);
  }
  66.6666666667% {
    -webkit-clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
            clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  }
  75% {
    -webkit-clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
            clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  }
  83.3333333333% {
    -webkit-clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
            clip-path: polygon(50% 0%, 83% 12%, 100% 43%, 94% 78%, 68% 100%, 32% 100%, 6% 78%, 0% 43%, 17% 12%);
  }
}
.exams_button.btn {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  z-index: 1;
  font-size: 2em;
  backface-visibility: hidden;
  border-radius: 0.5em;
  padding: 10px 15px;
  background: var(--primary);
  box-shadow: 0 0.1em 2em -0.75em var(--primary);
  transform: scale3d(1, 1, 1);
  font-family: inherit;
  text-align: center;
  color: white;
  letter-spacing: 0.1em;
  text-decoration: none;
  transition: 0.5s cubic-bezier(0.4, 0, 0, 1);
  transition-property: box-shadow, background, transform;
  will-change: box-shadow;
  font-family: "Poppins", sans-serif;
  font-weight: 600;
}
.exams_button.btn:before {
  --size: 20%;
  content: "";
  z-index: -1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  width: var(--size);
  aspect-ratio: 1;
  opacity: 1;
  background: var(--secondary);
  animation: cycle-shapes 10s infinite steps(12);
}
.exams_button.btn:hover {
  background: var(--secondary);
  box-shadow: 0 0.1em 2em -0.5em var(--secondary);
  transform: scale3d(1.075, 1.075, 1);
  transition-delay: 0.4s;
}
.exams_button.btn:hover:before {
  --size: 20%;
  opacity: 1;
  animation-play-state: paused;
  transition: 0.25s, opacity 0.4s, transform 0.75s 0.3s;
  transform: translate3d(-50%, -50%, 0) scale3d(5, 5, 5);
}