/* Basic page styling */
body {
  font-family: Arial, sans-serif;
  padding: 20px;
}

/* Container that holds both squares */
.squares {
  display: flex;
  gap: 16px; /* space between the squares */
  margin-top: 20px;
}

/* The green squares */
.square {
  width: 120px;
  height: 120px;
  background-color: green;
  cursor: pointer; /* shows it's clickable */
}

/* Active square state */
.square.active {
  background-color: yellow;
}