body {
  margin: 0;
  background-color: #181C21;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh; }

/*Glitch logo*/
#glitchLogo_menu {
  background-image: url("./assets/logo_white.png");
  background-position: 0px;
  transition: clip-path 0.1s ease-in-out;
  width: 140px;
  height: 127px;
  background-repeat: no-repeat;
  background-size: contain;
  display: block; }

@font-face {
  font-family: Gilroy;
  font-weight: bold;
  src: url("./assets/font/Gilroy-Bold.otf") format("opentype"); }
.glitch {
  font-family: Gilroy;
  text-transform: lowercase;
  font-size: 3em;
  cursor: pointer;
  color: #E7E9E6;
  position: relative;
  opacity: 1;
  animation-timing-function: step-end !important; }
  .glitch.active, .glitch:hover {
    animation-name: main-animation; }
    .glitch.active::before, .glitch.active::after, .glitch:hover::before, .glitch:hover::after {
      opacity: 1; }
    .glitch.active::before, .glitch:hover::before {
      animation-name: glitch-animation-logo-1; }
    .glitch.active::after, .glitch:hover::after {
      animation-name: glitch-animation-logo-2; }
  .glitch:hover, .glitch:hover::before, .glitch:hover::after {
    animation-iteration-count: infinite; }
  .glitch, .glitch::before, .glitch::after {
    animation-duration: 0.5s;
    animation-timing-function: linear;
    animation-delay: 0s;
    animation-iteration-count: 1;
    animation-direction: alternate-reverse; }
  .glitch.dark::before, .glitch.dark::after {
    background-image: url("./assets/logo_dark.png"); }
  .glitch::before, .glitch::after {
    position: absolute;
    top: 0;
    left: 0;
    content: '';
    opacity: 0;
    background-image: url("./assets/logo_white.png");
    background-size: contain;
    background-repeat: no-repeat;
    color: #E7E9E6;
    width: 100%;
    height: 100%;
    box-shadow: 0px 0 #ff0000;
    mix-blend-mode: exclusion; }
