#hexagon-container {
  overflow: hidden;
 
}



.hexagon {
  position: absolute;
  width: 100px;
  height: 115.47px; /* height = width * √3 */
  background-color: #c4e7f2;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  animation: float 10s infinite ease-in-out;
}

.hexagon.grey {
  background-color: #d1d1d1;
}

@keyframes float {
  0%, 100% {
      transform: translate(0, 0);
  }
  25% {
      transform: translate(10px, 10px);
  }
  50% {
      transform: translate(-10px, 10px);
  }
  75% {
      transform: translate(-10px, -10px);
  }
}