@import "https://unpkg.com/open-props/easings.min.css";

.sun-and-moon > :is(.moon, .sun, .sun-beams) {
  transform-origin: center center;
}

.sun-and-moon > :is(.moon, .sun) {
  fill: var(--icon-fill);
}

.theme-toggle:is(:hover, :focus-visible) > .sun-and-moon > :is(.moon, .sun) {
  fill: var(--icon-fill-hover);
}

.sun-and-moon > .sun-beams {
  stroke: var(--icon-fill);
  stroke-width: 2px;
}

.theme-toggle:is(:hover, :focus-visible) .sun-and-moon > .sun-beams {
  stroke: var(--icon-fill-hover);
}

[data-mode="dark"] .sun-and-moon > .sun {
  transform: scale(1.75);
}

[data-mode="dark"] .sun-and-moon > .sun-beams {
  opacity: 0;
}

[data-mode="dark"] .sun-and-moon > .moon > circle {
  transform: translate(-7px);
}

@supports (cx: 1) {
  [data-mode="dark"] .sun-and-moon > .moon > circle {
    transform: translate(0);
    cx: 17;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .sun-and-moon > .sun {
    transition: transform 0.5s var(--ease-elastic-3);
  }

  .sun-and-moon > .sun-beams {
    transition:
      transform 0.5s var(--ease-elastic-4),
      opacity 0.5s var(--ease-3);
  }

  .sun-and-moon .moon > circle {
    transition: transform 0.25s var(--ease-out-5);
  }

  @supports (cx: 1) {
    .sun-and-moon .moon > circle {
      transition: cx 0.25s var(--ease-out-5);
    }
  }

  [data-mode="dark"] .sun-and-moon > .sun {
    transform: scale(1.75);
    transition-timing-function: var(--ease-3);
    transition-duration: 0.25s;
  }

  [data-mode="dark"] .sun-and-moon > .sun-beams {
    transform: rotate(-25deg);
    transition-duration: 0.15s;
  }

  [data-mode="dark"] .sun-and-moon > .moon > circle {
    transition-delay: 0.25s;
    transition-duration: 0.5s;
  }
}

.theme-toggle {
  --size: 2rem;
  --icon-fill: #00aeef;
  --icon-fill-hover: #0c1229;
  background: none;
  border: none;
  padding: 0;
  inline-size: var(--size);
  block-size: var(--size);
  aspect-ratio: 1;
  border-radius: 50%;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  outline-offset: 5px;
}

.theme-toggle > svg {
  inline-size: 100%;
  block-size: 100%;
  stroke-linecap: round;
}

[data-mode="dark"] .theme-toggle {
  --icon-fill: #00aeef;
  --icon-fill-hover: #73ffff;
}

@media (hover: none) {
  .theme-toggle {
    --size: 48px;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  block-size: 100%;
  color-scheme: light;
}

html[data-mode="dark"] {
  color-scheme: dark;
}

@supports not (color-scheme: dark) {
  html[data-mode="dark"] {
    background: #111;
  }
}

body {
  min-block-size: 100%;
  font-family:
    system-ui,
    -apple-system,
    Segoe UI,
    Roboto,
    Ubuntu,
    Cantarell,
    Noto Sans,
    sans-serif;

  align-content: center;
  justify-content: center;
  place-content: center;
}

.github-corner {
  fill: #ff69b4;
  color: Canvas;
}

.github-corner:hover .octo-arm {
  -webkit-animation: octocat-wave 0.56s ease-in-out;
  animation: octocat-wave 0.56s ease-in-out;
}

@-webkit-keyframes octocat-wave {
  0%,
  to {
    transform: rotate(0);
  }

  20%,
  60% {
    transform: rotate(-25deg);
  }

  40%,
  80% {
    transform: rotate(10deg);
  }
}

@keyframes octocat-wave {
  0%,
  to {
    transform: rotate(0);
  }

  20%,
  60% {
    transform: rotate(-25deg);
  }

  40%,
  80% {
    transform: rotate(10deg);
  }
}

@font-face {
  font-family: "wizefont";
  src: url("../fonts/logo-font.woff2");
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

@keyframes rotateClock {
  from {
    transform: rotate(360deg);
  }

  to {
    transform: rotate(0deg);
  }
}

.hero-image-circle {
  max-width: 100%;
  width: 800px;
  margin: auto;
  mask-image: radial-gradient(circle, black 50%, transparent 90%);
  max-width: 100%;
  z-index: 1;
}

.hero-image-ellipse {
  max-width: 100%;
  width: 800px;
  margin: auto;
  mask-image: radial-gradient(ellipse, black 50%, transparent 70%);
  max-width: 100%;
  z-index: 1;
}

.switch {
  position: relative;
  left: 0;
  top: 0;
  width: 48vmin;
  height: 48vmin;
}

label > input {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  opacity: 0;
}

.switch span {
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: var(--c);
  border-radius: 50%;
  width: 70%;
  height: 70%;
  background: #ffac33;
  border: 4vmin solid white;
  transition: all ease 0.15s;
}

.switch div {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

.switch div::before,
.switch div::after {
  content: " ";
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: var(--c);
  background: #ffac33;
  width: 12%;
  height: 130%;
  border-radius: 10vmin;
  transition: all ease 0.15s;
}

.switch div:nth-child(1)::before {
  transform: var(--c) rotate(0deg);
}

.switch div:nth-child(1)::after {
  transform: var(--c) rotate(45deg); /*45deg increment each time*/
}

.switch div:nth-child(2)::before {
  transform: var(--c) rotate(90deg);
}

.switch div:nth-child(2)::after {
  transform: var(--c) rotate(135deg);
}

.switch::before,
.switch::after {
  content: " ";
  position: absolute;
  left: 50%;
  top: 50%;
  transform: var(--c);
  border-radius: 50%;
  background: white;
  transition: all ease 0.15s;
}

.switch::before {
  width: 0%;
  height: 0%;
  z-index: 10;
}

.switch::after {
  width: 50%;
  height: 50%;
}

input:checked ~ .switch span {
  width: 100%; /*width change*/
  height: 100%; /*height change*/
  background: #66757f; /*color change*/
  /*we get a full moon*/
}

input:checked ~ .switch div::before,
input:checked ~ .switch div::after {
  height: 50%; /*we hide the sun-rays*/
}

input:checked ~ .switch::before {
  /*we draw a white circle a left-top corner to show a half moon*/
  left: 30%;
  top: 30%;
  width: 90%;
  height: 90%;
}

input:checked ~ .switch::after {
  /*we hide the sun outline*/
  width: 0%;
  height: 0%;
}

input:not(:checked) ~ .switch {
  transform: rotate(180deg);
  transition: all ease 2.15s 0.1s;
}

.how-to-background {
  background: rgba(0, 0, 0, 0) !important;
  background: radial-gradient(
    circle,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0) 26%,
    #d9422e 26.2%,
    #d9422e 28%,
    rgba(0, 0, 0, 0) 28%,
    #111827 28%,
    #111827 66%,
    #d9422e 66%,
    #d9422e 69%,
    rgba(0, 0, 0, 0) 69.5%
  ) !important;
  /*background: radial-gradient(circle, rgba(249, 250, 251,1) 0%, rgba(249, 250, 251,1) 26%,rgba(55,65,81,0) 26%, rgba(217, 65, 46,1) 28%, rgba(217, 65, 46,1) 29%, rgba(55,65,81,1) 29%, rgba(55,65,81,1) 67%, rgba(249, 250, 251,1) 68%, rgba(249, 250, 251,1) 100%);*/
} 
[data-mode="dark"] .how-to-background {
    
    background: radial-gradient( circle, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 25.8%, #d9422e 26.2%, #d9422e 28%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0) 66%, #d9422e 66%, #d9422e 69.5%, rgba(0, 0, 0, 0) 69.9% ) !important;
    /*background: radial-gradient(circle, rgba(55,65,81,0) 0%, rgba(55,65,81,0) 26%, rgba(217, 65, 46,1) 26%, rgba(217, 65, 46,1) 28%, rgba(217, 65, 46,1) 29%, rgba(255,255,255,0) 30%, rgba(55,65,81,0) 29%, rgba(55,65,81,0) 66%,rgba(217, 65, 46,1) 68%,rgba(217, 65, 46,1) 69.5%, rgba(255,255,255,0) 69%, rgba(255,255,255,0) 100%) !important;*/
}


.equals-pattern {
    background: linear-gradient(135deg,#0000 20.5%,#E4E4ED 0 29.5%,#0000 0) 0 16px, linear-gradient( 45deg,#0000 8%,#E4E4ED 0 17%, #0000 0 58%) 32px 0, linear-gradient(135deg,#0000 8%,#E4E4ED 0 17%, #0000 0 58%,#E4E4ED 0 67%,#0000 0), linear-gradient( 45deg,#0000 8%,#E4E4ED 0 17%, #0000 0 58%,#E4E4ED 0 67%,#0000 0 83%,#E4E4ED 0 92%,#0000 0), #1A8FE5;
    background-size: 64px 64px;
}
.equals-pattern {
    background: linear-gradient(135deg,#0000 20.5%,#1f2937 0 29.5%,#0000 0) 0 16px, linear-gradient( 45deg,#0000 8%,#1f2937 0 17%, #0000 0 58%) 32px 0, linear-gradient(135deg,#0000 8%,#1f2937 0 17%, #0000 0 58%,#1f2937 0 67%,#0000 0), linear-gradient( 45deg,#0000 8%,#1f2937 0 17%, #0000 0 58%,#1f2937 0 67%,#0000 0 83%,#1f2937 0 92%,#0000 0), RGBA(217, 65, 46,0.1);
    background-size: 64px 64px;
}

.stairs-pattern {
    background: 32px 32px/calc(2*32px) calc(2*32px) conic-gradient(at calc(500%/6) 50%,#E4E4ED 25%,#0000 0),0 0/calc(2*32px) calc(2*32px) conic-gradient(at calc(500%/6) 50%,#E4E4ED 25%,#0000 0), 32px 32px/calc(2*32px) calc(2*32px) conic-gradient(at calc(200%/3) 50%,#1AE5D6 25%,#0000 0),0 0/calc(2*32px) calc(2*32px) conic-gradient(at calc(200%/3) 50%,#1AE5D6 25%,#0000 0), repeating-conic-gradient(#1A8FE5 0 25%,#0000 0 50%) 0 0/calc(2*32px) calc(2*32px), linear-gradient(#1A8FE5 calc(100%/3),#1AE5D6 0 calc(200%/3),#E4E4ED 0) 0 0/32px 32px;
}

.stars-pattern {
    background: radial-gradient(32px at calc(100% + calc(32px*.866)) 50%,#1A8FE5 99%, #0000 101%) 0 calc(-5*32px/2), radial-gradient(32px at calc(100% + calc(32px*.866)) 50%,#1A8FE5 99%, #0000 101%) calc(-2*calc(32px*.866)) calc(32px/2), radial-gradient(32px at 100% 50%,#E4E4ED 99%, #0000 101%) 0 calc(-2*32px), radial-gradient(32px,#1A8FE5 99%, #0000 101%) calc(32px*.866) calc(-5*32px/2), radial-gradient(32px,#E4E4ED 99%, #0000 101%) calc(32px*.866) calc( 5*32px/2), radial-gradient(32px at 100% 100%,#1A8FE5 99%, #0000 101%) 0 calc(-1*32px), radial-gradient(32px at 0% 50%,#1A8FE5 99%, #0000 101%) 0 calc(-4*32px), radial-gradient(32px,#E4E4ED 99%, #0000 101%) calc(-1*calc(32px*.866)) calc(-7*32px/2), radial-gradient(32px,#1A8FE5 99%, #0000 101%) calc(-1*calc(32px*.866)) calc(-5*32px/2), radial-gradient(32px at 100% 50%,#E4E4ED 99%, #0000 101%) calc(-2*calc(32px*.866)) 32px, radial-gradient(32px,#1A8FE5 99%, #0000 101%) calc(-1*calc(32px*.866)) calc(32px/ 2), radial-gradient(32px,#E4E4ED 99%, #0000 101%) calc(-1*calc(32px*.866)) calc(32px/-2), radial-gradient(32px,#1A8FE5 99%, #0000 101%) 0 calc(-1*32px), radial-gradient(32px,#E4E4ED 99%, #0000 101%) calc(32px*.866) calc(32px/-2), radial-gradient(32px,#1A8FE5 99%, #0000 101%) calc(32px*.866) calc(32px/ 2) #E4E4ED;
    background-size: calc(4*calc(32px*.866)) calc(6*32px);
}

.shape-pattern {
    background: radial-gradient(calc(1.28*32px + 12px/2) at left 50% bottom calc(-.8*32px),#1A8FE5 calc(100% - 12px),#E4E4ED calc(101% - 12px) 100%,#0000 101%) calc(2*32px) calc(-1*calc(1.5*32px + 12px)), radial-gradient(calc(1.28*32px + 12px/2) at left 50% bottom calc(-.8*32px),#1AE5D6 calc(100% - 12px),#E4E4ED calc(101% - 12px) 100%,#0000 101%) calc(-1*32px) calc(calc(1.5*32px + 12px)/-2), radial-gradient(calc(1.28*32px + 12px/2) at left 50% top calc(-.8*32px),#1AE5D6 calc(100% - 12px),#E4E4ED calc(101% - 12px) 100%,#0000 101%) 0 calc(1.5*32px + 12px), radial-gradient(calc(1.28*32px + 12px/2) at left 50% top calc(-.8*32px),#1A8FE5 calc(100% - 12px),#E4E4ED calc(101% - 12px) 100%,#0000 101%) 32px calc(calc(1.5*32px + 12px)/ 2), linear-gradient(#1A8FE5 50%,#1AE5D6 0);
    background-size: calc(4*32px) calc(1.5*32px + 12px);
}

.shape-pattern-dark {
    background: radial-gradient(calc(1.28*32px + 12px/2) at left 50% bottom calc(-.8*32px),#1A8FE5 calc(100% - 12px),#1f2937 calc(101% - 12px) 100%,#0000 101%) calc(2*32px) calc(-1*calc(1.5*32px + 12px)), radial-gradient(calc(1.28*32px + 12px/2) at left 50% bottom calc(-.8*32px),#1AE5D6 calc(100% - 12px),#1f2937 calc(101% - 12px) 100%,#0000 101%) calc(-1*32px) calc(calc(1.5*32px + 12px)/-2), radial-gradient(calc(1.28*32px + 12px/2) at left 50% top calc(-.8*32px),#1AE5D6 calc(100% - 12px),#1f2937 calc(101% - 12px) 100%,#0000 101%) 0 calc(1.5*32px + 12px), radial-gradient(calc(1.28*32px + 12px/2) at left 50% top calc(-.8*32px),#1A8FE5 calc(100% - 12px),#1f2937 calc(101% - 12px) 100%,#0000 101%) 32px calc(calc(1.5*32px + 12px)/ 2), linear-gradient(#1A8FE5 50%,#1AE5D6 0);
    background-size: calc(4*32px) calc(1.5*32px + 12px);
}

.whirls-pattern {
    background: conic-gradient(at 62.5% 12.5%, #1A8FE5 25%, #0000 0) calc(32px/-8) calc(32px/2), conic-gradient(at 62.5% 12.5%, #1A8FE5 25%, #0000 0) calc(-3*32px/8) calc(32px/4), conic-gradient(at 87.5% 62.5%, #1A8FE5 25%, #0000 0) calc(3*32px/8) calc(32px/4), conic-gradient(at 87.5% 62.5%, #1A8FE5 25%, #0000 0) calc(32px/-8) 0, conic-gradient(at 25% 12.5%, #1A8FE5 25%, #0000 0) 0 calc(32px/-4), conic-gradient(at 25% 12.5%, #1A8FE5 25%, #0000 0) calc(32px/-4) 0, conic-gradient(at 87.5% 87.5%, #1A8FE5 25%, #0000 0) calc(32px/8) 0 #E4E4ED;
    background-size: 32px 32px;
}

.whirls-pattern-dark {
    background: conic-gradient(at 62.5% 12.5%, #1A8FE5 25%, #0000 0) calc(32px/-8) calc(32px/2), conic-gradient(at 62.5% 12.5%, #1A8FE5 25%, #0000 0) calc(-3*32px/8) calc(32px/4), conic-gradient(at 87.5% 62.5%, #1A8FE5 25%, #0000 0) calc(3*32px/8) calc(32px/4), conic-gradient(at 87.5% 62.5%, #1A8FE5 25%, #0000 0) calc(32px/-8) 0, conic-gradient(at 25% 12.5%, #1A8FE5 25%, #0000 0) 0 calc(32px/-4), conic-gradient(at 25% 12.5%, #1A8FE5 25%, #0000 0) calc(32px/-4) 0, conic-gradient(at 87.5% 87.5%, #1A8FE5 25%, #0000 0) calc(32px/8) 0 transparent;
    background-size: 32px 32px;
}


@keyframes corner {
    0% {
        /* Top-left corner rounded */
        border-radius: 0% 0% 0% 0% / 0% 0% 0% 0%;
    }

    50% {
        border-radius: 25% 25% 25% 25% / 25% 25% 25% 25%;
    }

    100% {
        border-radius: 0% 0% 0% 0% / 0% 0% 0% 0%;
    }
}


.shelf-content {
    height: auto;
}

.shelf-sm {
    --edge: 2%;
    --width: calc(100% + var(--edge));
    --edge-side: calc(var(--edge) / 2);
    width: var(--width);
    margin-left: calc(var(--edge-side)*-1);
}

.trapezoid-sm {
    --height: 2rem;
    --p: 2%;
    --test: calc(var(--edge-side) +  -1.0rem);
    transform-origin: bottom;
    overflow: hidden;
    clip-path: polygon(var(--test) 0%, calc(100% - var(--test)) 0%, 100% 100%, 0% 100%);
}

.shelf {
    --edge: 20%;
    --width: calc(100% + var(--edge));
    --edge-side: calc(var(--edge) / 2);
    width: var(--width);
    margin-left: calc(var(--edge-side)*-1);
}

.invert-trapezoid {
    --height: 2rem;
    --p: 4%;
    --test: calc(var(--edge-side)/1);
    transform-origin: bottom;
    overflow: hidden;
    clip-path: polygon(var(--test) 0%, calc(100% - var(--test)) 0%, 100% 100%, 0% 100%);
    filter: brightness(0.6);
}



.shelf.shelf-face {
    filter: brightness(1);
}
.shelf-sm.shelf-face {
    filter: brightness(1);
}

.shelf.trapezoid {
    filter: brightness(0.7);
}
.shelf-sm.trapezoid-sm {
    filter: brightness(0.6) ;
}
.wood-back {
    background-image: filter(url('../images/darkwood.jpg'), brightness(0.6));
    background-size: 400px;
    background-position-x: center;
    background-repeat: repeat;
}

[data-mode="dark"] .wood, [data-mode="dark"] .shelf-face {
    background-image: url('../images/darkwood.jpg');
    background-size: 400px;
    background-position-x: center;
    background-repeat: repeat;
}

/*    .wood:not(.trapezoid) {
        opacity: 0.8;
    }*/
     
.back {
    z-index: 1;
}

.front {
    z-index: 2;
}

.shelf-face {
    filter: brightness(1)
}

.neon-text {
    text-shadow: 0 0 5px #02b0f1, 0 0 7px #02b0f1, 0 0 10px #02b0f1, 0 0 20px #02b0f1, 0 0 30px #0000FF, 0 0 10px #02b0f1, 0 0 98px #0000FF;
    color: #b4ffff;
    text-align: center;
}
.red-neon-text {
    text-shadow: 0 0 5px #d9412e, 0 0 7px #d9412e, 0 0 10px #d9412e, 0 0 20px #d9412e, 0 0 30px #0000FF, 0 0 10px #d9412e, 0 0 98px #d9412e;
    color: #b4ffff;
    text-align: center;
}

/* Container Styles */
.box-container {
    display: block;
    width: 300px;
    height: 300px;
    position: relative;
    margin: 200px auto;
    background-size: cover;
    cursor: pointer;
}

    .box-container div {
        display: block;
        position: absolute;
        background: rgb(168, 134, 88);
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        height: 150px;
        width: 300px;
        transition: all 1s ease-in-out;
    }

/* Panel 1 */
    .box-container .i-1 {
        top: 0;
        left: 0;
        z-index: 1;
        transform: perspective(800px) rotateX(0deg);
        transform-origin: 50% 0%;
    }

        .box-container .i-1.open {
            transform: perspective(800px) rotateX(110deg);
            z-index: 6;
        }

/* Panel 2 */
    .box-container .i-2 {
        right: -150px;
        top: 150px;
        z-index: 4;
        transform: rotate(90deg) perspective(800px) rotateX(45deg);
        transform-origin: 50% 0%;
    }

        .box-container .i-2.open {
            transform: rotate(90deg) perspective(800px) rotateX(110deg);
        }

/* Panel 3 */
    .box-container .i-3 {
        top: 150px;
        z-index: 3;
        transform: perspective(800px) rotateX(0deg);
        transform-origin: 50% 100%;
    }

        .box-container .i-3.open {
            transform: perspective(800px) rotateX(-110deg);
            z-index: 4;
        }

/* Panel 4 */
    .box-container .i-4 {
        right: 150px;
        top: 0px;
        z-index: 2;
        transform: rotate(90deg) perspective(800px) rotateX(0deg);
        transform-origin: 50% 100%;
    }

        .box-container .i-4.open {
            transform: rotate(90deg) perspective(800px) rotateX(-110deg);
            z-index: 5;
        }

[x-cloak] {
    display: none !important;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48
}
.material-symbols-solid {
    font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48
}


.support-fab {
    position: fixed;
    right: 2rem;
    bottom: 2rem;
}

.grecaptcha-badge {
    display: none;
}


.inset-shadow {
    box-shadow: rgba(20,25,32, .6) 0px 30px 10px 0px inset;
}
.cascade-box-shadow {
    box-shadow: rgba(124, 158, 221, 0.4) 2px 2px, rgba(124, 158, 221, 0.3) 4px 4px, rgba(124, 158, 221, 0.2) 6px 6px, rgba(124, 158, 221, 0.1) 8px 8px;
}

.bottom-cascade-box-shadow-lg {
    box-shadow: rgba(21, 27, 41, 0.4) 0px 5px 5px 5px, rgba(21, 27, 41, 0.3) 0px 15px 5px 5px, rgba(21, 27, 41, 0.2) 0px 15px 5px, rgba(21, 27, 41, 0.1) 0px 25px 5px 5px, rgba(21, 27, 41, 0.05) 0px 35px 5px 5px, rgba(21, 27, 41, 0.01) 0px 50px 5px 5px;
}

.confetti:before, .confetti:after {
    position: absolute;
    content: '';
    display: block;
    width: 140%;
    height: 100%;
    left: -20%;
    transition: all ease-in-out .5s;
    background-repeat: no-repeat
}

.confetti:before {
    display: none;
    top: -75%;
    background-image: radial-gradient(circle,#02b0f1 20%,transparent 20%),radial-gradient(circle,transparent 20%,#02b0f1 20%,transparent 30%),radial-gradient(circle,#02b0f1 20%,transparent 20%),radial-gradient(circle,#02b0f1 20%,transparent 20%),radial-gradient(circle,transparent 10%,#02b0f1 15%,transparent 20%),radial-gradient(circle,#02b0f1 20%,transparent 20%),radial-gradient(circle,#02b0f1 20%,transparent 20%),radial-gradient(circle,#02b0f1 20%,transparent 20%),radial-gradient(circle,#02b0f1 20%,transparent 20%);
    background-size: 10% 10%,20% 20%,15% 15%,20% 20%,18% 18%,10% 10%,15% 15%,10% 10%,18% 18%
}

.confetti:after {
    border: 0 !important;
    display: none;
    bottom: -75%;
    background-image: radial-gradient(circle,#02b0f1 20%,transparent 20%),radial-gradient(circle,#02b0f1 20%,transparent 20%),radial-gradient(circle,transparent 10%,#02b0f1 15%,transparent 20%),radial-gradient(circle,#02b0f1 20%,transparent 20%),radial-gradient(circle,#02b0f1 20%,transparent 20%),radial-gradient(circle,#02b0f1 20%,transparent 20%),radial-gradient(circle,#02b0f1 20%,transparent 20%);
    background-size: 15% 15%,20% 20%,18% 18%,20% 20%,15% 15%,10% 10%,20% 20%
}

.confetti:active {
    transform: scale(.9);
    background-color: #02b0f1;
    box-shadow: 0 2px 25px rgba(255,0,130,.2)
}

.confetti.bubble:before {
    display: block;
    animation: topBubbles ease-in-out .75s forwards
}

.confetti.bubble:after {
    display: block;
    animation: bottomBubbles ease-in-out .75s forwards
}


@keyframes topBubbles {
    0% {
        background-position: 5% 90%, 10% 90%, 10% 90%, 15% 90%, 25% 90%, 25% 90%, 40% 90%, 55% 90%, 70% 90%;
    }

    50% {
        background-position: 0% 80%, 0% 20%, 10% 40%, 20% 0%, 30% 30%, 22% 50%, 50% 50%, 65% 20%, 90% 30%;
    }

    100% {
        background-position: 0% 70%, 0% 10%, 10% 30%, 20% -10%, 30% 20%, 22% 40%, 50% 40%, 65% 10%, 90% 20%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}

@keyframes bottomBubbles {
    0% {
        background-position: 10% -10%, 30% 10%, 55% -10%, 70% -10%, 85% -10%, 70% -10%, 70% 0%;
    }

    50% {
        background-position: 0% 80%, 20% 80%, 45% 60%, 60% 100%, 75% 70%, 95% 60%, 105% 0%;
    }

    100% {
        background-position: 0% 90%, 20% 90%, 45% 70%, 60% 110%, 75% 80%, 95% 70%, 110% 10%;
        background-size: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
    }
}


.animate-wiggle {
  animation:  wiggle 1s ease-in-out 2;
}
.animate-wiggle-left {
  animation:  wiggle-left 1s ease-in-out 1;
}

.animate-wiggle-right {
  animation:  wiggle-right 1s ease-in-out 1;
}

@keyframes wiggle {
    0%
    {
        transform: rotate(-2deg);
    }

    50% {
        transform: rotate(2deg);
    }

    100% {
        transform: rotate(0deg);
    }
}


@keyframes wiggle-left {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(4deg);
    }

    100% {
        transform: rotate(0deg);
    }
}
@keyframes wiggle-right {
    0% {
        transform: rotate(0deg);
    }

    50% {
        transform: rotate(-4deg);
    }

    100% {
        transform: rotate(0deg);
    }
}