:root {
  --font-size-root: 16px !important;
  --font-family-base: sans-serif;
  --line-height-base: 1.2;
}
html {
  font-size: var(--font-family-base);
  scroll-behavior: smooth;
}
body {
  margin: 0;
  padding: 0;
  background-color: black;
  font-family: var(--font-family-base);
  line-height: var(--line-height-base);
}
.hero {
  display: flex;
  overflow: hidden;
  align-items: center;
  justify-content: center;
  width: 100svw;
  height: 100svh;
}
.logo {
  position: relative;
  width: 75vw;
}
.logo-svg {
  display: block;
  fill: #fff;
}
.logo:hover .logo-svg {
  animation: glitch 4s;
}
.glitch {
  animation: glitch 4s 2s;
}
@keyframes glitch {
  1% {
    filter: drop-shadow(3px 0 0 cyan) drop-shadow(-3px 0 0 magenta);
    transform: rotateX(10deg) skewX(90deg);
  }
  2% {
    filter: drop-shadow(5px 0 0 cyan) drop-shadow(-5px 0 0 magenta);
    transform: rotateX(-10deg) skewX(-45deg);
  }
  3% {
    filter: none;
    transform: rotateX(0deg) skewX(0deg);
  }
}
/*# sourceMappingURL=./style.css.map */