.btn-8,
.btn-8 *,
.btn-8 :after,
.btn-8 :before,
.btn-8:after,
.btn-8:before {
  border: 0 solid;
  box-sizing: border-box;

}
.btn-8 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
  text-transform: uppercase;
  margin: auto;
}
.btn-8:disabled {
  cursor: default;
}
.btn-8:-moz-focusring {
  outline: auto;
}
.btn-8 svg {
  display: block;
  vertical-align: middle;
}
.btn-8 [hidden] {
  display: none;
}
.btn-8 {
  border-radius: 99rem;
  border-width: 2px;
  overflow: hidden;
  padding: 0.8rem 3rem;
  position: relative;
}
.btn-8 span {
  mix-blend-mode: difference;
}
.btn-8:after,
.btn-8:before {
  --tilt: 1.2rem;
  background: #fff;
  -webkit-clip-path: polygon(
    0 0,
    calc(100% - var(--tilt)) 0,
    100% 100%,
    0 100%
  );
  clip-path: polygon(0 0, calc(100% - var(--tilt)) 0, 100% 100%, 0 100%);
  content: "";
  display: block;
  height: 100%;
  left: calc(-100% - var(--tilt));
  position: absolute;
  top: 0;
  transform: translateX(var(--progress, 0));
  transition: transform 0.2s ease;
  width: calc(100% + var(--tilt));
}
.btn-8:after {
  left: 100%;
  transform: translateX(var(--progress, 0)) rotate(180deg);
  z-index: -1;
}
.btn-8._ACTIVE:before {
  --progress: 100%;
}
.btn-8._ACTIVE:after {
  --progress: -100%;
}

.btn-5,
.btn-5 *,
.btn-5 :after,
.btn-5 :before,
.btn-5:after,
.btn-5:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-5 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
  text-transform: uppercase;
}
.btn-5:disabled {
  cursor: default;
}
.btn-5:-moz-focusring {
  outline: auto;
}
.btn-5 svg {
  display: block;
  vertical-align: middle;
}
.btn-5 [hidden] {
  display: none;
}
.btn-5 {
  border-radius: 99rem;
  border-width: 2px;
  overflow: hidden;
  padding: 0.8rem 3rem;
  position: relative;
}
.btn-5 span {
  mix-blend-mode: difference;
}
.btn-5:before {
  --tilt: 1.2rem;
  background: #fff;
  -webkit-clip-path: polygon(
    0 0,
    calc(100% - var(--tilt)) 0,
    100% 50%,
    calc(100% - var(--tilt)) 100%,
    0 100%
  );
  clip-path: polygon(
    0 0,
    calc(100% - var(--tilt)) 0,
    100% 50%,
    calc(100% - var(--tilt)) 100%,
    0 100%
  );
  content: "";
  display: block;
  height: 100%;
  left: calc(-100% - var(--tilt));
  position: absolute;
  top: 0;
  transform: translateX(var(--progress, 0));
  transition: transform 0.2s ease;
  width: calc(100% + var(--tilt));
}
.btn-5._ACTIVE:before {
  --progress: 100%;
}

.btn-35,
.btn-35 *,
.btn-35 :after,
.btn-35 :before,
.btn-35:after,
.btn-35:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-35 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}
.btn-35:disabled {
  cursor: default;
}
.btn-35:-moz-focusring {
  outline: auto;
}
.btn-35 svg {
  display: block;
  vertical-align: middle;
}
.btn-35 [hidden] {
  display: none;
}
.btn-35 {
  --height: 4rem;
  border: 1px solid;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  height: var(--height);
  overflow: hidden;
  padding: 0 3rem;
  position: relative;
  text-transform: uppercase;
}
.btn-35 span {
  font-weight: 900;
  mix-blend-mode: difference;
}
.btn-35:before {
  --middle: calc(var(--height) / 2);
  background: #fff;
  content: "";
  height: 100%;
  left: calc(var(--height) * -1);
  position: absolute;
  top: 0;
  transform: rotate(-90deg);
  transform-origin: var(--middle) var(--middle);
  transition: transform 0.3s;
  width: calc(100% + var(--height));
  z-index: -1;
}
.btn-35._ACTIVE:before {
  transform: rotate(0deg);
}

.btn-39,
.btn-39 *,
.btn-39 :after,
.btn-39 :before,
.btn-39:after,
.btn-39:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-39 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}
.btn-39:disabled {
  cursor: default;
}
.btn-39:-moz-focusring {
  outline: auto;
}
.btn-39 svg {
  display: block;
  vertical-align: middle;
}
.btn-39 [hidden] {
  display: none;
}
.btn-39 {
  border: 1px solid;
  box-sizing: border-box;
  display: block;
  font-weight: 900;
  overflow: hidden;
  padding: 1.1rem 4rem;
  position: relative;
  text-transform: uppercase;
}
.btn-39 .new {
  background: #fff;
  color: #000;
  display: grid;
  inset: 0;
  place-content: center;
  pointer-events: none;
  position: absolute;
  transform: translateX(-100%);
  transition: transform 0.2s;
}
.btn-39._ACTIVE .new {
  transform: translateX(0);
}

.btn-47,
.btn-47 *,
.btn-47 :after,
.btn-47 :before,
.btn-47:after,
.btn-47:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-47 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}
.btn-47:disabled {
  cursor: default;
}
.btn-47:-moz-focusring {
  outline: auto;
}
.btn-47 svg {
  display: block;
  vertical-align: middle;
}
.btn-47 [hidden] {
  display: none;
}
.btn-47 {
  background: #fff;
  box-sizing: border-box;
  color: #000;
  display: block;
  font-weight: 900;
  -webkit-mask-image: none;
  padding: 1.2rem 3rem;
  perspective: 800px;
  position: relative;
  text-transform: uppercase;
  transform: rotateY(12deg);
  transform-style: preserve-3d;
  transition: transform 0.2s;
}
.btn-47:before {
  background: #eee;
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transform: rotateY(90deg);
  transform-origin: 0 0;
  width: 20%;
}
.btn-47._ACTIVE {
  transform: rotateY(20deg);
}

