.stesan {
  --b: #000;
  --g1: #A4CEA0;
  --g2: #9DC89D;
  --w1: #D2D2D2;
  --g3: #4D9049;
  --g4: #299325;
  --g5: #66C756;
  --g6: #41B435;
  --g7: #7ACD68;
  --g8: #47C536;
  --w2: #DBDDDA;
  --g9: #639E64;
  --w3: #FEFEFE;
  --b1: #502119;
  --b2: #3F1C09;
  --b3: #692A09;
  --p1: #FEC7A9;
  --b4: #4E2217;
  --r: #DA3A22;
  --b5: #693A34;
  --b6: #97625C;
  --p2: #FEBBAA;
  --b7: #50230B;
  --p3: #FEF1DF;
  display: grid;
  grid-template: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr/1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
  gap: 0px;
  height: 64vmin;
  aspect-ratio: 1;
  perspective: 120px;
}

.stesan > div {
  width: 100%;
  aspect-ratio: 1;
  transition: transform ease 0.3s;
}

.stesan__0 {
  background-color: var(--g1);
}

.stesan__1,
.stesan__2,
.stesan__5,
.stesan__6,
.stesan__11,
.stesan__12,
.stesan__18,
.stesan__19,
.stesan__20,
.stesan__21,
.stesan__26,
.stesan__29 {
  background-color: var(--b);
}

.stesan__3 {
  background-color: var(--g2);
}

.stesan__4,
.stesan__15 {
  background-color: var(--w1);
}

.stesan__7,
.stesan__22 {
  background-color: var(--g3);
}

.stesan__8,
.stesan__17 {
  background-color: var(--g4);
}

.stesan__9,
.stesan__27 {
  background-color: var(--g5);
}

.stesan__10,
.stesan__13 {
  background-color: var(--g6);
}

.stesan__14,
.stesan__31 {
  background-color: var(--g7);
}

.stesan__16,
.stesan__24,
.stesan__25,
.stesan__28 {
  background-color: var(--g8);
}

.stesan__23 {
  background-color: var(--w2);
}

.stesan__30 {
  background-color: var(--g9);
}

.stesan__32,
.stesan__39,
.stesan__48,
.stesan__55 {
  background-color: var(--w3);
}

.stesan__33 {
  background-color: var(--b1);
}

.stesan__34 {
  background-color: var(--b2);
}

.stesan__35,
.stesan__37 {
  background-color: var(--b3);
}

.stesan__36,
.stesan__42,
.stesan__43,
.stesan__44,
.stesan__45,
.stesan__50,
.stesan__53 {
  background-color: var(--p1);
}

.stesan__38 {
  background-color: var(--b4);
}

.stesan__40,
.stesan__47 {
  background-color: var(--r);
}

.stesan__41,
.stesan__46 {
  background-color: var(--b5);
}

.stesan__49,
.stesan__54 {
  background-color: var(--b6);
}

.stesan__51,
.stesan__52 {
  background-color: var(--p2);
}

.stesan__56,
.stesan__63 {
  background-color: var(--b7);
}

.stesan__57,
.stesan__58,
.stesan__59,
.stesan__60,
.stesan__61,
.stesan__62 {
  background-color: var(--p3);
}

body {
  width: 100vw;
  height: 100svh;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1000px;
}