@keyframes glitch-animation-logo-1 {
  0% {
    left: 9px;
    transform: skewX(45deg);
    clip: rect(55px, 500px, 63px, 0px);
    filter: sepia(1) hue-rotate(258deg) saturate(10);
    box-shadow: 36px 0 #00ff00; }
  5% {
    left: 47px;
    transform: skewX(-45deg);
    clip: rect(73px, 500px, 78px, 0px);
    filter: sepia(1) hue-rotate(142deg) saturate(10);
    box-shadow: 32px 0 #00ff00; }
  10% {
    left: 46px;
    transform: skewX(-45deg);
    clip: rect(54px, 500px, 62px, 0px);
    filter: sepia(1) hue-rotate(180deg) saturate(10);
    box-shadow: 39px 0 #0000ff; }
  15% {
    left: 27px;
    transform: skewX(45deg);
    clip: rect(12px, 500px, 16px, 0px);
    filter: sepia(1) hue-rotate(145deg) saturate(10);
    box-shadow: 35px 0 #0000ff; }
  20% {
    left: 28px;
    transform: skewX(-45deg);
    clip: rect(8px, 500px, 16px, 0px);
    filter: sepia(1) hue-rotate(100deg) saturate(10);
    box-shadow: 48px 0 #0000ff; }
  25% {
    left: 28px;
    transform: skewX(45deg);
    clip: rect(2px, 500px, 7px, 0px);
    filter: sepia(1) hue-rotate(347deg) saturate(10);
    box-shadow: 50px 0 #0000ff; }
  30% {
    left: 49px;
    transform: skewX(-45deg);
    clip: rect(17px, 500px, 19px, 0px);
    filter: sepia(1) hue-rotate(211deg) saturate(10);
    box-shadow: 41px 0 #0000ff; }
  35% {
    left: 41px;
    transform: skewX(45deg);
    clip: rect(94px, 500px, 100px, 0px);
    filter: sepia(1) hue-rotate(310deg) saturate(10);
    box-shadow: 38px 0 #0000ff; }
  40% {
    left: 37px;
    transform: skewX(-45deg);
    clip: rect(94px, 500px, 101px, 0px);
    filter: sepia(1) hue-rotate(167deg) saturate(10);
    box-shadow: 49px 0 #0000ff; }
  45% {
    left: 38px;
    transform: skewX(45deg);
    clip: rect(28px, 500px, 35px, 0px);
    filter: sepia(1) hue-rotate(188deg) saturate(10);
    box-shadow: 39px 0 #00ff00; }
  50% {
    left: 25px;
    transform: skewX(45deg);
    clip: rect(89px, 500px, 95px, 0px);
    filter: sepia(1) hue-rotate(12deg) saturate(10);
    box-shadow: 50px 0 #00ff00; }
  55% {
    left: 42px;
    transform: skewX(45deg);
    clip: rect(94px, 500px, 102px, 0px);
    filter: sepia(1) hue-rotate(69deg) saturate(10);
    box-shadow: 35px 0 #ff0000; }
  60% {
    left: 26px;
    transform: skewX(45deg);
    clip: rect(26px, 500px, 29px, 0px);
    filter: sepia(1) hue-rotate(175deg) saturate(10);
    box-shadow: 43px 0 #0000ff; }
  65% {
    left: 19px;
    transform: skewX(45deg);
    clip: rect(79px, 500px, 86px, 0px);
    filter: sepia(1) hue-rotate(266deg) saturate(10);
    box-shadow: 44px 0 #ff0000; }
  70% {
    left: 21px;
    transform: skewX(45deg);
    clip: rect(59px, 500px, 66px, 0px);
    filter: sepia(1) hue-rotate(191deg) saturate(10);
    box-shadow: 41px 0 #ff0000; }
  75% {
    left: 15px;
    transform: skewX(-45deg);
    clip: rect(85px, 500px, 92px, 0px);
    filter: sepia(1) hue-rotate(187deg) saturate(10);
    box-shadow: 49px 0 #0000ff; }
  80% {
    left: 5px;
    transform: skewX(-45deg);
    clip: rect(45px, 500px, 46px, 0px);
    filter: sepia(1) hue-rotate(145deg) saturate(10);
    box-shadow: 41px 0 #00ff00; }
  85% {
    left: 34px;
    transform: skewX(-45deg);
    clip: rect(97px, 500px, 105px, 0px);
    filter: sepia(1) hue-rotate(106deg) saturate(10);
    box-shadow: 35px 0 #0000ff; }
  90% {
    left: 26px;
    transform: skewX(-45deg);
    clip: rect(44px, 500px, 49px, 0px);
    filter: sepia(1) hue-rotate(270deg) saturate(10);
    box-shadow: 32px 0 #0000ff; }
  95% {
    left: 12px;
    transform: skewX(45deg);
    clip: rect(25px, 500px, 26px, 0px);
    filter: sepia(1) hue-rotate(213deg) saturate(10);
    box-shadow: 43px 0 #ff0000; }
  100% {
    left: 1px;
    transform: skewX(45deg);
    clip: rect(44px, 500px, 48px, 0px);
    filter: sepia(1) hue-rotate(337deg) saturate(10);
    box-shadow: 34px 0 #00ff00; } }
@keyframes glitch-animation-logo-2 {
  0% {
    left: -12px;
    transform: skewX(-45deg);
    clip: rect(11px, 500px, 19px, 0px);
    filter: sepia(1) hue-rotate(333deg) saturate(10);
    box-shadow: -20px 0 #00ff00; }
  5% {
    left: -15px;
    transform: skewX(45deg);
    clip: rect(42px, 500px, 48px, 0px);
    filter: sepia(1) hue-rotate(27deg) saturate(10);
    box-shadow: -12px 0 #0000ff; }
  10% {
    left: -22px;
    transform: skewX(45deg);
    clip: rect(25px, 500px, 32px, 0px);
    filter: sepia(1) hue-rotate(26deg) saturate(10);
    box-shadow: -15px 0 #00ff00; }
  15% {
    left: -8px;
    transform: skewX(-45deg);
    clip: rect(72px, 500px, 74px, 0px);
    filter: sepia(1) hue-rotate(30deg) saturate(10);
    box-shadow: -27px 0 #00ff00; }
  20% {
    left: -12px;
    transform: skewX(-45deg);
    clip: rect(16px, 500px, 20px, 0px);
    filter: sepia(1) hue-rotate(344deg) saturate(10);
    box-shadow: -21px 0 #00ff00; }
  25% {
    left: -8px;
    transform: skewX(45deg);
    clip: rect(10px, 500px, 12px, 0px);
    filter: sepia(1) hue-rotate(247deg) saturate(10);
    box-shadow: -18px 0 #00ff00; }
  30% {
    left: -33px;
    transform: skewX(-45deg);
    clip: rect(40px, 500px, 44px, 0px);
    filter: sepia(1) hue-rotate(278deg) saturate(10);
    box-shadow: -20px 0 #ff0000; }
  35% {
    left: -36px;
    transform: skewX(-45deg);
    clip: rect(75px, 500px, 83px, 0px);
    filter: sepia(1) hue-rotate(23deg) saturate(10);
    box-shadow: -18px 0 #ff0000; }
  40% {
    left: -42px;
    transform: skewX(45deg);
    clip: rect(12px, 500px, 16px, 0px);
    filter: sepia(1) hue-rotate(201deg) saturate(10);
    box-shadow: -11px 0 #0000ff; }
  45% {
    left: -23px;
    transform: skewX(45deg);
    clip: rect(11px, 500px, 13px, 0px);
    filter: sepia(1) hue-rotate(98deg) saturate(10);
    box-shadow: -19px 0 #ff0000; }
  50% {
    left: -48px;
    transform: skewX(45deg);
    clip: rect(52px, 500px, 53px, 0px);
    filter: sepia(1) hue-rotate(346deg) saturate(10);
    box-shadow: -28px 0 #0000ff; }
  55% {
    left: -30px;
    transform: skewX(45deg);
    clip: rect(50px, 500px, 58px, 0px);
    filter: sepia(1) hue-rotate(78deg) saturate(10);
    box-shadow: -27px 0 #0000ff; }
  60% {
    left: -46px;
    transform: skewX(45deg);
    clip: rect(36px, 500px, 42px, 0px);
    filter: sepia(1) hue-rotate(230deg) saturate(10);
    box-shadow: -10px 0 #00ff00; }
  65% {
    left: -42px;
    transform: skewX(-45deg);
    clip: rect(24px, 500px, 26px, 0px);
    filter: sepia(1) hue-rotate(253deg) saturate(10);
    box-shadow: -26px 0 #ff0000; }
  70% {
    left: -5px;
    transform: skewX(-45deg);
    clip: rect(52px, 500px, 59px, 0px);
    filter: sepia(1) hue-rotate(27deg) saturate(10);
    box-shadow: -20px 0 #00ff00; }
  75% {
    left: -4px;
    transform: skewX(-45deg);
    clip: rect(40px, 500px, 41px, 0px);
    filter: sepia(1) hue-rotate(135deg) saturate(10);
    box-shadow: -28px 0 #ff0000; }
  80% {
    left: -1px;
    transform: skewX(-45deg);
    clip: rect(42px, 500px, 43px, 0px);
    filter: sepia(1) hue-rotate(26deg) saturate(10);
    box-shadow: -10px 0 #ff0000; }
  85% {
    left: -13px;
    transform: skewX(-45deg);
    clip: rect(48px, 500px, 51px, 0px);
    filter: sepia(1) hue-rotate(155deg) saturate(10);
    box-shadow: -25px 0 #ff0000; }
  90% {
    left: -45px;
    transform: skewX(45deg);
    clip: rect(21px, 500px, 22px, 0px);
    filter: sepia(1) hue-rotate(47deg) saturate(10);
    box-shadow: -22px 0 #0000ff; }
  95% {
    left: -34px;
    transform: skewX(-45deg);
    clip: rect(35px, 500px, 42px, 0px);
    filter: sepia(1) hue-rotate(86deg) saturate(10);
    box-shadow: -14px 0 #ff0000; }
  100% {
    left: -15px;
    transform: skewX(45deg);
    clip: rect(40px, 500px, 48px, 0px);
    filter: sepia(1) hue-rotate(42deg) saturate(10);
    box-shadow: -13px 0 #ff0000; } }
@keyframes main-animation {
  0% {
    opacity: 0; }
  5% {
    opacity: 0; }
  10% {
    opacity: 1; }
  15% {
    opacity: 1; }
  20% {
    opacity: 1; }
  25% {
    opacity: 0; }
  30% {
    opacity: 0; }
  35% {
    opacity: 0; }
  40% {
    opacity: 1; }
  45% {
    opacity: 1; }
  50% {
    opacity: 0; }
  55% {
    opacity: 0; }
  60% {
    opacity: 1; }
  65% {
    opacity: 0; }
  70% {
    opacity: 0; }
  75% {
    opacity: 1; }
  80% {
    opacity: 1; }
  85% {
    opacity: 0; }
  90% {
    opacity: 0; }
  95% {
    opacity: 1; }
  100% {
    opacity: 1; } }

/*# sourceMappingURL=sheet.css.map */