.btn-27,
.btn-27 *,
.btn-27 :after,
.btn-27 :before,
.btn-27:after,
.btn-27:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-27 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
  text-transform: uppercase;
}
.btn-27:disabled {
  cursor: default;
}
.btn-27:-moz-focusring {
  outline: auto;
}
.btn-27 svg {
  display: block;
  vertical-align: middle;
}
.btn-27 [hidden] {
  display: none;
}
.btn-27 {
  --tilt: 40deg;
  background: none;
  -webkit-mask-image: none;
  padding: 2rem 5rem;
  perspective: 500px;
  transform-style: preserve-3d;
}
.btn-27 .text-container {
  background: #fff;
  display: grid;
  inset: 0;
  place-items: center;
  position: absolute;
  transform-origin: center center;
  transition: transform 0.2s;
}
.btn-27 .text {
  color: #000;
}
.btn-27._ACTIVE .text-container:first-child {
  transform: rotateY(var(--tilt));
}
.btn-27._ACTIVE .text-container:nth-child(2) {
  transform: rotateY(calc(var(--tilt) * -1));
}

.btn-97,
.btn-97 *,
.btn-97 :after,
.btn-97 :before,
.btn-97:after,
.btn-97:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-97 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}
.btn-97:disabled {
  cursor: default;
}
.btn-97:-moz-focusring {
  outline: auto;
}
.btn-97 svg {
  display: block;
  vertical-align: middle;
}
.btn-97 [hidden] {
  display: none;
}
.btn-97 {
  background: #fff;
  border: 1px solid;
  border-radius: 999px;
  box-sizing: border-box;
  color: #000;
  display: block;
  font-weight: 900;
  -webkit-mask-image: none;
  overflow: hidden;
  padding: 1.2rem 3rem;
  position: relative;
  text-transform: uppercase;
  transition: 0.2s;
}
.btn-97._ACTIVE {
  box-shadow: 0 6px 0 -4px #fff, 0 9px 0 -4px #aaa, 0 12px 0 -4px #000;
  transform: translateY(-5px);
}

.btn-34,
.btn-34 *,
.btn-34 :after,
.btn-34 :before,
.btn-34:after,
.btn-34:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-34 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
  text-transform: uppercase;
}
.btn-34:disabled {
  cursor: default;
}
.btn-34:-moz-focusring {
  outline: auto;
}
.btn-34 svg {
  display: block;
  vertical-align: middle;
}
.btn-34 [hidden] {
  display: none;
}
.btn-34 {
  border-radius: 99rem;
  border-width: 2px;
  overflow: hidden;
  padding: 0.8rem 3rem;
  position: relative;
}
.btn-34._ACTIVE {
  transform: scale(1.1);
}
.btn-34 span {
  font-weight: 900;
  mix-blend-mode: difference;
}
.btn-34:before {
  aspect-ratio: 1;
  background: #fff;
  border-radius: 50%;
  content: "";
  left: 50%;
  position: absolute;
  top: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.2s;
  width: 0;
}
.btn-34._ACTIVE:before {
  width: 100%;
}

.btn-30,
.btn-30 *,
.btn-30 :after,
.btn-30 :before,
.btn-30:after,
.btn-30:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-30 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
  text-transform: uppercase;
}
.btn-30:disabled {
  cursor: default;
}
.btn-30:-moz-focusring {
  outline: auto;
}
.btn-30 svg {
  display: block;
  vertical-align: middle;
}
.btn-30 [hidden] {
  display: none;
}
.btn-30 {
  border-radius: 999px;
  border-width: 1px;
  overflow: hidden;
  padding: 1rem 2rem;
  position: relative;
}
.btn-30 span {
  mix-blend-mode: difference;
}
.btn-30:before {
  aspect-ratio: 1;
  background: #fff;
  border-radius: 50%;
  content: "";
  height: 0;
  left: 50%;
  position: absolute;
  top: -200%;
  transform: translateX(-50%);
  transition: height 0.3s;
}
.btn-30._ACTIVE:before {
  height: 400%;
}
.btn-30 .text-container {
  display: block;
  overflow: hidden;
  position: relative;
}
.btn-30 .text {
  display: block;
  mix-blend-mode: difference;
  position: relative;
}
.btn-30._ACTIVE .text {
  -webkit-animation: move-up-alternate 0.3s ease forwards;
  animation: move-up-alternate 0.3s ease forwards;
}
@-webkit-keyframes move-up-alternate {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(80%);
  }
  51% {
    transform: translateY(-80%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes move-up-alternate {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(80%);
  }
  51% {
    transform: translateY(-80%);
  }
  to {
    transform: translateY(0);
  }
}

.btn-7,
.btn-7 *,
.btn-7 :after,
.btn-7 :before,
.btn-7:after,
.btn-7:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-7 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
  text-transform: uppercase;
}
.btn-7:disabled {
  cursor: default;
}
.btn-7:-moz-focusring {
  outline: auto;
}
.btn-7 svg {
  display: block;
  vertical-align: middle;
}
.btn-7 [hidden] {
  display: none;
}
.btn-7 {
  border-radius: 99rem;
  border-width: 2px;
  -webkit-mask-image: none;
  overflow: hidden;
  padding: 0.8rem 3rem;
  position: relative;
}
.btn-7 span {
  mix-blend-mode: difference;
}
.btn-7:before {
  background: #fff;
  -webkit-clip-path: polygon(
    0 calc(var(--progress, 100%) / 2),
    100% calc(var(--progress, 100%) / 2),
    100% calc(100% - var(--progress, 100%) / 2),
    0 calc(100% - var(--progress, 100%) / 2)
  );
  clip-path: polygon(
    0 calc(var(--progress, 100%) / 2),
    100% calc(var(--progress, 100%) / 2),
    100% calc(100% - var(--progress, 100%) / 2),
    0 calc(100% - var(--progress, 100%) / 2)
  );
  content: "";
  inset: 0;
  position: absolute;
  transition: -webkit-clip-path 0.2s ease;
  transition: clip-path 0.2s ease;
  transition: clip-path 0.2s ease, -webkit-clip-path 0.2s ease;
}
.btn-7._ACTIVE:before {
  --progress: 0%;
}

.btn-3,
.btn-3 *,
.btn-3 :after,
.btn-3 :before,
.btn-3:after,
.btn-3:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-3 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
  text-transform: uppercase;
}
.btn-3:disabled {
  cursor: default;
}
.btn-3:-moz-focusring {
  outline: auto;
}
.btn-3 svg {
  display: block;
  vertical-align: middle;
}
.btn-3 [hidden] {
  display: none;
}
.btn-3 {
  border-radius: 99rem;
  border-width: 2px;
  overflow: hidden;
  padding: 0.8rem 3rem;
  position: relative;
}
.btn-3 span {
  mix-blend-mode: difference;
}
.btn-3:before {
  background: #fff;
  content: "";
  inset: 0;
  position: absolute;
  transform: translateY(var(--progress, -100%));
  transition: transform 0.2s ease;
}
.btn-3._ACTIVE:before {
  --progress: 0;
}

