/*        sheen effect      */
/*This is the base aniamtion*/
.sheen {
  position: relative;
  overflow: hidden;
}

.sheen:after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255, 255, 255, 0.2) 50%, rgba(229, 172, 142, 0));
  transform: rotateZ(60deg) translate(-10em, 10em);
}

/*This activates the sheen once the button has been hovered*/
.sheen:hover::after {
  animation: sheen 1s forwards;
}

@keyframes sheen {
  100% {
    transform: rotateZ(60deg) translate(1em, -9em);
  }
}
.prose {
  width: 100% !important;
  max-width: none !important;
  font-family: var(--font-family) !important;
  font-size: var(--font-size) !important;
}

.prose h1 {
  font-size: 30px;
  line-height: 1.5;
}

.prose h2 {
  font-size: 24px;
}

.prose h3 {
  font-size: 20px;
}

.prose h4 {
  font-size: 18px;
}

.prose table {
  border-collapse: collapse;
  border: 1px solid #ccc;
}

.prose table td {
  padding: 5px 10px;
  border: 1px solid #ccc;
}

.prose table th {
  padding: 5px 10px;
  border: 1px solid #ccc;
}
.container-spinner2 {
    --size: 60px;
    --gap: calc(60px / 5);

    display: flex;
    gap: var(--gap);

    & .circle {
        --anim-delay: 0s;
        width: 60px;
        height: 60px;
        border-radius: 50%;
        animation: undulating-circle 1s infinite;
        animation-delay: var(--anim-delay);

        &:nth-child(1) {
            --anim-delay: 0.1s;
        }
        &:nth-child(2) {
            --anim-delay: 0.2s;
        }
        &:nth-child(3) {
            --anim-delay: 0.3s;
        }
        &:nth-child(4) {
            --anim-delay: 0.4s;
        }
        &:nth-child(5) {
            --anim-delay: 0.5s;
        }
        &:nth-child(6) {
            --anim-delay: 0.6s;
        }
        &:nth-child(7) {
            --anim-delay: 0.7s;
        }
        &:nth-child(8) {
            --anim-delay: 0.8s;
        }
    }
}

.color-1 {
    background-color: #034737;
}
.color-2 {
    background-color: #0e5e4b;
}
.color-3 {
    background-color: #13745d;
}
.color-4 {
    background-color: #55917e;
}
.color-5 {
    background-color: #7cb8a4;
}
.color-6 {
    background-color: #a4e2cc;
}
.color-7 {
    background-color: #034737;
}
.color-8 {
    background-color: #0e5e4b;
}

@keyframes undulating-circle {
    0% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
    50% {
        opacity: 0.5;
        transform: translate(0, calc(60px * 2 + 10px)) scale(0.4);
    }
    100% {
        opacity: 1;
        transform: translate(0, 0) scale(1);
    }
}