#steve {
  scale: 0.5;
  width: 400px;
  height: 400px;
  display: grid;
  grid-template-columns: repeat(8, 50px);
  grid-template-rows: repeat(8, 50px);
  grid-auto-flow: row;
  grid-template-areas:
    "a1 a2 a3 a4 a5 a6 a7 a8"
    "b1 b2 b3 b4 b5 b6 b7 b8"
    "c1 c2 c3 c4 c5 c6 c7 c8"
    "d1 d2 d3 d4 d5 d6 d7 d8"
    "e1 e2 e3 e4 e5 e6 e7 e8"
    "f1 f2 f3 f4 f5 f6 f7 f8"
    "g1 g2 g3 g4 g5 g6 g7 g8"
    "h1 h2 h3 h4 h5 h6 h7 h8";
}

#steve div {
  overflow: hidden;
  position: relative;
}

#div1 {
  grid-area: a1;
  background-color: #2f200d;
}
#div2 {
  grid-area: a2;
  background-color: #2b1e0d;
}
#div3 {
  grid-area: a3;
  background-color: #2f1f0f;
}
#div4 {
  grid-area: a4;
  background-color: #281c0b;
}
#div5 {
  grid-area: a5;
  background-color: #241808;
}
#div6 {
  grid-area: a6;
  background-color: #261a0a;
}
#div7 {
  grid-area: a7;
  background-color: #2b1e0d;
}
#div8 {
  grid-area: a8;
  background-color: #2a1d0d;
}

#div9 {
  grid-area: b1;
  background-color: #2b1e0d;
}
#div10 {
  grid-area: b2;
  background-color: #2b1e0d;
}
#div11 {
  grid-area: b3;
  background-color: #2b1e0d;
}
#div12 {
  grid-area: b4;
  background-color: #332411;
}
#div13 {
  grid-area: b5;
  background-color: #422a12;
}
#div14 {
  grid-area: b6;
  background-color: #3f2a15;
}
#div15 {
  grid-area: b7;
  background-color: #2c1e0e;
}
#div16 {
  grid-area: b8;
  background-color: #281c0b;
}

#div17 {
  grid-area: c1;
  background-color: #2b1e0d;
}
#div18 {
  grid-area: c2;
  background-color: #b6896c;
}
#div19 {
  grid-area: c3;
  background-color: #bd8e72;
}
#div20 {
  grid-area: c4;
  background-color: #c69680;
}
#div21 {
  grid-area: c5;
  background-color: #bd8b72;
}
#div22 {
  grid-area: c6;
  background-color: #bd8e74;
}
#div23 {
  grid-area: c7;
  background-color: #ac765a;
}
#div24 {
  grid-area: c8;
  background-color: #342512;
}

#div25 {
  grid-area: d1;
  background-color: #aa7d66;
}
#div26 {
  grid-area: d2;
  background-color: #b4846d;
}
#div27 {
  grid-area: d3;
  background-color: #aa7d66;
}
#div28 {
  grid-area: d4;
  background-color: #ad806d;
}
#div29 {
  grid-area: d5;
  background-color: #9c725c;
}
#div30 {
  grid-area: d6;
  background-color: #bb8972;
}
#div31 {
  grid-area: d7;
  background-color: #9c694c;
}
#div32 {
  grid-area: d8;
  background-color: #9c694c;
}

#div33 {
  grid-area: e1;
  background-color: #b4846d;
}
#div34 {
  grid-area: e2;
  background-color: #ffffff;
}
#div35 {
  grid-area: e3;
  background-color: #523d89;
}
#div36 {
  grid-area: e4;
  background-color: #b57b67;
}
#div37 {
  grid-area: e5;
  background-color: #bb8972;
}
#div38 {
  grid-area: e6;
  background-color: #523d89;
}
#div39 {
  grid-area: e7;
  background-color: #ffffff;
}
#div40 {
  grid-area: e8;
  background-color: #aa7d66;
}

#div41 {
  grid-area: f1;
  background-color: #9c6346;
}
#div42 {
  grid-area: f2;
  background-color: #b37b62;
}
#div43 {
  grid-area: f3;
  background-color: #b78272;
}
#div44 {
  grid-area: f4;
  background-color: #6a4030;
}
#div45 {
  grid-area: f5;
  background-color: #6a4030;
}
#div46 {
  grid-area: f6;
  background-color: #be886c;
}
#div47 {
  grid-area: f7;
  background-color: #a26a47;
}
#div48 {
  grid-area: f8;
  background-color: #805334;
}

