body > div {
  text-align: center;
  margin: 10px;
}

.container {
  display: flex;
  justify-content: center;
}

/* Triangles */
:root {
  --dark-color: #506fe1ac;
  --light-color: #bc4fee8b;
}

svg {
  cursor: pointer;
}

#darkGroup {
  fill: var(--dark-color);
}

#lightGroup {
  fill: var(--light-color);
}

#dark1,
#light1,
#dark2 {
  transition: all 1s ease;
}

#dark1 {
  transform: translateX(-100%);
}

svg:hover #light1 {
  transform: translateX(20%);
}

svg:hover #dark2 {
  transform: translateX(40%);
  opacity: 0;
}

svg:hover #dark1 {
  transform: translateX(0%);
}

/* Bicycle */

#right-wheel, #left-wheel {
  animation: wheel 1s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes wheel {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

#main {
  animation: bike 1s ease-in-out infinite alternate;
  transform-origin: bottom;
}

@keyframes bike {
  from {
    transform: rotateX(0deg);
  }
  to {
    transform: rotateX(15deg);
  }
}

#hair {
  animation: hair 1s ease-in-out infinite alternate;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes hair {
  from {
    transform: translateY(0%) rotateZ(0deg);
  }
  to {
    transform: translateY(15%) rotateZ(10deg);
  }
}