.eye {
  width: 150px;
  height: 150px;
  top: calc(50% - 75px);
  left: calc(50% - 75px);
  background-color: #ffefe2;
  box-shadow: inset 0 0 60px 0 rgba(0, 0, 0, 0.5);
  border-radius: 100%;
  position: absolute;
  perspective: 500px;
  overflow: hidden;
  opacity: 50%;
}
.eye .iris {
  width: 100%;
  height: 100%;
  top: 0%;
  left: 0%;
  position: absolute;
  transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(0.6);
  background: radial-gradient(ellipse at center, #000000 13%, #dfe9ce 15%, #e1e9ce 15%, #dfe0b1 25%, #c0e585 44%, #a8c761 51%, #fffcf9 53%, rgba(255, 252, 249, 0.4) 56%, transparent 71%);
  border-radius: 100%;
  opacity: 50%;
}
.eye .iris.anim {
  -webkit-animation-duration: 10s;
          animation-duration: 10s;
  -webkit-animation-iteration-count: infinite;
          animation-iteration-count: infinite;
  -webkit-animation-name: iris;
          animation-name: iris;
}

@-webkit-keyframes iris {
  0%, 100% {
    transform: rotateX(-10deg) rotateY(15deg) translateZ(68px) scale(0.6);
  }
  10% {
    transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(0.6);
  }
  30% {
    transform: rotateX(-30deg) rotateY(-5deg) translateZ(68px) scale(0.6);
  }
  45% {
    transform: rotateX(-20deg) rotateY(-15deg) translateZ(68px) scale(0.6);
  }
  55%, 60% {
    transform: rotateX(0deg) rotateY(0deg) translateZ(68px) scale(0.6);
  }
  90% {
    transform: rotateX(30deg) rotateY(5deg) translateZ(68px) scale(0.6);
  }
}

@keyframes iris {
  0%, 100% {
    transform: rotateX(-10deg) rotateY(15deg) translateZ(68px) scale(0.6);
  }
  10% {
    transform: rotateX(-50deg) rotateY(15deg) translateZ(68px) scale(0.6);
  }
  30% {
    transform: rotateX(-30deg) rotateY(-5deg) translateZ(68px) scale(0.6);
  }
  45% {
    transform: rotateX(-20deg) rotateY(-15deg) translateZ(68px) scale(0.6);
  }
  55%, 60% {
    transform: rotateX(0deg) rotateY(0deg) translateZ(68px) scale(0.6);
  }
  90% {
    transform: rotateX(30deg) rotateY(5deg) translateZ(68px) scale(0.6);
  }
}

/* background grid */

.grid {
  position: relative;
  background-image: linear-gradient(45deg, #D2D2D2 0, #D2D2D2 25%, transparent 25%, transparent 75%, #D2D2D2 75%), linear-gradient(45deg, #D2D2D2 0, #D2D2D2 25%, transparent 25%, transparent 75%, #D2D2D2 75%), linear-gradient(#BFBFBF 0, #BFBFBF 100%);
  background-repeat: repeat;
  background-size: 128px 128px, 128px 128px, 100% 100%;
  background-position: 0 0, 64px 64px, 0 0;
}
.grid::before, .grid::after {
  content: "";
  position: absolute;
  display: block;
  width: 100vw;
  height: 100vh;
  left: 0;
  top: 0;
  -webkit-animation: hide 10s linear infinite;
          animation: hide 10s linear infinite;
  will-change: opacity;
}
.grid::before {
  background: radial-gradient(15% 80% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 448px 0px/512px 512px, radial-gradient(15% 80% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 384px 0px/512px 512px, radial-gradient(15% 80% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 320px 0px/512px 512px, radial-gradient(15% 80% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 256px 0px/512px 512px, radial-gradient(15% 80% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 192px 0px/512px 512px, radial-gradient(15% 80% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 128px 0px/512px 512px, radial-gradient(15% 80% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 64px 0px/512px 512px, radial-gradient(15% 80% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 0px 0px/512px 512px, radial-gradient(15% 80% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 384px 64px/512px 512px, radial-gradient(15% 80% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 320px 64px/512px 512px, radial-gradient(15% 80% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 256px 64px/512px 512px, radial-gradient(15% 80% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 192px 64px/512px 512px, radial-gradient(15% 80% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 128px 64px/512px 512px, radial-gradient(15% 80% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 64px 64px/512px 512px, radial-gradient(15% 80% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 0px 64px/512px 512px, radial-gradient(15% 80% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat -64px 64px/512px 512px, radial-gradient(15% 80% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 320px 128px/512px 512px, radial-gradient(15% 80% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 256px 128px/512px 512px, radial-gradient(15% 80% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 192px 128px/512px 512px, radial-gradient(15% 80% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 128px 128px/512px 512px, radial-gradient(15% 80% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 64px 128px/512px 512px, radial-gradient(15% 80% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 0px 128px/512px 512px, radial-gradient(15% 80% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat -64px 128px/512px 512px, radial-gradient(15% 80% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat -128px 128px/512px 512px, radial-gradient(15% 80% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 256px 192px/512px 512px, radial-gradient(15% 80% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 192px 192px/512px 512px, radial-gradient(15% 80% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 128px 192px/512px 512px, radial-gradient(15% 80% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 64px 192px/512px 512px, radial-gradient(15% 80% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 0px 192px/512px 512px, radial-gradient(15% 80% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat -64px 192px/512px 512px, radial-gradient(15% 80% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat -128px 192px/512px 512px, radial-gradient(15% 80% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat -192px 192px/512px 512px, radial-gradient(15% 80% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 192px 256px/512px 512px, radial-gradient(15% 80% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 128px 256px/512px 512px, radial-gradient(15% 80% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 64px 256px/512px 512px, radial-gradient(15% 80% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 0px 256px/512px 512px, radial-gradient(15% 80% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat -64px 256px/512px 512px, radial-gradient(15% 80% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat -128px 256px/512px 512px, radial-gradient(15% 80% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat -192px 256px/512px 512px, radial-gradient(15% 80% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat -256px 256px/512px 512px, radial-gradient(15% 80% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 128px 320px/512px 512px, radial-gradient(15% 80% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 64px 320px/512px 512px, radial-gradient(15% 80% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 0px 320px/512px 512px, radial-gradient(15% 80% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat -64px 320px/512px 512px, radial-gradient(15% 80% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat -128px 320px/512px 512px, radial-gradient(15% 80% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat -192px 320px/512px 512px, radial-gradient(15% 80% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat -256px 320px/512px 512px, radial-gradient(15% 80% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat -320px 320px/512px 512px, radial-gradient(15% 80% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 64px 384px/512px 512px, radial-gradient(15% 80% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 0px 384px/512px 512px, radial-gradient(15% 80% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat -64px 384px/512px 512px, radial-gradient(15% 80% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat -128px 384px/512px 512px, radial-gradient(15% 80% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat -192px 384px/512px 512px, radial-gradient(15% 80% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat -256px 384px/512px 512px, radial-gradient(15% 80% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat -320px 384px/512px 512px, radial-gradient(15% 80% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat -384px 384px/512px 512px, radial-gradient(15% 80% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 0px 448px/512px 512px, radial-gradient(15% 80% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat -64px 448px/512px 512px, radial-gradient(15% 80% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat -128px 448px/512px 512px, radial-gradient(15% 80% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat -192px 448px/512px 512px, radial-gradient(15% 80% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat -256px 448px/512px 512px, radial-gradient(15% 80% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat -320px 448px/512px 512px, radial-gradient(15% 80% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat -384px 448px/512px 512px, radial-gradient(15% 80% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat -448px 448px/512px 512px;
}
.grid::after {
  background: radial-gradient(80% 15% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 448px 0px/512px 512px, radial-gradient(80% 15% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 384px 0px/512px 512px, radial-gradient(80% 15% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 320px 0px/512px 512px, radial-gradient(80% 15% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 256px 0px/512px 512px, radial-gradient(80% 15% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 192px 0px/512px 512px, radial-gradient(80% 15% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 128px 0px/512px 512px, radial-gradient(80% 15% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 64px 0px/512px 512px, radial-gradient(80% 15% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 0px 0px/512px 512px, radial-gradient(80% 15% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 384px 64px/512px 512px, radial-gradient(80% 15% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 320px 64px/512px 512px, radial-gradient(80% 15% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 256px 64px/512px 512px, radial-gradient(80% 15% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 192px 64px/512px 512px, radial-gradient(80% 15% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 128px 64px/512px 512px, radial-gradient(80% 15% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 64px 64px/512px 512px, radial-gradient(80% 15% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 0px 64px/512px 512px, radial-gradient(80% 15% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat -64px 64px/512px 512px, radial-gradient(80% 15% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 320px 128px/512px 512px, radial-gradient(80% 15% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 256px 128px/512px 512px, radial-gradient(80% 15% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 192px 128px/512px 512px, radial-gradient(80% 15% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 128px 128px/512px 512px, radial-gradient(80% 15% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 64px 128px/512px 512px, radial-gradient(80% 15% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 0px 128px/512px 512px, radial-gradient(80% 15% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat -64px 128px/512px 512px, radial-gradient(80% 15% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat -128px 128px/512px 512px, radial-gradient(80% 15% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 256px 192px/512px 512px, radial-gradient(80% 15% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 192px 192px/512px 512px, radial-gradient(80% 15% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 128px 192px/512px 512px, radial-gradient(80% 15% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 64px 192px/512px 512px, radial-gradient(80% 15% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 0px 192px/512px 512px, radial-gradient(80% 15% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat -64px 192px/512px 512px, radial-gradient(80% 15% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat -128px 192px/512px 512px, radial-gradient(80% 15% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat -192px 192px/512px 512px, radial-gradient(80% 15% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 192px 256px/512px 512px, radial-gradient(80% 15% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 128px 256px/512px 512px, radial-gradient(80% 15% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 64px 256px/512px 512px, radial-gradient(80% 15% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 0px 256px/512px 512px, radial-gradient(80% 15% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat -64px 256px/512px 512px, radial-gradient(80% 15% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat -128px 256px/512px 512px, radial-gradient(80% 15% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat -192px 256px/512px 512px, radial-gradient(80% 15% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat -256px 256px/512px 512px, radial-gradient(80% 15% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 128px 320px/512px 512px, radial-gradient(80% 15% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 64px 320px/512px 512px, radial-gradient(80% 15% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 0px 320px/512px 512px, radial-gradient(80% 15% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat -64px 320px/512px 512px, radial-gradient(80% 15% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat -128px 320px/512px 512px, radial-gradient(80% 15% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat -192px 320px/512px 512px, radial-gradient(80% 15% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat -256px 320px/512px 512px, radial-gradient(80% 15% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat -320px 320px/512px 512px, radial-gradient(80% 15% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 64px 384px/512px 512px, radial-gradient(80% 15% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat 0px 384px/512px 512px, radial-gradient(80% 15% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat -64px 384px/512px 512px, radial-gradient(80% 15% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat -128px 384px/512px 512px, radial-gradient(80% 15% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat -192px 384px/512px 512px, radial-gradient(80% 15% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat -256px 384px/512px 512px, radial-gradient(80% 15% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat -320px 384px/512px 512px, radial-gradient(80% 15% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat -384px 384px/512px 512px, radial-gradient(80% 15% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat 0px 448px/512px 512px, radial-gradient(80% 15% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat -64px 448px/512px 512px, radial-gradient(80% 15% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat -128px 448px/512px 512px, radial-gradient(80% 15% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat -192px 448px/512px 512px, radial-gradient(80% 15% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat -256px 448px/512px 512px, radial-gradient(80% 15% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat -320px 448px/512px 512px, radial-gradient(80% 15% at center, #a6a6a6 0%, #a6a6a6 3%, transparent 3%) repeat -384px 448px/512px 512px, radial-gradient(80% 15% at center, #ececec 0%, #ececec 3%, transparent 3%) repeat -448px 448px/512px 512px;
}

@-webkit-keyframes hide {
  0%, 20%, 80%, 100% {
    opacity: 0;
  }
  30%, 70% {
    opacity: 1;
  }
}

@keyframes hide {
  0%, 20%, 80%, 100% {
    opacity: 0;
  }
  30%, 70% {
    opacity: 1;
  }
}