*, :after, :before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  --color-text: #fff;
  --color-bg: #fff;
  --color-link: #4b4b4b;
  --color-link-hover: #fff;
}

.js .loading:before, .js .loading:after {
  content: "";
  z-index: 1000;
  position: fixed;
}

.js .loading:before {
  background: var(--color-bg);
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}

.js .loading:after {
  opacity: .4;
  background: var(--color-link);
  border-radius: 50%;
  width: 60px;
  height: 60px;
  margin: -30px 0 0 -30px;
  animation: .7s linear infinite alternate forwards loaderAnim;
  top: 50%;
  left: 50%;
}

@keyframes loaderAnim {
  to {
    opacity: 1;
    transform: scale3d(.5, .5, 1);
  }
}

.js-image {
  max-width: 100%;
  display: block;
}

.loaded .js-image {
  opacity: 0;
}

canvas {
  z-index: -1;
  pointer-events: none;
  display: inline-block;
  position: fixed;
  top: 0;
  left: 0;
}

/*# sourceMappingURL=step1.66daa216.css.map */