* {
  margin: 0;
  padding: 0;
}
.canvas {
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: white;
}
.hexagon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 400px;
  height: 400px;
}
.hexagon .row {
  display: flex;
}
.arrow {
  width: 0;
  height: 0;
  margin: 0 -0.3125vmin;
  border-left: 0.625vmin solid transparent;
  border-right: 0.625vmin solid transparent;
  border-bottom: 1.125vmin solid #d88405;
  animation: blink 1s infinite;
  filter: drop-shadow(0 0 0.8vmin #d88405);
}
.arrow.down {
  transform: rotate(180deg);
}
.arrow.outer-1 {
  animation-delay: -0.06s;
}
.arrow.outer-2 {
  animation-delay: -0.11s;
}
.arrow.outer-3 {
  animation-delay: -0.17s;
}
.arrow.outer-4 {
  animation-delay: -0.22s;
}
.arrow.outer-5 {
  animation-delay: -0.28s;
}
.arrow.outer-6 {
  animation-delay: -0.33s;
}
.arrow.outer-7 {
  animation-delay: -0.39s;
}
.arrow.outer-8 {
  animation-delay: -0.44s;
}
.arrow.outer-9 {
  animation-delay: -0.50s;
}
.arrow.outer-10 {
  animation-delay: -0.56s;
}
.arrow.outer-11 {
  animation-delay: -0.61s;
}
.arrow.outer-12 {
  animation-delay: -0.67s;
}
.arrow.outer-13 {
  animation-delay: -0.72s;
}
.arrow.outer-14 {
  animation-delay: -0.78s;
}
.arrow.outer-15 {
  animation-delay: -0.83s;
}
.arrow.outer-16 {
  animation-delay: -0.89s;
}
.arrow.outer-17 {
  animation-delay: -0.94s;
}
.arrow.outer-18 {
  animation-delay: -10s;
}
.arrow.inner-1 {
  animation-delay: -0.17s;
}
.arrow.inner-2 {
  animation-delay: -0.33s;
}
.arrow.inner-3 {
  animation-delay: -0.50s;
}
.arrow.inner-4 {
  animation-delay: -0.67s;
}
.arrow.inner-5 {
  animation-delay: -0.83s;
}
.arrow.inner-6 {
  animation-delay: -10s;
}
@keyframes blink {
  0% {
    opacity: 0.10;
 }
  30% {
    opacity: 1;
 }
  100% {
    opacity: 0.10;
 }
}