.btn-21,
.btn-21 *,
.btn-21 :after,
.btn-21 :before,
.btn-21:after,
.btn-21:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-21 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
  text-transform: uppercase;
}
.btn-21:disabled {
  cursor: default;
}
.btn-21:-moz-focusring {
  outline: auto;
}
.btn-21 svg {
  display: block;
  vertical-align: middle;
}
.btn-21 [hidden] {
  display: none;
}
.btn-21 {
  border-radius: 99rem;
  border-width: 2px;
  overflow: hidden;
  padding: 0.8rem 3rem;
  position: relative;
}
.btn-21 span {
  mix-blend-mode: difference;
}
.btn-21:before {
  -webkit-animation: move-out 0.3s;
  animation: move-out 0.3s;
  background: #fff;
  content: "";
  height: 100%;
  left: -100%;
  position: absolute;
  top: 0;
  width: 100%;
  will-change: transform;
}
.btn-21._ACTIVE:before {
  -webkit-animation: move-in 0.3s forwards;
  animation: move-in 0.3s forwards;
}
@-webkit-keyframes move-in {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes move-in {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}
@-webkit-keyframes move-out {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(200%);
  }
}
@keyframes move-out {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(200%);
  }
}

.btn-6,
.btn-6 *,
.btn-6 :after,
.btn-6 :before,
.btn-6:after,
.btn-6:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-6 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
  text-transform: uppercase;
}
.btn-6:disabled {
  cursor: default;
}
.btn-6:-moz-focusring {
  outline: auto;
}
.btn-6 svg {
  display: block;
  vertical-align: middle;
}
.btn-6 [hidden] {
  display: none;
}
.btn-6 {
  border-radius: 99rem;
  border-width: 2px;
  overflow: hidden;
  padding: 0.8rem 3rem;
  position: relative;
}
.btn-6 span {
  mix-blend-mode: difference;
}
.btn-6:after,
.btn-6:before {
  background: #fff;
  content: "";
  inset: 0;
  position: absolute;
  transform: translateX(var(--progress, -100%));
  transition: transform 0.2s ease;
}
.btn-6:after {
  transform: translateX(var(--progress, 100%));
  z-index: -1;
}
.btn-6._ACTIVE {
  --progress: 0;
}

.btn-50,
.btn-50 *,
.btn-50 :after,
.btn-50 :before,
.btn-50:after,
.btn-50:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-50 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}
.btn-50:disabled {
  cursor: default;
}
.btn-50:-moz-focusring {
  outline: auto;
}
.btn-50 svg {
  display: block;
  vertical-align: middle;
}
.btn-50 [hidden] {
  display: none;
}
.btn-50 {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 1px 2px 2px #eee;
  box-sizing: border-box;
  color: #000;
  display: block;
  font-weight: 900;
  -webkit-mask-image: none;
  padding: 20px 60px;
  perspective: 800px;
  position: relative;
  text-transform: uppercase;
  transform: rotateX(32deg);
  transform-style: preserve-3d;
  transition: transform 0.2s;
}
.btn-50._ACTIVE {
  transform: rotateX(38deg) translateY(7px);
}
.btn-50:before {
  background: hsla(0, 0%, 100%, 0.3);
  content: "";
  filter: blur(80px);
  height: 400%;
  left: -50%;
  pointer-events: none;
  position: absolute;
  top: 0;
  transform: translateY(50px);
  width: 200%;
}

.btn-9,
.btn-9 *,
.btn-9 :after,
.btn-9 :before,
.btn-9:after,
.btn-9:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-9 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
  text-transform: uppercase;
}
.btn-9:disabled {
  cursor: default;
}
.btn-9:-moz-focusring {
  outline: auto;
}
.btn-9 svg {
  display: block;
  vertical-align: middle;
}
.btn-9 [hidden] {
  display: none;
}
.btn-9 {
  border-radius: 99rem;
  border-width: 2px;
  overflow: hidden;
  padding: 0.8rem 3rem;
  position: relative;
}
.btn-9 span {
  mix-blend-mode: difference;
}
.btn-9:after,
.btn-9:before {
  --tilt: 1.2rem;
  background: #fff;
  -webkit-clip-path: polygon(
    0 0,
    calc(100% - var(--tilt)) 0,
    100% 50%,
    calc(100% - var(--tilt)) 100%,
    0 100%
  );
  clip-path: polygon(
    0 0,
    calc(100% - var(--tilt)) 0,
    100% 50%,
    calc(100% - var(--tilt)) 100%,
    0 100%
  );
  content: "";
  display: block;
  height: 100%;
  left: calc(-100% - var(--tilt));
  position: absolute;
  top: 0;
  transform: translateX(var(--progress, 0));
  transition: transform 0.2s ease;
  width: calc(100% + var(--tilt));
}
.btn-9:after {
  left: 100%;
  transform: translateX(var(--progress, 0)) rotate(180deg);
  z-index: -1;
}
.btn-9._ACTIVE:before {
  --progress: 100%;
}
.btn-9._ACTIVE:after {
  --progress: -100%;
}

.btn-41,
.btn-41 *,
.btn-41 :after,
.btn-41 :before,
.btn-41:after,
.btn-41:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-41 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}
.btn-41:disabled {
  cursor: default;
}
.btn-41:-moz-focusring {
  outline: auto;
}
.btn-41 svg {
  display: block;
  vertical-align: middle;
}
.btn-41 [hidden] {
  display: none;
}
.btn-41 {
  border: 2px solid #fff;
  border-radius: 999px;
  box-sizing: border-box;
  display: block;
  font-weight: 900;
  overflow: hidden;
  padding: 1.1rem 3rem;
  position: relative;
  text-transform: uppercase;
}
.btn-41 span {
  mix-blend-mode: difference;
}
.btn-41:before {
  background: #fff;
  border-radius: 999px;
  content: "";
  inset: 0;
  position: absolute;
  transition: transform 0.2s;
}
.btn-41._ACTIVE:before {
  transform: scale(0.7);
}

