body {
  margin: 0;
  padding: 0;
  background-color: #F8F8F8;
}

.container {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.header {
  background-color: #E2EBF0;
  padding: 2rem;
  text-align: center;
}

.main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 1rem;
  justify-content: center;
  align-items: center;
  flex-grow: 1;
}

.item {
  width: 100px;
  height: 100px;
  margin: 1rem;
  border: 1px solid black;
  background-color: white;
  position: relative;
}

.item::before {
  content: "";
  position: absolute;
  top: -20px;
  left: 20%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 10px 20px 10px;
  border-color: transparent transparent black transparent;
}

.item-1 {
  background-color: #9BC1BC;
  grid-column: 1 / 2;
  grid-row: 1 / 3;
}

.item-2 {
  background-color: #D1E3DD;
  grid-column: 1 / 2;
  grid-row: 3 / 4;
}

.item-3 {
  background-color: #B7D1C6;
  grid-column: 2 / 3;
  grid-row: 2 / 4;
}

.item-4 {
  background-color: #8DA3A3;
  grid-column: 3 / 4;
  grid-row: 1 / 3;
}

.item-5 {
  background-color: #C2D5E1;
  grid-column: 2 / 3;
  grid-row: 1 / 2;
}

.item-6 {
  background-color: #E4F4F4;
  grid-column: 1 / 2;
  grid-row: 4 / 5;
} 

.item-7 {
  background-color: #F4E4E1;
  grid-column: 3 / 4;
  grid-row: 3 / 4;
  overflow: hidden;
}

.item-7::before,
.item-7::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0;
  height: 0;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

.item-7::before {
  left: -50px;
  border-width: 0 50px 70px 50px;
}

.item-7::after {
  right: -50px;
  border-width: 70px 50px 0 50px;
}


.item-8 {
  background-color: #FFC09F;
  grid-column: 2 / 3;
  grid-row: 4 / 5;
}

.item-9 {
  background-color: #E7A977;
  grid-column: 3 / 4;
  grid-row: 3 / 4;
}

.footer {
  background-color: #E2EBF0;
  padding: 1rem;
  text-align: center;
  font-size: 0.8rem;
  color: #666;
  border-top: 1px solid #ccc;
}

.road-1 {
  position: absolute;
  top: 200px;
  left: 0;
  height: 10px;
  width: 100%;
  background-color: #A6A6A6;
  transform: skewY(-10deg);
  z-index: -1;
}

.road-2 {
  position: absolute;
  top: 0;
  left: 200px;
  height: 100%;
  width: 10px;
  background-color: #A6A6A6;
  transform: skewX(-10deg);
  z-index: -1;
}

.road-3 {
  position: absolute;
  top: 400px;
  left: 200px;
  height: 10px;
  width: 100%;
  background-color: #A6A6A6;
  transform: skewY(-10deg);
  z-index: -1;
}

.park {
  position: absolute;
  top: 200px;
  left: 200px;
  height: 200px;
  width: 200px;
  background-color: #85C99D;
  border-radius: 50%;
  z-index: 0;
}