body {
  position: relative;
  width: 100%;
  min-height: 100vh;
}

section {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#particles {
  background: #000000;
}

#hexagonGrid {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
#hexagonGrid .row {
  display: inline-flex;
  margin-top: -32px;
  margin-left: -50px;
}
#hexagonGrid .row:nth-child(even) {
  margin-left: 2px;
}
#hexagonGrid .row .hexagon {
  position: relative;
  width: 100px;
  height: 110px;
  margin: 4px 2px;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
#hexagonGrid .row .hexagon::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #000000;
  opacity: 0.95;
  transition: 1s;
}
#hexagonGrid .row .hexagon::after {
  content: "";
  position: absolute;
  top: 4px;
  right: 4px;
  bottom: 4px;
  left: 4px;
  background: #141414;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
#hexagonGrid .row .hexagon:hover::before {
  background: #8CFD0B;
  opacity: 1;
  transition: 0s;
}
#hexagonGrid .row .hexagon:hover::after {
  background: #000000;
}