.btn-53,
.btn-53 *,
.btn-53 :after,
.btn-53 :before,
.btn-53:after,
.btn-53:before {
  border: 0 solid;
  box-sizing: border-box;
margin: auto;
}
.btn-53 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: rgb(122, 127, 179);
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
padding-bottom: 30px;
  margin: auto;
}
.btn-53:disabled {
  cursor: default;
}
.btn-53:-moz-focusring {
  outline: auto;
}
.btn-53 svg {
  display: block;
  vertical-align: middle;
}
.btn-53 [hidden] {
  display: none;
}
.btn-53 {
  border: 1px solid;
  border-radius: 999px;
  box-sizing: border-box;
  display: block;
  font-weight: 900;
  overflow: hidden;
  padding: 1.2rem 3rem;
  position: relative;
  text-transform: uppercase;
}
.btn-53 .original {
  background: #fff;
  color: #000;
  display: grid;
  inset: 0;
  place-content: center;
  position: absolute;
  transition: transform 0.2s cubic-bezier(0.87, 0, 0.13, 1);
}
.btn-53._ACTIVE .original {
  transform: translateY(100%);
}
.btn-53 .letters {
  display: inline-flex;
}
.btn-53 span {
  opacity: 0;
  transform: translateY(-15px);
  transition: transform 0.2s cubic-bezier(0.87, 0, 0.13, 1), opacity 0.2s;
}
.btn-53 span:nth-child(2n) {
  transform: translateY(15px);
}
.btn-53._ACTIVE span {
  opacity: 1;
  transform: translateY(0);
}
.btn-53._ACTIVE span:nth-child(2) {
  transition-delay: 0.1s;
}
.btn-53._ACTIVE span:nth-child(3) {
  transition-delay: 0.2s;
}
.btn-53._ACTIVE span:nth-child(4) {
  transition-delay: 0.3s;
}
.btn-53._ACTIVE span:nth-child(5) {
  transition-delay: 0.4s;
}
.btn-53._ACTIVE span:nth-child(6) {
  transition-delay: 0.5s;
}

.btn-78,
.btn-78 *,
.btn-78 :after,
.btn-78 :before,
.btn-78:after,
.btn-78:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-78 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}
.btn-78:disabled {
  cursor: default;
}
.btn-78:-moz-focusring {
  outline: auto;
}
.btn-78 svg {
  display: block;
  vertical-align: middle;
}
.btn-78 [hidden] {
  display: none;
}
.btn-78 {
  --height: 80px;
  background: none;
  border-radius: 999px;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  height: var(--height);
  -webkit-mask-image: none;
  padding: 0 3rem;
  position: relative;
  text-transform: uppercase;
}
.btn-78 span {
  font-weight: 900;
  mix-blend-mode: difference;
}
.btn-78:before {
  background: #fff;
  border-radius: 20px;
  content: "";
  height: calc(var(--height) / 1.4);
  left: calc(var(--height) * -1);
  pointer-events: none;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: 0.2s;
  width: calc(var(--height) / 1.4);
}
.btn-78._ACTIVE:before {
  left: 0;
  width: 100%;
}

.btn-42,
.btn-42 *,
.btn-42 :after,
.btn-42 :before,
.btn-42:after,
.btn-42:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-42 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}
.btn-42:disabled {
  cursor: default;
}
.btn-42:-moz-focusring {
  outline: auto;
}
.btn-42 svg {
  display: block;
  vertical-align: middle;
}
.btn-42 [hidden] {
  display: none;
}
.btn-42 {
  border-radius: 999px;
  box-sizing: border-box;
  display: block;
  font-weight: 900;
  -webkit-mask-image: none;
  padding: 1rem 3rem;
  position: relative;
  text-transform: uppercase;
}
.btn-42 span {
  mix-blend-mode: difference;
}
.btn-42:before {
  --thickness: 4px;
  border: var(--thickness) solid #fff;
  border-radius: 999px;
  content: "";
  inset: calc(var(--thickness) * -1);
  opacity: 0;
  pointer-events: none;
  position: absolute;
  transform: scale(1.3);
  transition: transform 0.2s, opacity 0.2s;
}
.btn-42._ACTIVE:before {
  opacity: 1;
  transform: scale(1);
}
.btn-42._ACTIVE {
  background-color: transparent;
}

.btn-38,
.btn-38 *,
.btn-38 :after,
.btn-38 :before,
.btn-38:after,
.btn-38:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-38 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}
.btn-38:disabled {
  cursor: default;
}
.btn-38:-moz-focusring {
  outline: auto;
}
.btn-38 svg {
  display: block;
  vertical-align: middle;
}
.btn-38 [hidden] {
  display: none;
}
.btn-38 {
  border: 1px solid;
  box-sizing: border-box;
  display: block;
  overflow: hidden;
  padding: 1.1rem 4rem;
  position: relative;
  text-transform: uppercase;
}
.btn-38 .new,
.btn-38 .old span {
  font-weight: 900;
  transition: transform 0.2s;
}
.btn-38 .new {
  display: block;
  transform: scale(0);
}
.btn-38._ACTIVE .new {
  transform: scale(1);
}
.btn-38 .old,
.btn-38 .old span {
  inset: 0;
  position: absolute;
}
.btn-38 .old span {
  background: #fff;
  color: #000;
  display: block;
  display: grid;
  place-items: center;
}
.btn-38 .old span:first-child {
  -webkit-clip-path: polygon(0 0, 51% 0, 51% 100%, 0 100%);
  clip-path: polygon(0 0, 51% 0, 51% 100%, 0 100%);
}
.btn-38 .old span:nth-child(2) {
  -webkit-clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}
.btn-38._ACTIVE .old span:first-child {
  transform: translateX(-100%);
}
.btn-38._ACTIVE .old span:nth-child(2) {
  transform: translateX(100%);
}

.btn-29,
.btn-29 *,
.btn-29 :after,
.btn-29 :before,
.btn-29:after,
.btn-29:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-29 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
  text-transform: uppercase;
}
.btn-29:disabled {
  cursor: default;
}
.btn-29:-moz-focusring {
  outline: auto;
}
.btn-29 svg {
  display: block;
  vertical-align: middle;
}
.btn-29 [hidden] {
  display: none;
}
.btn-29 {
  --tilt: 30px;
  border-width: 1px;
  display: grid;
  padding: 1.2rem 3rem;
  place-content: center;
}
.btn-29,
.btn-29 .text-container {
  overflow: hidden;
  position: relative;
}
.btn-29 .text-container {
  display: block;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
}
.btn-29 .text {
  display: block;
  font-weight: 900;
  mix-blend-mode: difference;
  position: relative;
}
.btn-29._ACTIVE .text {
  -webkit-animation: move-right-alternate 0.3s ease forwards;
  animation: move-right-alternate 0.3s ease forwards;
}
@-webkit-keyframes move-right-alternate {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(80%);
  }
  51% {
    transform: translateX(-80%);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes move-right-alternate {
  0% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(80%);
  }
  51% {
    transform: translateX(-80%);
  }
  to {
    transform: translateX(0);
  }
}
.btn-29:before {
  -webkit-animation: move-out 0.3s ease;
  animation: move-out 0.3s ease;
  background: #fff;
  -webkit-clip-path: polygon(
    0 0,
    calc(100% - var(--tilt)) 0,
    100% 50%,
    calc(100% - var(--tilt)) 100%,
    0 100%
  );
  clip-path: polygon(
    0 0,
    calc(100% - var(--tilt)) 0,
    100% 50%,
    calc(100% - var(--tilt)) 100%,
    0 100%
  );
  content: "";
  height: 100%;
  left: calc(-100% - var(--tilt));
  position: absolute;
  top: 0;
  width: calc(100% + var(--tilt));
}
.btn-29._ACTIVE:before {
  -webkit-animation: move-in 0.3s ease forwards;
  animation: move-in 0.3s ease forwards;
}
@-webkit-keyframes move-in {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes move-in {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}
@-webkit-keyframes move-out {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(200%);
  }
}
@keyframes move-out {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(200%);
  }
}

