html, body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
}

#grid-container {
    display: grid;
    grid-template-columns: repeat(30, 1fr);
    grid-template-rows: repeat(30, 1fr);
    grid-gap: 0; /* Removes space between rectangles */
    height: 100%; /* Example height, adjust as needed */
    width: 100%; /* Example width, adjust as needed */
}

.rectangle {
    width: 100%; /* Adjust to fill the grid cell */
    height: 100%; /* Adjust to fill the grid cell */
    box-sizing: border-box; /* Ensures dimensions include any padding and border */
}

.nav, #reset-grid {
  position: absolute;
  color: white;
  font-family: sans-serif;
  font-weight: bold;
  font-size: 16px;
}

.nav {
  right: 10px;
  bottom: 10px;
}
.nav a {
  color: white;
  padding: 5px;
}

#reset-grid {
    top: 10px;
    right: 10px;
    padding: 5px;
}

/* Prevent text selection */
#grid-container {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE10+/Edge */
    user-select: none;         /* Standard */
}