html,
body {
  margin: 0;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f6dfd2;
}
.container {
  width: 90vw;
  max-width: 1000px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(26, 1fr);
  grid-template-rows: repeat(14, 1fr);
  aspect-ratio: 26 / 14;
  width: 100%;
}
.square {
  background-color: white;

  box-sizing: border-box;
  cursor: pointer;
  user-select: none;
  aspect-ratio: 1 / 1; /* keeps square shape */
  transition: background-color 0.3s;
}
.square:hover {
  background-color: #a0d468;
}

.r14c3,
.r14c4,
.r14c5,
.r14c6,
.r14c7,
.r14c8,
.r14c9,
.r14c10,
.r14c11,
.r14c12,
.r14c13,
.r14c14,
.r14c15,
.r14c16,
.r14c17,
.r14c18,
.r14c19,
.r14c20,
.r14c21,
.r14c22,
.r14c23,
.r14c24,
.r13c2,
.r12c1,
.r11c1,
.r10c1,
.r9c2,
.r8c3,
.r7c3,
.r6c4,
.r5c5,
.r4c5,
.r3c5,
.r2c6,
.r1c7,
.r1c8,
.r1c9,
.r1c10,
.r1c11,
.r2c12,
.r2c13,
.r2c14,
.r2c15,
.r1c16,
.r1c17,
.r1c18,
.r1c19,
.r1c20,
.r2c21,
.r3c22,
.r4c22,
.r5c22,
.r6c23,
.r7c24,
.r8c24,
.r9c25,
.r10c26,
.r11c26,
.r12c26,
.r13c25,
.r3c7,
.r4c7,
.r3c8,
.r4c8,
.r3c9,
.r4c9,
.r3c10,
.r4c10,
.r3c17,
.r3c18,
.r3c19,
.r3c20,
.r4c17,
.r4c18,
.r4c19,
.r4c20 {
  background-color: rgb(61, 55, 55);
}

.r6c6,
.r6c7,
.r6c8,
.r6c9,
.r6c10,
.r7c12,
.r8c14,
.r8c13,
.r7c15,
.r5c11,
.r4c12,
.r3c12,
.r3c15,
.r4c15,
.r5c16,
.r6c17,
.r6c18,
.r6c19,
.r6c20,
.r6c21,
.r13c19,
.r12c20,
.r11c20,
.r13c8,
.r12c7,
.r11c7,
.r13c15,
.r13c12,
.r12c15,
.r12c12,
.r11c16,
.r10c16,
.r11c11,
.r10c11 {
    background-color: #444962;
}

.r6c5,
.r7c5,
.r7c4,
.r9c4,
.r6c22,
.r7c22,
.r7c23,
.r9c23 {
    background-color: #c5f654;
}

.r10c2,
.r11c2,
.r12c2,
.r11c3,
.r11c4,
.r12c3,
.r12c4,
.r12c5,
.r12c6,
.r13c3,
.r13c4,
.r13c5,
.r13c6,
.r13c7,
.r13c9,
.r13c10,
.r13c11,
.r13c16,
.r13c17,
.r13c18,
.r13c20,
.r13c21,
.r13c22,
.r13c23,
.r13c24,
.r12c8,
.r12c9,
.r12c10,
.r12c11,
.r12c16,
.r12c17,
.r12c18,
.r12c19,
.r12c21,
.r12c22,
.r12c23,
.r12c24,
.r12c25,
.r11c23,
.r11c24,
.r11c25,
.r10c25 {
    background-color:#329a78 ;
}

.r10c12,
.r10c13,
.r10c14,
.r10c15,
.r11c12,
.r11c13,
.r11c14,
.r11c15 {
    background-color: #ecfd8a;
}

.r12c13,
.r12c14,
.r13c13,
.r13c14 {
    background-color: #b8ff5c;
}

.r4c6,
.r4c11,
.r5c6,
.r5c7,
.r5c8,
.r5c9,
.r5c10,
.r4c16,
.r4c21,
.r5c17,
.r5c18,
.r5c19,
.r5c20,
.r5c21 {
    background-color: rgb(238, 211, 172);
}

.r3c13,
.r3c14,
.r4c13,
.r4c14,
.r5c12,
.r5c13,
.r5c14,
.r5c15,
.r6c11,
.r6c12,
.r6c13,
.r6c14,
.r6c15,
.r6c16,
.r7c6,
.r7c7,
.r7c8,
.r7c9,
.r7c10,
.r7c11,
.r7c13,
.r7c14,
.r7c16,
.r7c17,
.r7c18,
.r7c19,
.r7c20,
.r7c21,
.r8c4,
.r8c5,
.r8c6,
.r8c7,
.r8c8,
.r8c9,
.r8c10,
.r8c11,
.r8c12,
.r8c15,
.r8c16,
.r8c17,
.r8c18,
.r8c19,
.r8c20,
.r8c21,
.r8c22,
.r8c23,
.r9c3,
.r9c5,
.r9c6,
.r9c7,
.r9c8,
.r9c9,
.r9c10,
.r9c11,
.r9c12,
.r9c13,
.r9c14,
.r9c15,
.r9c16,
.r9c17,
.r9c18,
.r9c19,
.r9c20,
.r9c21,
.r9c22,
.r9c24,
.r10c3,
.r10c4,
.r10c5,
.r10c6,
.r10c7,
.r10c8,
.r10c9,
.r10c10,
.r10c17,
.r10c18,
.r10c19,
.r10c20,
.r10c21,
.r10c22,
.r10c23,
.r10c24,
.r11c5,
.r11c6,
.r11c8,
.r11c9,
.r11c10,
.r11c17,
.r11c18,
.r11c19,
.r11c21,
.r11c22  {
    background-color: rgb(124, 211, 124);
}