.btn-101,
.btn-101 *,
.btn-101 :after,
.btn-101 :before,
.btn-101:after,
.btn-101:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-101 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
  text-transform: uppercase;
}
.btn-101:disabled {
  cursor: default;
}
.btn-101:-moz-focusring {
  outline: auto;
}
.btn-101 svg {
  vertical-align: middle;
}
.btn-101 [hidden] {
  display: none;
}
.btn-101 {
  --thickness: 0.3rem;
  --roundness: 1.2rem;
  --color: #eff6ff;
  --opacity: 0.6;
  -webkit-backdrop-filter: blur(100px);
  backdrop-filter: blur(100px);
  background: none;
  background: hsla(0, 0%, 100%, 0.2);
  border: none;
  border-radius: var(--roundness);
  color: var(--color);
  cursor: pointer;
  display: block;
  font-family: Poppins, "sans-serif";
  font-size: 1rem;
  font-weight: 500;
  padding: 0.8rem 3rem;
  position: relative;
}
.btn-101._ACTIVE {
  background: hsla(0, 0%, 100%, 0.3);
  filter: brightness(1.2);
}
.btn-101:active {
  --opacity: 0;
  background: hsla(0, 0%, 100%, 0.1);
}
.btn-101 svg {
  border-radius: var(--roundness);
  display: block;
  filter: url(#glow);
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}
.btn-101 rect {
  fill: none;
  stroke: var(--color);
  stroke-width: var(--thickness);
  rx: var(--roundness);
  stroke-linejoin: round;
  stroke-dasharray: 185%;
  stroke-dashoffset: 80;
  -webkit-animation: snake 2s linear infinite;
  animation: snake 2s linear infinite;
  -webkit-animation-play-state: paused;
  animation-play-state: paused;
  height: 100%;
  opacity: 0;
  transition: opacity 0.2s;
  width: 100%;
}
.btn-101._ACTIVE rect {
  -webkit-animation-play-state: running;
  animation-play-state: running;
  opacity: var(--opacity);
}
@-webkit-keyframes snake {
  to {
    stroke-dashoffset: 370%;
  }
}
@keyframes snake {
  to {
    stroke-dashoffset: 370%;
  }
}

.btn-25,
.btn-25 *,
.btn-25 :after,
.btn-25 :before,
.btn-25:after,
.btn-25:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-25 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
  text-transform: uppercase;
}
.btn-25:disabled {
  cursor: default;
}
.btn-25:-moz-focusring {
  outline: auto;
}
.btn-25 svg {
  display: block;
  vertical-align: middle;
}
.btn-25 [hidden] {
  display: none;
}
.btn-25 {
  --background: #000;
  background: none;
  overflow: hidden;
  padding: 0.8rem 3rem;
  position: relative;
}
.btn-25 span {
  display: block;
  position: relative;
  transition: transform 0.2s ease;
}
.btn-25:after,
.btn-25:before {
  --tilt: 20px;
  background: #fff;
  -webkit-clip-path: polygon(0 50%, 0 0, 100% 0, 100% 50%, 100% 100%, 0 100%);
  clip-path: polygon(0 50%, 0 0, 100% 0, 100% 50%, 100% 100%, 0 100%);
  content: "";
  display: block;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  transition: -webkit-clip-path 0.2s ease;
  transition: clip-path 0.2s ease;
  transition: clip-path 0.2s ease, -webkit-clip-path 0.2s ease;
  width: 100%;
  z-index: -1;
}
.btn-25:after {
  --thickness: 5px;
  background: var(--background);
  height: calc(100% - var(--thickness) * 2);
  left: var(--thickness);
  top: var(--thickness);
  width: calc(100% - var(--thickness) * 2);
}
.btn-25._ACTIVE:after,
.btn-25._ACTIVE:before {
  -webkit-clip-path: polygon(
    0 50%,
    var(--tilt) 0,
    calc(100% - var(--tilt)) 0,
    100% 50%,
    calc(100% - var(--tilt)) 100%,
    var(--tilt) 100%
  );
  clip-path: polygon(
    0 50%,
    var(--tilt) 0,
    calc(100% - var(--tilt)) 0,
    100% 50%,
    calc(100% - var(--tilt)) 100%,
    var(--tilt) 100%
  );
}

.btn-58,
.btn-58 *,
.btn-58 :after,
.btn-58 :before,
.btn-58:after,
.btn-58:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-58 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}
.btn-58:disabled {
  cursor: default;
}
.btn-58:-moz-focusring {
  outline: auto;
}
.btn-58 svg {
  display: block;
  vertical-align: middle;
}
.btn-58 [hidden] {
  display: none;
}
.btn-58 {
  background: none;
  border-radius: 999px;
  box-sizing: border-box;
  color: #000;
  display: block;
  z-index: 1;
  font-weight: 900;
  -webkit-mask-image: none;
  padding: 1.2rem 3rem;
  position: relative;
  text-transform: uppercase;
}
.btn-58:before {
  background: #fff;
  border-radius: 999px;
  height: 100%;
  left: 0;
  top: 0;
  width: 100%;
}
.btn-58:after,
.btn-58:before {
  content: "";
  pointer-events: none;
  position: absolute;
  transition: 0.4s;
  z-index: -1;
}
.btn-58:after {
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background: hsla(0, 0%, 100%, 0.2);
  border-radius: 50%;
  height: 30px;
  left: 90%;
  top: 80%;
  width: 30px;
}
.btn-58._ACTIVE:before {
  height: 90%;
  left: 5%;
  top: 10%;
  width: 90%;
}
.btn-58._ACTIVE:after {
  border-radius: 10px;
  height: 80%;
  left: 5%;
  top: 10%;
  width: 90%;
}

