:root {
  --shimmy-distance: 6;
  --primary-hue: 0;
  --primary-lightness: 50;
  --color: #fff;
  --black: #0d0d0d;
  --font-size: 19px;
  --label-size: 11px;
  --shadow-primary-hue: 180;
  --shadow-secondary-hue: 60
}
@font-face {
  font-family: Cyber;
  src: url("../assets/fonts/Blender-Pro-Bold.otf");
  font-display: swap
}
.cybr-btn {
  --primary: hsl(var(--primary-hue), 85%, calc(var(--primary-lightness, 50) * 1%));
  --shadow-primary: hsl(var(--shadow-primary-hue), 90%, 50%);
  --shadow-primary-alpha: hsla(var(--shadow-primary-hue), 90%, 50%, 0.5);
  --shadow-secondary: hsl(var(--shadow-secondary-hue), 90%, 60%);
  font-family: Cyber,sans-serif;
  position: relative;
  text-transform: uppercase;
  background: linear-gradient(#f79100 0 0) left/var(--p,0) no-repeat;
  font-size: var(--font-size);
  outline: transparent;
  border: 0;
  min-width: auto;
  -webkit-clip-path: polygon(-10% -10%,110% -10%,110% 110%,10% 110%,-10% 40%);
  clip-path: polygon(-10% -10%,110% -10%,110% 110%,10% 110%,-10% 40%);
  margin: -30px 0 0 0;
  padding: 7px 36px;
  box-shadow: -5px 0 1px 0 inset var(--shadow-primary);
  transition: all .2s ease-out,background-position 0s;
  z-index: 20
}
.cybr-btn *,
.cybr-btn ::after {
  outline: transparent
}
.cybr-btn:hover .cybr-btn__glitch::after,
.cybr-btn:hover .cybr-btn__text::after {
  display: block
}
.cybr-btn:hover {
  --primary-lightness: 40;
  --p: 100%;
  background-position: right
}
.cybr-btn:active {
  --primary-lightness: 30
}
.cybr-btn__glitch {
  height: 100%;
  width: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  filter: drop-shadow(-2px 2px var(--shadow-primary)) drop-shadow(-1px -1px var(--shadow-primary-alpha)) drop-shadow(2px 2px var(--shadow-primary))
}
.cybr-btn__glitch::after,
.cybr-btn__glitch::before {
  display: none;
  background: var(--primary);
  -webkit-animation: shimmy-text 2s infinite alternate ease-in-out;
  animation: shimmy-text 2s infinite alternate ease-in-out;
  content: attr(data-text);
  height: 98%;
  width: 98%;
  position: absolute;
  top: 1%;
  left: 1%
}
.cybr-btn__text {
  color: var(--color);
  display: block;
  height: 100%;
  width: 100%;
  position: relative;
  z-index: 21;
  white-space: nowrap
}
.cybr-btn__text::before {
  content: attr(data-text)
}
.cybr-btn__text::after {
  display: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  color: var(--color);
  filter: brightness(1);
  -webkit-animation: shimmy-text 2s infinite alternate ease-in-out;
  animation: shimmy-text 2s infinite alternate ease-in-out;
  text-shadow: 2px 2px var(--shadow-primary),-2px -2px var(--shadow-secondary)
}
.cybr-btn::after {
  content: var(--cyber-subtext);
  position: absolute;
  padding: 10px;
  letter-spacing: 1px;
  padding: 1px 4px;
  line-height: 1;
  bottom: -15%;
  right: 5%;
  background: var(--shadow-secondary);
  color: var(--black);
  font-size: var(--label-size);
  box-shadow: 2px 0 1px 0 inset var(--shadow-primary)
}
.cybr-btn-navbar {
  background-color: var(--shadow-secondary)
}
@-webkit-keyframes shimmy-text {
  0% {
    -webkit-clip-path: inset(2% 0 95% 0);
    clip-path: inset(2% 0 95% 0) skew(0deg)
  }
  2%,
  8% {
    -webkit-clip-path: inset(78% 0 0 0);
    clip-path: inset(78% 0 0 0);
    transform: translate(calc(var(--shimmy-distance) * -1%),0) skew(0)
  }
  6% {
    -webkit-clip-path: inset(78% 0 0 0);
    clip-path: inset(78% 0 0 0);
    transform: translate(calc(var(--shimmy-distance) * 1%),0) skew(6deg)
  }
  9% {
    -webkit-clip-path: inset(78% 0 0 0);
    clip-path: inset(78% 0 0 0);
    transform: translate(0,0) skew(0)
  }
  10% {
    -webkit-clip-path: inset(44% 0 46% 0);
    clip-path: inset(44% 0 46% 0);
    transform: translate(calc(var(--shimmy-distance) * 1%),0) skew(0)
  }
  13% {
    -webkit-clip-path: inset(44% 0 46% 0);
    clip-path: inset(44% 0 46% 0);
    transform: translate(0,0) skew(0)
  }
  14%,
  21% {
    -webkit-clip-path: inset(0 0 100% 0);
    clip-path: inset(0 0 100% 0);
    transform: translate(calc(var(--shimmy-distance) * 1%),0) skew(0)
  }
  15%,
  20% {
    -webkit-clip-path: inset(40% 0 60% 0);
    clip-path: inset(40% 0 60% 0);
    transform: translate(calc(var(--shimmy-distance) * 1%),0) skew(5deg)
  }
  25% {
    -webkit-clip-path: inset(40% 0 15% 0);
    clip-path: inset(40% 0 15% 0);
    transform: translate(calc(var(--shimmy-distance) * 1%),0) skew(0)
  }
  30% {
    -webkit-clip-path: inset(40% 0 15% 0);
    clip-path: inset(40% 0 15% 0);
    transform: translate(calc(var(--shimmy-distance) * -1%),0) skew(0)
  }
  35%,
  45% {
    -webkit-clip-path: inset(63% 0 20% 0);
    clip-path: inset(63% 0 20% 0);
    transform: translate(calc(var(--shimmy-distance) * -1%)) skew(6deg)
  }
  40% {
    -webkit-clip-path: inset(63% 0 20% 0);
    clip-path: inset(63% 0 20% 0);
    transform: translate(calc(var(--shimmy-distance) * 1%)) skew(0)
  }
  50% {
    -webkit-clip-path: inset(63% 0 20% 0);
    clip-path: inset(63% 0 20% 0);
    transform: translate(0,0) skew(6deg)
  }
  55% {
    -webkit-clip-path: inset(0 0 90% 0);
    clip-path: inset(0 0 90% 0);
    transform: translate(calc(var(--shimmy-distance) * 1%),0) skew(5deg)
  }
  60% {
    -webkit-clip-path: inset(0 0 90% 0);
    clip-path: inset(0 0 90% 0);
    transform: translate(0,0) skew(-13deg)
  }
  100%,
  31%,
  61% {
    -webkit-clip-path: inset(0 0 100% 0);
    clip-path: inset(0 0 100% 0);
    transform: translate(-22px,5px) skew(21deg)
  }
}
@keyframes shimmy-text {
  0% {
    -webkit-clip-path: inset(2% 0 95% 0);
    clip-path: inset(2% 0 95% 0) skew(0deg)
  }
  2%,
  8% {
    -webkit-clip-path: inset(78% 0 0 0);
    clip-path: inset(78% 0 0 0);
    transform: translate(calc(var(--shimmy-distance) * -1%),0) skew(0)
  }
  6% {
    -webkit-clip-path: inset(78% 0 0 0);
    clip-path: inset(78% 0 0 0);
    transform: translate(calc(var(--shimmy-distance) * 1%),0) skew(6deg)
  }
  9% {
    -webkit-clip-path: inset(78% 0 0 0);
    clip-path: inset(78% 0 0 0);
    transform: translate(0,0) skew(0)
  }
  10% {
    -webkit-clip-path: inset(44% 0 46% 0);
    clip-path: inset(44% 0 46% 0);
    transform: translate(calc(var(--shimmy-distance) * 1%),0) skew(0)
  }
  13% {
    -webkit-clip-path: inset(44% 0 46% 0);
    clip-path: inset(44% 0 46% 0);
    transform: translate(0,0) skew(0)
  }
  14%,
  21% {
    -webkit-clip-path: inset(0 0 100% 0);
    clip-path: inset(0 0 100% 0);
    transform: translate(calc(var(--shimmy-distance) * 1%),0) skew(0)
  }
  15%,
  20% {
    -webkit-clip-path: inset(40% 0 60% 0);
    clip-path: inset(40% 0 60% 0);
    transform: translate(calc(var(--shimmy-distance) * 1%),0) skew(5deg)
  }
  25% {
    -webkit-clip-path: inset(40% 0 15% 0);
    clip-path: inset(40% 0 15% 0);
    transform: translate(calc(var(--shimmy-distance) * 1%),0) skew(0)
  }
  30% {
    -webkit-clip-path: inset(40% 0 15% 0);
    clip-path: inset(40% 0 15% 0);
    transform: translate(calc(var(--shimmy-distance) * -1%),0) skew(0)
  }
  35%,
  45% {
    -webkit-clip-path: inset(63% 0 20% 0);
    clip-path: inset(63% 0 20% 0);
    transform: translate(calc(var(--shimmy-distance) * -1%)) skew(6deg)
  }
  40% {
    -webkit-clip-path: inset(63% 0 20% 0);
    clip-path: inset(63% 0 20% 0);
    transform: translate(calc(var(--shimmy-distance) * 1%)) skew(0)
  }
  50% {
    -webkit-clip-path: inset(63% 0 20% 0);
    clip-path: inset(63% 0 20% 0);
    transform: translate(0,0) skew(6deg)
  }
  55% {
    -webkit-clip-path: inset(0 0 90% 0);
    clip-path: inset(0 0 90% 0);
    transform: translate(calc(var(--shimmy-distance) * 1%),0) skew(5deg)
  }
  60% {
    -webkit-clip-path: inset(0 0 90% 0);
    clip-path: inset(0 0 90% 0);
    transform: translate(0,0) skew(-13deg)
  }
  100%,
  31%,
  61% {
    -webkit-clip-path: inset(0 0 100% 0);
    clip-path: inset(0 0 100% 0);
    transform: translate(-22px,5px) skew(21deg)
  }
}
.cybr-btn__text:hover {
  content: attr(data-text);
  -webkit-animation: glitch 1s linear infinite;
  animation: glitch 1s linear infinite;
  width: 100%;
  height: 100%
}
.cybr-btn__text:hover:before {
  -webkit-animation: glitchTop 1s linear infinite;
  animation: glitchTop 1s linear infinite
}
.cybr-btn__text:hover:after {
  content: attr(data-text);
  -webkit-animation: glitchBotom 1.5s linear infinite;
  animation: glitchBotom 1.5s linear infinite
}
@keyframes glitch {
  2%,
  64% {
    transform: translate(2px,0) skew(0);
    clip-path: polygon(0 0,100% 0,100% 33%,0 33%);
    -webkit-clip-path: polygon(0 0,100% 0,100% 33%,0 33%)
  }
  4%,
  60% {
    transform: translate(-2px,0) skew(0)
  }
  62% {
    transform: translate(0,0) skew(5deg);
    clip-path: polygon(0 67%,100% 67%,100% 100%,0 100%);
    -webkit-clip-path: polygon(0 67%,100% 67%,100% 100%,0 100%)
  }
}
@keyframes glitchTop {
  2%,
  64% {
    transform: translate(2px,-2px);
    clip-path: polygon(0 0,100% 0,100% 33%,0 33%);
    -webkit-clip-path: polygon(0 0,100% 0,100% 33%,0 33%)
  }
  4%,
  60% {
    transform: translate(-2px,2px)
  }
  62% {
    transform: translate(13px,-1px) skew(-13deg);
    clip-path: polygon(0 67%,100% 67%,100% 100%,0 100%);
    -webkit-clip-path: polygon(0 67%,100% 67%,100% 100%,0 100%)
  }
}
@keyframes glitchBotom {
  2%,
  64% {
    transform: translate(-2px,0);
    clip-path: polygon(0 0,100% 0,100% 33%,0 33%);
    -webkit-clip-path: polygon(0 0,100% 0,100% 33%,0 33%)
  }
  4%,
  60% {
    transform: translate(-2px,0)
  }
  62% {
    transform: translate(-22px,5px) skew(21deg);
    clip-path: polygon(0 67%,100% 67%,100% 100%,0 100%);
    -webkit-clip-path: polygon(0 67%,100% 67%,100% 100%,0 100%)
  }
}
@-webkit-keyframes glitch {
  2%,
  64% {
    transform: translate(2px,0) skew(0);
    clip-path: polygon(0 0,100% 0,100% 33%,0 33%);
    -webkit-clip-path: polygon(0 0,100% 0,100% 33%,0 33%)
  }
  4%,
  60% {
    transform: translate(-2px,0) skew(0)
  }
  62% {
    transform: translate(0,0) skew(5deg);
    clip-path: polygon(0 67%,100% 67%,100% 100%,0 100%);
    -webkit-clip-path: polygon(0 67%,100% 67%,100% 100%,0 100%)
  }
}
@-webkit-keyframes glitchTop {
  2%,
  64% {
    transform: translate(2px,-2px);
    clip-path: polygon(0 0,100% 0,100% 33%,0 33%);
    -webkit-clip-path: polygon(0 0,100% 0,100% 33%,0 33%)
  }
  4%,
  60% {
    transform: translate(-2px,2px)
  }
  62% {
    transform: translate(13px,-1px) skew(-13deg);
    clip-path: polygon(0 67%,100% 67%,100% 100%,0 100%);
    -webkit-clip-path: polygon(0 67%,100% 67%,100% 100%,0 100%)
  }
}
@-webkit-keyframes glitchBotom {
  2%,
  64% {
    transform: translate(-2px,0)
  }
  4%,
  60% {
    transform: translate(-2px,0)
  }
  62% {
    transform: translate(-22px,5px) skew(21deg);
    clip-path: polygon(0 67%,100% 67%,100% 100%,0 100%);
    -webkit-clip-path: polygon(0 67%,100% 67%,100% 100%,0 100%)
  }
}