@import url("https://fonts.googleapis.com/css?family=Anton");
body {
  height: 100vh;
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  background: white;
}

.collection {
  font-family: "Anton", Sans-serif;
  color: #333333;
  display: inline-block;
  position: fixed;
  bottom: 15px;
  right: 15px;
  font-size: 18px;
  text-decoration: none;
  text-align: center;
  line-height: 0.9;
}
.collection::first-line {
  color: crimson;
  font-size: 14px;
  text-transform: uppercase;
}

.artboard {
  width: 340px;
  height: 340px;
  border: 20px solid #333;
  box-shadow: 0 2px 15px 5px rgba(51, 51, 51, 0.15);
  background-size: 201px 201px;
  background-repeat: no-repeat;
  --angle: 0deg;
  --angle2: 90deg;
  background-image: repeating-linear-gradient(calc(2 * var(--angle)), #333 0px, #333 1px, transparent 1px, transparent 20px), repeating-linear-gradient(var(--angle2), #333 0px, #333 1px, transparent 1px, transparent 20px), repeating-linear-gradient(calc(4 * var(--angle)), #333 0px, #333 1px, transparent 1px, transparent 20px), repeating-linear-gradient(var(--angle2), #333 0px, #333 1px, transparent 1px, transparent 20px), repeating-linear-gradient(calc(6 * var(--angle)), #333 0px, #333 1px, transparent 1px, transparent 20px), repeating-linear-gradient(var(--angle2), #333 0px, #333 1px, transparent 1px, transparent 20px), repeating-linear-gradient(calc(8 * var(--angle)), #333 0px, #333 1px, transparent 1px, transparent 20px), repeating-linear-gradient(var(--angle2), #333 0px, #333 1px, transparent 1px, transparent 20px), repeating-linear-gradient(calc(10 * var(--angle)), #333 0px, #333 1px, transparent 1px, transparent 20px), repeating-linear-gradient(var(--angle2), #333 0px, #333 1px, transparent 1px, transparent 20px);
  background-position: 50% 50%;
  -webkit-animation: gridMovement 8s linear infinite;
          animation: gridMovement 8s linear infinite;
}

@-webkit-keyframes gridMovement {
  25%, 45% {
    background-position: 47% 47%, 49% 49%, 51% 51%, 53% 53%, 55% 55%;
    --angle: 0deg;
    --angle2: 90deg;
  }
  50%, 70% {
    background-position: 50% 50%;
    --angle: 5deg;
    --angle2: 88deg;
  }
  75% {
    --angle: 0deg;
    --angle2: 90deg;
    background-position: 35% 35%, 45% 45%, 55% 55%, 65% 65%, 75% 75%;
  }
  95% {
    background-position: 35% 35%, 45% 45%, 55% 55%, 65% 65%, 75% 75%;
  }
  20%, 100% {
    background-position: 50% 50%;
  }
}

@keyframes gridMovement {
  25%, 45% {
    background-position: 47% 47%, 49% 49%, 51% 51%, 53% 53%, 55% 55%;
    --angle: 0deg;
    --angle2: 90deg;
  }
  50%, 70% {
    background-position: 50% 50%;
    --angle: 5deg;
    --angle2: 88deg;
  }
  75% {
    --angle: 0deg;
    --angle2: 90deg;
    background-position: 35% 35%, 45% 45%, 55% 55%, 65% 65%, 75% 75%;
  }
  95% {
    background-position: 35% 35%, 45% 45%, 55% 55%, 65% 65%, 75% 75%;
  }
  20%, 100% {
    background-position: 50% 50%;
  }
}