.btn-4,
.btn-4 *,
.btn-4 :after,
.btn-4 :before,
.btn-4:after,
.btn-4:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-4 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
  text-transform: uppercase;
}
.btn-4:disabled {
  cursor: default;
}
.btn-4:-moz-focusring {
  outline: auto;
}
.btn-4 svg {
  display: block;
  vertical-align: middle;
}
.btn-4 [hidden] {
  display: none;
}
.btn-4 {
  border-radius: 99rem;
  border-width: 2px;
  overflow: hidden;
  padding: 0.8rem 3rem;
  position: relative;
}
.btn-4 span {
  mix-blend-mode: difference;
}
.btn-4:before {
  --tilt: 1.2rem;
  background: #fff;
  -webkit-clip-path: polygon(
    0 0,
    calc(100% - var(--tilt)) 0,
    100% 100%,
    0 100%
  );
  clip-path: polygon(0 0, calc(100% - var(--tilt)) 0, 100% 100%, 0 100%);
  content: "";
  display: block;
  height: 100%;
  left: calc(-100% - var(--tilt));
  position: absolute;
  top: 0;
  transform: translateX(var(--progress, 0));
  transition: transform 0.2s ease;
  width: calc(100% + var(--tilt));
}
.btn-4._ACTIVE:before {
  --progress: 100%;
}

.btn-18,
.btn-18 *,
.btn-18 :after,
.btn-18 :before,
.btn-18:after,
.btn-18:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-18 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
  text-transform: uppercase;
}
.btn-18:disabled {
  cursor: default;
}
.btn-18:-moz-focusring {
  outline: auto;
}
.btn-18 svg {
  display: block;
  vertical-align: middle;
}
.btn-18 [hidden] {
  display: none;
}
.btn-18 {
  border-radius: 99rem;
  border-width: 2px;
  padding: 0.8rem 3rem;
  z-index: 0;
}
.btn-18,
.btn-18 .text-container {
  overflow: hidden;
  position: relative;
}
.btn-18 .text-container {
  display: block;
}
.btn-18 .text {
  display: block;
  mix-blend-mode: difference;
  position: relative;
}
.btn-18._ACTIVE .text {
  -webkit-animation: move-up-alternate 0.3s forwards;
  animation: move-up-alternate 0.3s forwards;
}
@-webkit-keyframes move-up-alternate {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(80%);
  }
  51% {
    transform: translateY(-80%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes move-up-alternate {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(80%);
  }
  51% {
    transform: translateY(-80%);
  }
  to {
    transform: translateY(0);
  }
}
.btn-18:after,
.btn-18:before {
  --tilt: 20px;
  background: #fff;
  -webkit-clip-path: polygon(
    0 0,
    calc(100% - var(--tilt)) 0,
    100% 50%,
    calc(100% - var(--tilt)) 100%,
    0 100%
  );
  clip-path: polygon(
    0 0,
    calc(100% - var(--tilt)) 0,
    100% 50%,
    calc(100% - var(--tilt)) 100%,
    0 100%
  );
  content: "";
  height: 100%;
  left: -100%;
  position: absolute;
  top: 0;
  transition: transform 0.6s;
  width: 100%;
}
.btn-18:after {
  -webkit-clip-path: polygon(
    var(--tilt) 0,
    0 50%,
    var(--tilt) 100%,
    100% 100%,
    100% 0
  );
  clip-path: polygon(var(--tilt) 0, 0 50%, var(--tilt) 100%, 100% 100%, 100% 0);
  left: 100%;
  z-index: -1;
}
.btn-18._ACTIVE:before {
  transform: translateX(100%);
}
.btn-18._ACTIVE:after {
  transform: translateX(-100%);
}

.btn-52,
.btn-52 *,
.btn-52 :after,
.btn-52 :before,
.btn-52:after,
.btn-52:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-52 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}
.btn-52:disabled {
  cursor: default;
}
.btn-52:-moz-focusring {
  outline: auto;
}
.btn-52 svg {
  display: block;
  vertical-align: middle;
}
.btn-52 [hidden] {
  display: none;
}
.btn-52 {
  border: 1px solid;
  border-radius: 999px;
  box-sizing: border-box;
  display: block;
  font-weight: 900;
  overflow: hidden;
  padding: 1.2rem 3rem;
  position: relative;
  text-transform: uppercase;
}
.btn-52 .original {
  background: #fff;
  color: #000;
  display: grid;
  inset: 0;
  place-content: center;
  position: absolute;
  transition: transform 0.2s;
}
.btn-52._ACTIVE .original {
  transform: translateY(100%);
}
.btn-52 .letters {
  display: inline-flex;
}
.btn-52 span {
  opacity: 0;
  transform: translateY(-15px);
  transition: transform 0.2s, opacity 0.2s;
}
.btn-52._ACTIVE span {
  opacity: 1;
  transform: translateY(0);
}
.btn-52._ACTIVE span:nth-child(2) {
  transition-delay: 0.1s;
}
.btn-52._ACTIVE span:nth-child(3) {
  transition-delay: 0.2s;
}
.btn-52._ACTIVE span:nth-child(4) {
  transition-delay: 0.3s;
}
.btn-52._ACTIVE span:nth-child(5) {
  transition-delay: 0.4s;
}
.btn-52._ACTIVE span:nth-child(6) {
  transition-delay: 0.5s;
}

