:root {
  --shapeColor: #f0eee4; /* Light gray color */
}

.shape-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  pointer-events: none;
  display: grid;
  grid-template-columns: repeat(30, 1fr);
  grid-template-rows: repeat(auto-fill, 60px); /* Adjust row height based on shape size and spacing */
  gap: 0; /* Remove gap since spacing is handled in JavaScript */
  padding-top: 100px;
}

.shape {
  position: relative;
  z-index: -1;
  pointer-events: none;
  margin: auto;
  transform: none;
  background-color: var(--shapeColor);
  border: 15px solid var(--shapeColor); /* Use the same color for border */
  border-radius: 10px; /* Add rounded corners */
}


.shape-type-1 { /* Square */
  /* No additional styles needed */
}

.shape:nth-child(odd) {
  transform: translateY(50%);
}

#diamond {
  width: 0;
  height: 0;
  border: 25px solid transparent;
  border-bottom-color: var(--shapeColor);
  position: relative;
  margin: 30px auto;
}

#diamond:after {
  content: '';
  position: absolute;
  left: -25px;
  top: 25px;
  width: 0;
  height: 0;
  border: 25px solid transparent;
  border-top-color: var(--shapeColor);
}
.test-shape {
  width: 100px;
  height: 100px;
  background-color: red;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1000;
}
.circle {
  border-radius: 50%;
}

.square {
  width: 50px;
  height: 50px;
}

.diamond {
  transform: rotate(45deg);
  margin: 25px; /* Adjust the margin to center the diamond */
}

.diamond::before {
  content: '';
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: var(--shapeColor);
  transform: rotate(-45deg);
}
@media (max-width: 767px) {
  .shape-container {
    display: none;
  }
}