/**
 * derived from code made by Atticus Koya http://freefrontend.com/assets/zip/css-arrows/scss-arrow-animation.zip
 */
body {
	--arrow-size: calc(3.5vw + 3.5vh);	
	--arrow-thickness: calc(0.5vw + 0.5vh);
}
.arrows {
  top: 50%;
  left: calc(50% - var(--arrow-size)/4);
  position: relative;
  width: calc(var(--arrow-size)/2);
  height: calc(var(--arrow-size)/2);
  transform: translate(-50%, -50%);
}
.arrows:before {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-left: var(--arrow-thickness) solid rgba(0, 0, 0, 0.7);
  border-bottom: var(--arrow-thickness) solid rgba(0, 0, 0, 0.7);
  transform: translate(var(--arrow-thickness), calc(var(--arrow-size)*4)) rotate(-45deg);
  animation: arrows 3s linear infinite;
}
.arrows:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-left: var(--arrow-thickness) solid rgba(0, 0, 0, 0.7);
  border-bottom: var(--arrow-thickness) solid rgba(0, 0, 0, 0.7);
  transform: translate(calc(var(--arrow-thickness)*2), 0px) rotate(-45deg);
  animation: arrows 3s linear infinite -1.5s;
}

@keyframes arrows {
  0% {
    border-left: var(--arrow-thickness) solid transparent;
    border-bottom: var(--arrow-thickness) solid transparent;
    transform: translate(calc(-1 * var(--arrow-thickness)/2 ), calc(-1 * var(--arrow-thickness)*2 )) rotate(-45deg);
  }
  10%, 90% {
    border-left: var(--arrow-thickness) solid transparent;
    border-bottom: var(--arrow-thickness) solid transparent;
  }
  50% {
    border-left: var(--arrow-thickness) solid rgba(0, 0, 0, 0.7);
    border-bottom: var(--arrow-thickness) solid rgba(0, 0, 0, 0.7);
    transform: translate(calc(-1 * var(--arrow-thickness)/2 ), 0px) rotate(-45deg);
  }
  100% {
    border-left: var(--arrow-thickness) solid transparent;
    border-bottom: var(--arrow-thickness) solid transparent;
    transform: translate(calc(-1 * var(--arrow-thickness)/2 ), calc(var(--arrow-thickness)*2 )) rotate(-45deg);
  }
}