:root {
    --top-light: #404040;
    --top-dark: #F5F5F5;
}

html {
    --top: var(--top-light);
}

html.dark {
    --top: var(--top-dark);
}

.download {
  width: 24px; /* Half of 48px */
  height: 6px; /* Half of 12px */
  background: var(--top);
  margin-top: 20px; /* Half of 40px */
  display: inline-block;
  position: relative;
}
.download::after {
  content: '';  
  left: 50%;
  bottom: 0;
  transform: translate(-50%, 0);
  position: absolute;
  border: 7.5px solid transparent; /* Half of 15px */
  border-top-color: var(--top);
  box-sizing: border-box;
  animation: bump 0.4s ease-in-out infinite alternate;
}
.download::before {
  content: '';  
  left: 50%;
  bottom: 12.5px; /* Half of 25px */
  transform: translate(-50%, 0);
  position: absolute;
  width: 7.5px; /* Half of 15px */
  height: 10px; /* Half of 20px */
  background: var(--top);
  box-sizing: border-box;
  animation: bump 0.4s ease-in-out infinite alternate;
}

@keyframes bump {
  0% {
      transform: translate(-50%, 2.5px); /* Half of 5px */
  }
  100% {
      transform: translate(-50%, -2.5px); /* Half of -5px */
  }
}