.btn-86,
.btn-86 *,
.btn-86 :after,
.btn-86 :before,
.btn-86:after,
.btn-86:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-86 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}
.btn-86:disabled {
  cursor: default;
}
.btn-86:-moz-focusring {
  outline: auto;
}
.btn-86 svg {
  display: block;
  vertical-align: middle;
}
.btn-86 [hidden] {
  display: none;
}
.btn-86 {
  border: 1px solid;
  border-radius: 999px;
  box-sizing: border-box;
  display: grid;
  display: block;
  font-weight: 700;
  overflow: hidden;
  padding: 1.2rem 3rem;
  place-items: center;
  position: relative;
  text-transform: uppercase;
}
.btn-86 .fallback {
  display: none;
}
.btn-86 .letters {
  display: flex;
}
.btn-86 span {
  mix-blend-mode: difference;
  position: relative;
}
.btn-86 span:first-child,
.btn-86 span:nth-child(6) {
  --mov: 0;
  --rot: 1;
}
.btn-86 span:nth-child(2),
.btn-86 span:nth-child(5) {
  --mov: 1/3;
  --rot: 2/3;
}
.btn-86 span:nth-child(3),
.btn-86 span:nth-child(4) {
  --mov: 2/3;
  --rot: 1/3;
}
.btn-86._ACTIVE span {
  -webkit-animation: dance 0.7s linear 0.18s forwards;
  animation: dance 0.7s linear 0.18s forwards;
}
@-webkit-keyframes dance {
  30%,
  36% {
    transform: translateY(calc(-6px * var(--mov))) translateZ(0)
      rotate(calc(-13deg * var(--rot)));
  }
  50% {
    transform: translateY(calc(3px * var(--mov))) translateZ(0)
      rotate(calc(6deg * var(--rot)));
  }
  70% {
    transform: translateY(calc(-2px * var(--mov))) translateZ(0)
      rotate(calc(-3deg * var(--rot)));
  }
}
@keyframes dance {
  30%,
  36% {
    transform: translateY(calc(-6px * var(--mov))) translateZ(0)
      rotate(calc(-13deg * var(--rot)));
  }
  50% {
    transform: translateY(calc(3px * var(--mov))) translateZ(0)
      rotate(calc(6deg * var(--rot)));
  }
  70% {
    transform: translateY(calc(-2px * var(--mov))) translateZ(0)
      rotate(calc(-3deg * var(--rot)));
  }
}
.btn-86:after,
.btn-86:before {
  background: #000;
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 100%;
  transition: transform 0.2s cubic-bezier(0.76, 0, 0.24, 1);
  width: 100%;
  will-change: transform;
  z-index: -1;
}
.btn-86._ACTIVE:after,
.btn-86._ACTIVE:before {
  transform: translateY(-100%);
}
.btn-86:after {
  background: #fff;
  transition-delay: 0.13s;
}

.btn-36,
.btn-36 *,
.btn-36 :after,
.btn-36 :before,
.btn-36:after,
.btn-36:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-36 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}
.btn-36:disabled {
  cursor: default;
}
.btn-36:-moz-focusring {
  outline: auto;
}
.btn-36 svg {
  display: block;
  vertical-align: middle;
}
.btn-36 [hidden] {
  display: none;
}
.btn-36 {
  border: 1px solid;
  box-sizing: border-box;
  display: block;
  overflow: hidden;
  padding: 1.1rem 4rem;
  position: relative;
  text-transform: uppercase;
}
.btn-36 .new,
.btn-36 .old span {
  font-weight: 900;
  transition: transform 0.2s;
}
.btn-36 .new {
  display: block;
  transform: scale(0);
}
.btn-36._ACTIVE .new {
  transform: scale(1);
}
.btn-36 .old,
.btn-36 .old span {
  inset: 0;
  position: absolute;
}
.btn-36 .old span {
  background: #fff;
  color: #000;
  display: block;
  display: grid;
  place-items: center;
}
.btn-36 .old span:first-child {
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 50%);
}
.btn-36 .old span:nth-child(2) {
  -webkit-clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
  clip-path: polygon(0 50%, 100% 50%, 100% 100%, 0 100%);
}
.btn-36._ACTIVE .old span:first-child {
  transform: translateY(-50%);
}
.btn-36._ACTIVE .old span:nth-child(2) {
  transform: translateY(50%);
}

.btn-26,
.btn-26 *,
.btn-26 :after,
.btn-26 :before,
.btn-26:after,
.btn-26:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-26 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
  text-transform: uppercase;
}
.btn-26:disabled {
  cursor: default;
}
.btn-26:-moz-focusring {
  outline: auto;
}
.btn-26 svg {
  display: block;
  vertical-align: middle;
}
.btn-26 [hidden] {
  display: none;
}
.btn-26 {
  background: none;
  -webkit-mask-image: none;
  padding: 1rem 3rem;
  position: relative;
  z-index: 1;
}
.btn-26 span {
  mix-blend-mode: difference;
}
.btn-26:after,
.btn-26:before {
  --progress: 0%;
  background: #fff;
  -webkit-clip-path: polygon(
    0 50%,
    var(--progress) 0,
    100% 0,
    calc(100% - var(--progress)) 50%,
    100% 100%,
    var(--progress) 100%
  );
  clip-path: polygon(
    0 50%,
    var(--progress) 0,
    100% 0,
    calc(100% - var(--progress)) 50%,
    100% 100%,
    var(--progress) 100%
  );
  content: "";
  height: 100%;
  left: 0;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  transition: height 0.4s, transform 0.4s, -webkit-clip-path 0.4s 0.1s;
  transition: height 0.4s, transform 0.4s, clip-path 0.4s 0.1s;
  transition: height 0.4s, transform 0.4s, clip-path 0.4s 0.1s,
    -webkit-clip-path 0.4s 0.1s;
  width: 100%;
  z-index: -1;
}
.btn-26:after {
  transform: rotate(180deg) translateY(50%);
}
.btn-26._ACTIVE:before {
  --progress: 50%;
  top: 50%;
  transform: translateY(-50%) translateX(35%);
}
.btn-26._ACTIVE:after {
  --progress: 50%;
  top: 50%;
  transform: rotate(180deg) translateY(50%) translateX(35%);
}

.btn-54,
.btn-54 *,
.btn-54 :after,
.btn-54 :before,
.btn-54:after,
.btn-54:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-54 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}
.btn-54:disabled {
  cursor: default;
}
.btn-54:-moz-focusring {
  outline: auto;
}
.btn-54 svg {
  display: block;
  vertical-align: middle;
}
.btn-54 [hidden] {
  display: none;
}
.btn-54 {
  box-sizing: border-box;
  display: block;
  font-weight: 900;
  padding: 1.8rem 5rem;
  position: relative;
  text-transform: uppercase;
  background: none;
}
.btn-54 .content,
.btn-54 .depth,
.btn-54 .shadow {
  transition: transform 0.2s;
}
.btn-54 .content {
  background: #fff;
  color: #000;
  display: grid;
  height: 84%;
  left: 0;
  place-items: center;
  position: absolute;
  top: 0;
  width: 100%;
}
.btn-54 .depth {
  background: #ccc;
  height: 10%;
  top: 84%;
}
.btn-54 .depth,
.btn-54 .shadow {
  display: block;
  left: 0;
  position: absolute;
  width: 100%;
}
.btn-54 .shadow {
  background: #777;
  height: 6%;
  top: 94%;
}
.btn-54._ACTIVE .content {
  transform: translateY(4%);
}
.btn-54._ACTIVE .shadow {
  transform: translateY(-20%);
}
.btn-54:active .content {
  transform: translateY(8%);
}
.btn-54:active .shadow {
  transform: translateY(-30%);
}