#div49 {
  grid-area: g1;
  background-color: #905e43;
}
#div50 {
  grid-area: g2;
  background-color: #965f40;
}
#div51 {
  grid-area: g3;
  background-color: #41210c;
}
#div52 {
  grid-area: g4;
  background-color: #8a4c3d;
}
#div53 {
  grid-area: g5;
  background-color: #8a4c3d;
}
#div54 {
  grid-area: g6;
  background-color: #45220e;
}
#div55 {
  grid-area: g7;
  background-color: #8f5e3e;
}
#div56 {
  grid-area: g8;
  background-color: #815339;
}

#div57 {
  grid-area: h1;
  background-color: #6f452c;
}
#div58 {
  grid-area: h2;
  background-color: #6d432a;
}
#div59 {
  grid-area: h3;
  background-color: #41210c;
}
#div60 {
  grid-area: h4;
  background-color: #421d0a;
}
#div61 {
  grid-area: h5;
  background-color: #45220e;
}
#div62 {
  grid-area: h6;
  background-color: #45220e;
}
#div63 {
  grid-area: h7;
  background-color: #83553b;
}
#div64 {
  grid-area: h8;
  background-color: #7a4e33;
}

#steve ::before {
  content: "";
  background-color: gray;
  width: 50px;
  height: 50px;
  position: absolute;
  top: -50px;
}

#div34::after,
#div35::after,
#div38::after,
#div39::after {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  background-color: #a17661;
  z-index: 1;
  top: -50px;
  animation: winking 6s ease-in-out infinite 2s;
}

@keyframes winking {
  0% {
    transform: translateY(0px);
  }
  40% {
    transform: translateY(0px);
  }
  45% {
    transform: translateY(50px);
  }
  48% {
    transform: translateY(50px);
  }
  53% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(0px);
  }
}

#div1::before {
  background-color: #a1a1a1;
  animation: change 6s ease-in-out infinite;
}
#div2::before {
  background-color: #9b9b9b;
  animation: change 6s ease-in-out infinite 0.01s;
}
#div3::before {
  background-color: #a3a3a3;
  animation: change 6s ease-in-out infinite 0.02s;
}
#div4::before {
  background-color: #919191;
  animation: change 6s ease-in-out infinite 0.03s;
}
#div5::before {
  background-color: #888888;
  animation: change 6s ease-in-out infinite 0.04s;
}
#div6::before {
  background-color: #8f8f8f;
  animation: change 6s ease-in-out infinite 0.05s;
}
#div7::before {
  background-color: #9b9b9b;
  animation: change 6s ease-in-out infinite 0.06s;
}
#div8::before {
  background-color: #989898;
  animation: change 6s ease-in-out infinite 0.07s;
}

#div9::before {
  background-color: #9b9b9b;
  animation: change 6s ease-in-out infinite 0.08s;
}
#div10::before {
  background-color: #9b9b9b;
  animation: change 6s ease-in-out infinite 0.09s;
}
#div11::before {
  background-color: #9b9b9b;
  animation: change 6s ease-in-out infinite 0.1s;
}
#div12::before {
  background-color: #aaaaaa;
  animation: change 6s ease-in-out infinite 0.11s;
}
#div13::before {
  background-color: #c1c1c1;
  animation: change 6s ease-in-out infinite 0.12s;
}
#div14::before {
  background-color: #bebebe;
  animation: change 6s ease-in-out infinite 0.13s;
}
#div15::before {
  background-color: #9b9b9b;
  animation: change 6s ease-in-out infinite 0.14s;
}
#div16::before {
  background-color: #919191;
  animation: change 6s ease-in-out infinite 0.15s;
}

#div17::before {
  background-color: #9b9b9b;
  animation: change 6s ease-in-out infinite 0.16s;
}
#div18::before {
  background-color: #c7c7c7;
  animation: change 6s ease-in-out infinite 0.17s;
}
#div19::before {
  background-color: #cacaca;
  animation: change 6s ease-in-out infinite 0.18s;
}
#div20::before {
  background-color: #d8d8d8;
  animation: change 6s ease-in-out infinite 0.19s;
}
#div21::before {
  background-color: #cfcfcf;
  animation: change 6s ease-in-out infinite 0.2s;
}
#div22::before {
  background-color: #cfcfcf;
  animation: change 6s ease-in-out infinite 0.21s;
}
#div23::before {
  background-color: #bababa;
  animation: change 6s ease-in-out infinite 0.22s;
}
#div24::before {
  background-color: #aaaaaa;
  animation: change 6s ease-in-out infinite 0.23s;
}

