*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}

#grid-container {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
}

.hexagon {
  --border-correct: rgb(43, 255, 43);
  --border-wrong: red;
  --border-temp: yellow;
  --border-default: black;
  position: absolute;
  background: var(--border-default);
  width: var(--width);
  aspect-ratio: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
  transition: background ease-in-out 250ms;
}

.hexagon:before,
.double:after {
  position: absolute;
  content: "";
}

.hexagon:before {
  --border: 4px;
  top: var(--border); /* border width */
  left: var(--border); /* border width */
  height: calc(100% - var(--border) * 2); /* 100% - (2 * border width) */
  width: calc(100% - var(--border) * 2); /* 100% - (2 * border width) */
  background: linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.15) 0%,
      rgba(0, 0, 0, 0.15) 100%
    ),
    radial-gradient(
        at top center,
        rgba(255, 255, 255, 0.4) 0%,
        rgba(0, 0, 0, 0.4) 120%
      )
      #989898;
  background-blend-mode: multiply, multiply;
  z-index: -1;
}

.hexagon,
.hexagon:before,
.double:after {
  -webkit-clip-path: polygon(
    50% 0%,
    100% 25%,
    100% 75%,
    50% 100%,
    0% 75%,
    0% 25%
  );
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

body {
  height: 100dvh;
  background-image: linear-gradient(to bottom right, #ffecd2 0%, #fcb69f 100%);
}