.btn-51,
.btn-51 *,
.btn-51 :after,
.btn-51 :before,
.btn-51:after,
.btn-51:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-51 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}
.btn-51:disabled {
  cursor: default;
}
.btn-51:-moz-focusring {
  outline: auto;
}
.btn-51 svg {
  display: block;
  vertical-align: middle;
}
.btn-51 [hidden] {
  display: none;
}
.btn-51 {
  --progress: 15px;
  background: #fff;
  bottom: var(--progress);
  box-sizing: border-box;
  color: #000;
  display: block;
  font-weight: 900;
  -webkit-mask-image: none;
  padding: 1.2rem 3rem;
  perspective: 800px;
  position: relative;
  text-transform: uppercase;
  transform: rotateX(55deg) rotate(25deg);
  transform-style: preserve-3d;
  transition: bottom 0.2s;
}
.btn-51:after,
.btn-51:before {
  content: "";
  display: block;
  position: absolute;
  transform-origin: 0 0;
}
.btn-51:before {
  background: #eee;
  height: var(--progress);
  left: 0;
  top: 100%;
  transform: rotateX(-90deg);
  transition: height 0.2s;
  width: 100%;
}
.btn-51:after {
  background: #ccc;
  height: 100%;
  left: 100%;
  top: 0;
  transform: rotateY(90deg);
  transition: width 0.2s;
  width: var(--progress);
}
.btn-51:active {
  --progress: 0px;
}

.btn-35,
.btn-35 *,
.btn-35 :after,
.btn-35 :before,
.btn-35:after,
.btn-35:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-35 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}
.btn-35:disabled {
  cursor: default;
}
.btn-35:-moz-focusring {
  outline: auto;
}
.btn-35 svg {
  display: block;
  vertical-align: middle;
}
.btn-35 [hidden] {
  display: none;
}
.btn-35 {
  --height: 4rem;
  border: 1px solid;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  height: var(--height);
  overflow: hidden;
  padding: 0 3rem;
  position: relative;
  text-transform: uppercase;
}
.btn-35 span {
  font-weight: 900;
  mix-blend-mode: difference;
}
.btn-35:before {
  --middle: calc(var(--height) / 2);
  background: #fff;
  content: "";
  height: 100%;
  left: calc(var(--height) * -1);
  position: absolute;
  top: 0;
  transform: rotate(-90deg);
  transform-origin: var(--middle) var(--middle);
  transition: transform 0.3s;
  width: calc(100% + var(--height));
  z-index: -1;
}
.btn-35._ACTIVE:before {
  transform: rotate(0deg);
}

.btn-31,
.btn-31 *,
.btn-31 :after,
.btn-31 :before,
.btn-31:after,
.btn-31:before {
  border: 0 solid;
  box-sizing: border-box;
}
.btn-31 {
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: button;
  background-color: #000;
  background-image: none;
  color: #fff;
  cursor: pointer;
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, sans-serif,
    Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
  font-size: 100%;
  font-weight: 900;
  line-height: 1.5;
  margin: 0;
  -webkit-mask-image: -webkit-radial-gradient(#000, #fff);
  padding: 0;
}
.btn-31:disabled {
  cursor: default;
}
.btn-31:-moz-focusring {
  outline: auto;
}
.btn-31 svg {
  display: block;
  vertical-align: middle;
}
.btn-31 [hidden] {
  display: none;
}
.btn-31 {
  border-width: 1px;
  padding: 1rem 2rem;
  position: relative;
  text-transform: uppercase;
}
.btn-31:before {
  --progress: 100%;
  background: #fff;
  -webkit-clip-path: polygon(
    100% 0,
    var(--progress) var(--progress),
    0 100%,
    100% 100%
  );
  clip-path: polygon(
    100% 0,
    var(--progress) var(--progress),
    0 100%,
    100% 100%
  );
  content: "";
  inset: 0;
  position: absolute;
  transition: -webkit-clip-path 0.2s ease;
  transition: clip-path 0.2s ease;
  transition: clip-path 0.2s ease, -webkit-clip-path 0.2s ease;
}
.btn-31._ACTIVE:before {
  --progress: 0%;
}
.btn-31 .text-container {
  display: block;
  overflow: hidden;
  position: relative;
}
.btn-31 .text {
  display: block;
  font-weight: 900;
  mix-blend-mode: difference;
  position: relative;
}
.btn-31._ACTIVE .text {
  -webkit-animation: move-up-alternate 0.3s ease forwards;
  animation: move-up-alternate 0.3s ease forwards;
}
@-webkit-keyframes move-up-alternate {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(80%);
  }
  51% {
    transform: translateY(-80%);
  }
  to {
    transform: translateY(0);
  }
}
@keyframes move-up-alternate {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(80%);
  }
  51% {
    transform: translateY(-80%);
  }
  to {
    transform: translateY(0);
  }
}


/* ---- Presentation ---- */

html {
  height: 100%;
}

body, height {
  margin: 0;
}

body {
  min-height: 100%;
  overflow-x: hidden;
}

#container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  
  margin: 0 auto;
  margin-top: 50px;
  
  width: 100%;
  height: 100%;
}

#container > div {
  display: grid;
  place-items: center;
  
  padding: 40px 0;
  border-radius: 20px;
  cursor: pointer;
  
  margin: -10px -20px;
  overflow: hidden;
  
  width: 250px;
  
  transform: scale(0.75);
}

#container > div:nth-child(even) {
  background-color: #f97316;
}

#container > div:nth-child(odd) {
  background-color: #fed7aa;
}

#container > div:hover {
  position: relative;
  transform: scale(0.76);
}


#source-link {
  top: 10px;
}

#source-link > i {
  color: #fff;
}

.meta-link {
  color: #fff;
  font-family: "Anek Latin", sans-serif;
  font-size: 14px;
  font-weight: 500;
  align-items: center;
  background-color: #f97316;
  border: 2px solid black;
  border-radius: 6px;
  cursor: pointer;  
  display: inline-flex;
  gap: 5px;
  left: 10px;
  align-items: center;
  padding: 7px 20px;
  position: fixed;
  text-decoration: none;
  z-index: 10000;
}


.meta-link > i, .meta-link > span {
  height: 15px;
  line-height: 15px;
}
.feedback-box{

border:3px solid #000;
width: 40%;
margin: auto;
margin-bottom: 30px;
background-color:#9FE2BF;

padding-bottom: 20px;


}