#div25::before {
  background-color: #bababa;
  animation: change 6s ease-in-out infinite 0.24s;
}
#div26::before {
  background-color: #c4c4c4;
  animation: change 6s ease-in-out infinite 0.25s;
}
#div27::before {
  background-color: #bababa;
  animation: change 6s ease-in-out infinite 0.26s;
}
#div28::before {
  background-color: #c1c1c1;
  animation: change 6s ease-in-out infinite 0.27s;
}
#div29::before {
  background-color: #afafaf;
  animation: change 6s ease-in-out infinite 0.28s;
}
#div30::before {
  background-color: #cacaca;
  animation: change 6s ease-in-out infinite 0.29s;
}
#div31::before {
  background-color: #aaaaaa;
  animation: change 6s ease-in-out infinite 0.3s;
}
#div32::before {
  background-color: #aaaaaa;
  animation: change 6s ease-in-out infinite 0.31s;
}

#div33::before {
  background-color: #c4c4c4;
  animation: change 6s ease-in-out infinite 0.32s;
}
#div34::before {
  background-color: #494949;
  animation: change 6s ease-in-out infinite 0.33s;
  z-index: 2;
}
#div35::before {
  background-color: #494949;
  animation: change 6s ease-in-out infinite 0.34s;
  z-index: 2;
}
#div36::before {
  background-color: #c4c4c4;
  animation: change 6s ease-in-out infinite 0.35s;
}
#div37::before {
  background-color: #cacaca;
  animation: change 6s ease-in-out infinite 0.36s;
}
#div38::before {
  background-color: #494949;
  animation: change 6s ease-in-out infinite 0.37s;
  z-index: 2;
}
#div39::before {
  background-color: #494949;
  animation: change 6s ease-in-out infinite 0.38s;
  z-index: 2;
}
#div40::before {
  background-color: #bababa;
  animation: change 6s ease-in-out infinite 0.39s;
}

#div41::before {
  background-color: #a7a7a7;
  animation: change 6s ease-in-out infinite 0.4s;
}
#div42::before {
  background-color: #c1c1c1;
  animation: change 6s ease-in-out infinite 0.41s;
}
#div43::before {
  background-color: #cacaca;
  animation: change 6s ease-in-out infinite 0.42s;
}
#div44::before {
  background-color: #828282;
  animation: change 6s ease-in-out infinite 0.43s;
}
#div45::before {
  background-color: #828282;
  animation: change 6s ease-in-out infinite 0.44s;
}
#div46::before {
  background-color: #cacaca;
  animation: change 6s ease-in-out infinite 0.45s;
}
#div47::before {
  background-color: #aaaaaa;
  animation: change 6s ease-in-out infinite 0.46s;
}
#div48::before {
  background-color: #8f8f8f;
  animation: change 6s ease-in-out infinite 0.47s;
}

#div49::before {
  background-color: #9e9e9e;
  animation: change 6s ease-in-out infinite 0.48s;
}
#div50::before {
  background-color: #494949;
  animation: change 6s ease-in-out infinite 0.49s;
}
#div51::before {
  background-color: #494949;
  animation: change 6s ease-in-out infinite 0.5s;
}
#div52::before {
  background-color: #494949;
  animation: change 6s ease-in-out infinite 0.51s;
}
#div53::before {
  background-color: #494949;
  animation: change 6s ease-in-out infinite 0.52s;
}
#div54::before {
  background-color: #494949;
  animation: change 6s ease-in-out infinite 0.53s;
}
#div55::before {
  background-color: #494949;
  animation: change 6s ease-in-out infinite 0.54s;
}
#div56::before {
  background-color: #919191;
  animation: change 6s ease-in-out infinite 0.55s;
}

#div57::before {
  background-color: #828282;
  animation: change 6s ease-in-out infinite 0.56s;
}
#div58::before {
  background-color: #7f7f7f;
  animation: change 6s ease-in-out infinite 0.57s;
}
#div59::before {
  background-color: #858585;
  animation: change 6s ease-in-out infinite 0.58s;
}
#div60::before {
  background-color: #858585;
  animation: change 6s ease-in-out infinite 0.59s;
}
#div61::before {
  background-color: #919191;
  animation: change 6s ease-in-out infinite 0.6s;
}
#div62::before {
  background-color: #858585;
  animation: change 6s ease-in-out infinite 0.61s;
}
#div63::before {
  background-color: #949494;
  animation: change 6s ease-in-out infinite 0.62s;
}
#div64::before {
  background-color: #888888;
  animation: change 6s ease-in-out infinite 0.63s;
}

@keyframes change {
  0% {
    transform: translateY(0px);
  }
  5% {
    transform: translateY(50px);
  }
  50% {
    transform: translateY(50px);
  }
  55% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(0px);
  }
}