body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 18px;
  background: black;
  font-family: "Open Sans", sans-serif;
  color: #2b2b33;
}
.forest {
  width: 3000px;
  height: 3000px;
  display: grid;
  grid-template-columns: 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px;
  grid-template-rows: 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px;
  background: #2e7044;
}

/* River CSS */
.river-bank-upper {
  grid-column: 7 / 11;
  grid-row: 4;
  width: 100%;
  height: 300px;
  background-image: linear-gradient(
    to bottom,
    rgba(73, 47, 41, 0.534) 20%,
    rgb(73, 47, 41) 40%
  ),
    repeating-linear-gradient(
      to right,
      rgb(73, 47, 41) 60px,
      rgb(75, 44, 37) 90px,
      rgb(94, 56, 47) 120px,
      rgb(73, 47, 41) 150px
    );
}
.river-bank-lower {
  grid-column: 1 / 6;
  grid-row: 7;
  width: 100%;
  height: 300px;
  background-image: linear-gradient(
    to bottom,
    rgba(73, 47, 41, 0.534) 20%,
    rgb(73, 47, 41) 40%
  ),
    repeating-linear-gradient(
      to right,
      rgb(73, 47, 41) 60px,
      rgb(75, 44, 37) 90px,
      rgb(94, 56, 47) 120px,
      rgb(73, 47, 41) 150px
    );
}
.river {
  margin-top: 40px;
  background: rgba(0, 102, 255, 0.37);
  height: 260px;
  width: 100%;
}
.river-inner-corner {
  grid-column: 7;
  grid-row: 5;
  background: #2e4378;
}
.river-inner-corner-top {
  grid-column: 7;
  grid-row: 5;
  height: 300px;
  width: 300px;
  background: #2e7044;
  border-top-left-radius: 80px;
}
.river-outer-corner {
  grid-column: 6;
  grid-row: 4;
  border-top-left-radius: 300px;
  background-image: linear-gradient(
    to bottom,
    rgba(73, 47, 41, 0.534) 20%,
    rgb(73, 47, 41) 40%
  ),
    repeating-linear-gradient(
      to right,
      rgb(73, 47, 41) 60px,
      rgb(75, 44, 37) 90px,
      rgb(94, 56, 47) 120px,
      rgb(73, 47, 41) 150px
    );
}
.river-outer-corner-top {
  margin-top: 40px;
  height: 260px;
  width: 300px;
  background: rgba(0, 102, 255, 0.37);
  border-top-left-radius: 100%;
}
.river-center {
  grid-column: 6;
  grid-row: 5/7;
  background: #2e4378;
}
.river-inner-corner-2 {
  grid-column: 5;
  grid-row: 6;
  background: #52322b;
}
.river-inner-corner-top-2 {
  grid-column: 7;
  grid-row: 6;
  height: 300px;
  width: 300px;
  background: #2e7044;
  border-bottom-right-radius: 80px;
}
.river-inner-corner-top-3 {
  grid-column: 5;
  grid-row: 7;
  justify-self: end;
  align-self: start;
  height: 40px;
  width: 40px;
  background: #2e4378;
}
.river-inner-corner-top-3-inner {
  height: 40px;
  width: 40px;
  background: #52322b;
  border-bottom-right-radius: 80px;
}
.river-outer-corner-2 {
  grid-column: 6;
  grid-row: 7;
  border-bottom-right-radius: 300px;
  background: #2e4378;
}

/* Bridge 1*/
.bridge-1 {
  grid-column: 9;
  grid-row: 3 / 6;
}
.bridge-2 {
  grid-column: 3;
  grid-row: 6 / 9;
}
.bridge {
  width: 260px;
  height: 416px;
  background: rgb(156, 133, 71);
  background-image: repeating-linear-gradient(to bottom, rgb(156, 133, 71) 30px,rgb(94, 65, 38) 30px 32px,rgb(156, 133, 71) 32px 62px);
  border: 1px solid rgb(94, 65, 38);
  box-shadow: 0 8px 0 0 rgb(94, 65, 38),
    3px 8px 5px 3px rgba(0, 0, 0, 0.158);
  border-radius: 10px;
  justify-self: center;
  align-self: center;
  z-index: 100;
}
.left-rail {
  position: relative;
  width: 30px;
  height: 400px;
  background: rgb(156, 133, 71);
  border: 1px solid rgb(94, 65, 38);
  box-shadow: 0 8px 0 0 rgb(94, 65, 38),
    5px 60px 5px 3px rgba(0, 0, 0, 0.158);
  border-radius: 8px;
  left: 8px;
  top: -60px;
}
.left-rail::after {
  position: absolute;
  content: "";
  width: 20px;
  height: 50px;
  background: linear-gradient(
    to right,
    rgb(94, 65, 38) 70%,
    rgb(63, 42, 23) 100%
  );
  border-radius: 0 0 6px 6px;
  top: 409px;
  left: 5px;
}
.right-rail {
  position: relative;
  width: 30px;
  height: 400px;
  background: rgb(156, 133, 71);
  border: 1px solid rgb(94, 65, 38);
  box-shadow: 0 8px 0 0 rgb(94, 65, 38),
    5px 60px 5px 3px rgba(0, 0, 0, 0.158);
  border-radius: 8px;
  left: 220px;
  top: -462px;
}
.right-rail::after {
  position: absolute;
  content: "";
  width: 20px;
  height: 50px;
  background: linear-gradient(
    to right,
    rgb(94, 65, 38) 70%,
    rgb(63, 42, 23) 100%
  );
  border-radius: 0 0 6px 6px;
  top: 409px;
  left: 5px;
}

/* Pond CSS */

.pond-area {
  grid-column: 3;
  grid-row: 3;
  width: 500px;
  height: 300px;
}
.pond {
  position: absolute;
  width: 500px;
  height: 300px;
  background-image: linear-gradient(
    to bottom,
    rgba(73, 47, 41, 0.534) 20%,
    rgb(73, 47, 41) 40%
  ),
    repeating-linear-gradient(
      to right,
      rgb(73, 47, 41) 60px,
      rgb(75, 44, 37) 90px,
      rgb(94, 56, 47) 120px,
      rgb(73, 47, 41) 150px
    );
  border-radius: 38% 14% 29% 30% / 42% 21% 31% 31%;
}
.pond::after {
  position: absolute;
  content: "";
  width: 500px;
  top: 40px;
  height: 260px;
  background: rgba(0, 119, 255, 0.274);
  border-radius: 38% 14% 29% 30% / 42% 21% 37% 36%;
}
.lilly-pad,
.lilly-pad-2,
.lilly-pad-3,
.lilly-pad-4 {
  position: relative;
  left: 340px;
  top: 180px;
  width: 100px;
  height: 40px;
  border-radius: 50% 50% 50% 0% / 100% 86% 15% 4%;
  background: rgb(49, 122, 49);
  z-index: 2;
}
.lilly-pad::after,
.lilly-pad-2::after,
.lilly-pad-3::after,
.lilly-pad-4::after {
  position: absolute;
  content: "";
  width: 100px;
  height: 40px;
  top: 40px;
  border-radius: 50% 50% 50% 50% / 0% 15% 86% 100%;
  background: rgb(49, 122, 49);
  z-index: 2;
}
.lilly-pad {
  transform: scale(1, 0.8) rotate(8deg);
}
.lilly-pad-2 {
  top: 58px;
  left: 380px;
  transform: scale(0.7) rotate(8deg);
}
.lilly-pad-3 {
  top: 158px;
  left: 250px;
  transform: scale(-0.7) rotate(-8deg);
}
.lilly-pad-4 {
  top: -30px;
  left: 10px;
  transform: scale(0.7, 0.5) rotate(-32deg);
}
.rock {
  grid-column: 5;
  grid-row: 3;
  margin: 40px;
  height: 40px;
  width: 60px;
  background: rgb(112, 112, 112);
  border-radius: 57% 33% 29% 32% / 66% 58% 14% 17%;
  box-shadow: 0 3px 0 0 rgb(95, 95, 95);
}
.rock-2 {
  position: absolute;
  left: 30px;
  height: 50px;
  width: 110px;
  background-image: linear-gradient(
    rgba(0, 119, 255, 0.274),
    rgba(26, 46, 70, 0.596)
  ),
    linear-gradient(rgb(112, 112, 112), rgb(112, 112, 112));
  border-radius: 48% 47% 51% 44% / 70% 67% 17% 15%;
  z-index: 2;
}
.rock-2::after {
  position: absolute;
  content: "";
  height: 20px;
  width: 94px;
  left: 8px;
  background: rgb(112, 112, 112);
  border-radius: 50% 50% 50% 50% / 87% 87% 11% 11%;
}

/* Apple Tree CSS */
.tree-1 {
  grid-column: 4;
  grid-row: 5;
}
.tree-area {
  /*position: absolute;*/
  width: 300px;
  height: 400px;
  display: flex;
  justify-content: center;
}
.tree {
  position: absolute;
  width: 300px;
  height: 400px;
  display: flex;
  justify-content: center;
  cursor: pointer;
}
.apples {
  top: 80px;
}
.trunk {
  position: absolute;
  bottom: 20px;
  background-image: linear-gradient(
    to right,
    rgb(92, 47, 47) 0%,
    rgb(92, 47, 47) 65%,
    rgb(71, 37, 37) 85%
  );
  width: 50px;
  height: 200px;
  border-radius: 10% 10% 49% 50% / 0% 0% 5% 5%;
}
.trunk::before {
  position: absolute;
  content: "";
  bottom: 26px;
  left: -8px;
  background-image: linear-gradient(
    to bottom,
    rgb(100, 54, 54) 60%,
    rgb(77, 45, 45) 90%
  );
  height: 26px;
  width: 20px;
  border-radius: 35% 35% 35% 35% / 50% 50% 50% 50%;
}
.trunk::after {
  position: absolute;
  content: "";
  bottom: 26px;
  left: -8px;
  background: rgb(151, 122, 98);
  height: 26px;
  width: 12px;
  border-radius: 50%;
}
.bottom {
  position: absolute;
  bottom: 80px;
  background-color: rgb(60, 136, 113);
  border-radius: 46% 36% 50% 27% / 45% 37% 57% 38%;
  width: 280px;
  height: 130px;
  border-bottom: 4px solid rgb(51, 117, 97);
}
.bottom::after {
  position: absolute;
  content: "";
  bottom: -14px;
  left: 69px;
  width: 156px;
  height: 54px;
  background-color: rgb(60, 136, 113);
  border-radius: 36% 38% 34% 23% / 13% 2% 63% 31%;
  border-bottom: 4px solid rgb(51, 117, 97);
}
.middle {
  position: absolute;
  bottom: 140px;
  background-color: rgb(60, 136, 113);
  border-radius: 55% 57% 40% 23% / 64% 65% 70% 68%;
  width: 260px;
  height: 140px;
  border-bottom: 4px solid rgb(51, 117, 97);
}
.middle::after {
  position: absolute;
  content: "";
  bottom: -30px;
  left: 50px;
  width: 160px;
  height: 84px;
  background-color: rgb(60, 136, 113);
  border-radius: 36% 38% 50% 39% / 38% 34% 45% 41%;
  border-bottom: 4px solid rgb(51, 117, 97);
}
.top {
  position: absolute;
  bottom: 240px;
  width: 240px;
  height: 130px;
  background-color: rgb(60, 136, 113);
  border-radius: 48% 31% 17% 27% / 67% 51% 23% 25%;
  border-bottom: 4px solid rgb(51, 117, 97);
}
.top::after {
  position: absolute;
  content: "";
  bottom: -30px;
  left: 100px;
  width: 110px;
  height: 84px;
  background-color: rgb(60, 136, 113);
  border-radius: 36% 38% 50% 39% / 38% 34% 45% 41%;
  border-bottom: 4px solid rgb(51, 117, 97);
}
.apple {
  position: relative;
  background-color: rgb(179, 46, 23);
  width: 40px;
  height: 38px;
  border-radius: 55% 57% 40% 42% / 64% 65% 70% 68%;
  border-left: 3px solid rgb(180, 76, 57);
  border-right: 1px solid rgb(122, 40, 26);
}
.apple::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 4px;
  background: rgb(84, 97, 94);
  top: -4px;
  left: 20px;
}
.apple::before {
  position: absolute;
  content: "";
  width: 8px;
  height: 12px;
  background-image: radial-gradient(
    rgba(207, 54, 27, 0.575) 80%,
    rgba(207, 54, 27, 0.541) 85%,
    rgba(179, 46, 23, 0.342) 90%
  );
  top: 4px;
  left: 6px;
  border-radius: 50%;
  transform: rotate(20deg);
}
.a1 {
  top: 60px;
  left: -20px;
  transform: rotate(4deg);
}
.a2 {
  top: 90px;
  left: 112px;
}
.a3 {
  top: 198px;
  left: 40px;
  transform: rotate(8deg);
}
.a4 {
  top: 120px;
  left: -50px;
}
.a5 {
  top: 60px;
  left: 20px;
  transform: rotate(-4deg);
}
.a1,
.a2,
.a3,
.a4,
.a5 {
  transition: all 0.2s cubic-bezier(0.755, 0.05, 0.855, 0.06);
}
.a1-dropped {
  top: 340px;
}
.a2-dropped,
.a3-dropped {
  top: 270px;
}
.a4-dropped {
  top: 282px;
}
.a5-dropped {
  top: 268px;
  left: 48px;
}
.leaf {
  position: absolute;
  background: rgb(60, 136, 113);
  border-radius: 100% 0% 50% 50% / 50% 0% 100% 50%;
  width: 20px;
  height: 20px;
  bottom: 200px;
  left: 200px;
  transform: rotate(30deg);
  transition: all 1.1s cubic-bezier(0.165, 0.84, 0.44, 1);
}
.leaf::after {
  position: absolute;
  content: "";
  width: 2px;
  height: 30px;
  background: rgb(51, 117, 97);
  transform: rotate(45deg);
  left: 7px;
  top: -4px;
  border-radius: 50% 50% 50% 50% / 85% 85% 15% 15%;
}
.leaf-dropped {
  bottom: 0px;
}

/* Cat CSS */
@keyframes face-move {
  0% {
    top: 60px;
  }

  50% {
    top: 57px;
  }

  100% {
    top: 60px;
  }
}

@keyframes nose-move {
  0% {
    top: -124px;
  }

  80% {
    top: -124px;
  }

  85% {
    top: -126px;
  }

  90% {
    top: -124px;
  }

  95% {
    top: -126px;
  }

  100% {
    top: -124px;
  }
}

@keyframes blink {
  0% {
    background: rgb(255, 244, 182);
    border-bottom: none;
  }
  88% {
    background: rgb(255, 244, 182);
    border-bottom: none;
  }
  89% {
    background: #35373a;
    border-bottom: #121213;
  }
  95% {
    background: rgb(255, 244, 182);
    border-bottom: none;
  }
  96% {
    background: #35373a;
    border-bottom: #121213;
  }
  100% {
    background: rgb(255, 244, 182);
    border-bottom: none;
  }
}

@keyframes blink-iris {
  0% {
    background: rgb(18, 18, 19);
    border-bottom: none;
  }
  88% {
    background: rgb(18, 18, 19);
    border-bottom: none;
  }
  89% {
    background: #35373a;
    border-bottom: #121213;
  }
  95% {
    background: rgb(18, 18, 19);
    border-bottom: none;
  }
  96% {
    background: #35373a;
    border-bottom: #121213;
  }
  100% {
    background: rgb(18, 18, 19);
    border-bottom: none;
  }
}

.cat-1 {
  grid-column: 9;
  grid-row: 8;
  align-self: center;
  justify-self: end;
  margin-bottom: 40px;
  margin-right: 20px;
}
.cat-area {
  width: 150px;
  height: 150px;
}
.cat-face {
  position: relative;
  top: 60px;
  width: 90px;
  height: 60px;
  background: rgb(53, 55, 58);
  border-radius: 17% 32% 35% 35% / 0% 0% 50% 50%;
  border-bottom: 2px solid rgb(18, 18, 19);
  animation: face-move 3s 0s 3;
  z-index: 2;
}
.cat-ear-1 {
  position: relative;
  top: -60px;
  width: 0px;
  height: 0px;
  border-bottom: 60px rgb(53, 55, 58) solid;
  border-right: 30px solid transparent;
}
.cat-ear-2 {
  position: relative;
  top: -120px;
  left: 60px;
  width: 0px;
  height: 0px;
  border-bottom: 60px rgb(53, 55, 58) solid;
  border-left: 30px solid transparent;
}
.cat-eye-1 {
  position: relative;
  top: -108px;
  left: 10px;
  background: rgb(255, 244, 182);
  border-radius: 0% 60% 0% 50% / 0% 100% 0% 80%;
  width: 26px;
  height: 13px;
  animation: blink 10s 10s infinite;
}
.cat-eye-1::after {
  position: absolute;
  content: "";
  height: 10px;
  width: 10px;
  background: rgb(18, 18, 19);
  border-radius: 0% 100% 0% 100% / 0% 100% 0% 100%;
  transform: rotate(45deg);
  top: 2px;
  left: 8px;
  animation: blink-iris 10s 10s infinite;
}
.cat-eye-2 {
  position: relative;
  top: -121px;
  left: 54px;
  background: rgb(255, 244, 182);
  border-radius: 60% 0% 50% 0% / 100% 0% 80% 0%;
  width: 26px;
  height: 13px;
  animation: blink 10s 10s infinite;
}
.cat-eye-2::after {
  position: absolute;
  content: "";
  height: 10px;
  width: 10px;
  background: rgb(18, 18, 19);
  border-radius: 0% 100% 0% 100% / 0% 100% 0% 100%;
  transform: rotate(45deg);
  top: 2px;
  left: 8px;
  animation: blink-iris 10s 10s infinite;
}
.cat-nose {
  position: relative;
  background: transparent;
  height: 13px;
  width: 14px;
  border-radius: 3px;
  box-shadow: 0 2px 0 0 rgb(18, 18, 19);
  top: -124px;
  left: 38px;
  animation: nose-move 3s 0s 4;
}
.cat-whisker-1 {
  position: relative;
  width: 30px;
  height: 1px;
  background: rgb(107, 107, 107);
  top: -114px;
  left: -4px;
}
.cat-whisker-1::before {
  position: absolute;
  content: "";
  width: 30px;
  height: 1px;
  background: rgb(107, 107, 107);
  top: -6px;
  left: 0px;
  transform: rotate(6deg);
}
.cat-whisker-1::after {
  position: absolute;
  content: "";
  width: 30px;
  height: 1px;
  background: rgb(107, 107, 107);
  top: 6px;
  left: 1px;
  transform: rotate(-6deg);
}
.cat-whisker-2 {
  position: relative;
  width: 30px;
  height: 1px;
  background: rgb(107, 107, 107);
  top: -114px;
  left: 64px;
}
.cat-whisker-2::before {
  position: absolute;
  content: "";
  width: 30px;
  height: 1px;
  background: rgb(107, 107, 107);
  top: -6px;
  left: 0px;
  transform: rotate(-6deg);
}
.cat-whisker-2::after {
  position: absolute;
  content: "";
  width: 30px;
  height: 1px;
  background: rgb(107, 107, 107);
  top: 6px;
  left: -1px;
  transform: rotate(6deg);
}
.cat-mouth {
  position: absolute;
  width: 29px;
  height: 4px;
  background: transparent;
  border-radius: 4px;
  border-bottom: 1px solid rgb(41, 42, 44);
  top: 50px;
  left: 30px;
}
.cat-mouth::before {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-top: 6px solid rgb(255, 244, 182);
  top: 5px;
  left: 3px;
}
.cat-mouth::after {
  position: absolute;
  content: "";
  width: 0;
  height: 0;
  border-left: 2px solid transparent;
  border-right: 2px solid transparent;
  border-top: 6px solid rgb(255, 244, 182);
  top: 5px;
  left: 22px;
}
.cat-body {
  position: relative;
  width: 144px;
  height: 90px;
  border-radius: 30px;
  background: rgb(53, 55, 58);
  top: -2px;
  left: 6px;
  /*z-index: -12;*/
  border-bottom: 3px rgb(18, 18, 19) solid;
}
.cat-paw-1 {
  position: absolute;
  width: 30px;
  height: 12px;
  border: 0 solid transparent;
  border-bottom-color: transparent;
  border-bottom-style: solid;
  border-bottom-width: 0px;
  border-bottom: 2px solid rgb(18, 18, 19);
  border-radius: 0% 0% 0% 43% / 0% 0% 0% 100%;
  top: 79px;
  left: 19px;
}
.cat-paw-1::before {
  position: absolute;
  content: "";
  width: 30px;
  height: 12px;
  border: 0 solid transparent;
  border-bottom-color: transparent;
  border-bottom-style: solid;
  border-bottom-width: 0px;
  border-bottom: 2px solid rgb(18, 18, 19);
  border-radius: 0 0 0 14px;
  left: -4px;
}
.cat-paw-2 {
  position: absolute;
  width: 20px;
  height: 16px;
  border: 0 solid transparent;
  border-bottom-color: transparent;
  border-bottom-style: solid;
  border-bottom-width: 0px;
  border-bottom: 2px solid rgb(18, 18, 19);
  border-left: 1px solid rgb(18, 18, 19);
  border-radius: 0 0 0 14px;
  top: 74px;
  left: 24px;
}
.cat-paw-2::before {
  position: absolute;
  content: "";
  width: 20px;
  height: 20px;
  border: 0 solid transparent;
  border-bottom: 2px solid rgb(18, 18, 19);
  border-radius: 0 0 0 14px;
  left: 6px;
  top: -4px;
}
.cat-paw-2::after {
  position: absolute;
  content: "";
  width: 20px;
  height: 20px;
  border: 0 solid transparent;
  border-bottom: 2px solid rgb(18, 18, 19);
  border-radius: 0 0 0 14px;
  left: 12px;
  top: -4px;
}
.cat-tail {
  position: absolute;
  top: 69px;
  left: 60px;
  width: 50px;
  height: 20px;
  border-radius: 22% 0% 0% 22% / 50% 0% 0% 50%;
  border: rgb(18, 18, 19) solid 2px;
  border-right: 3px solid transparent;
  border-top: 1px solid rgb(18, 18, 19);
  border-left: 2px solid rgb(18, 18, 19);
}
.cat-tail::after {
  position: absolute;
  content: "";
  width: 20px;
  height: 20px;
  border-radius: 0% 100% 100% 0% / 100% 0% 100% 0%;
  background: transparent;
  border-bottom: 1px solid rgb(18, 18, 19);
  border-left: transparent;
  border-top: transparent;
  top: -21px;
  left: 48px;
}

/* Cabin CSS */
.cabin-area {
  grid-column: 8 / 9;
  grid-row: 6 / 8;
  width: 600px;
  height: 900px;
}
.cabin {
  position: absolute;
  width: 600px;
  height: 900px;
}
.left-roof {
  position: absolute;
  top: 90px;
  left: -20px;
  width: 320px;
  height: 300px;
  background: rgb(83, 57, 33);
  background-size: 30px 30px;
  background-image: linear-gradient(
    to right,
    rgb(58, 39, 22) 2px,
    transparent 1px
  ),
    linear-gradient(to bottom, rgb(58, 39, 22) 2px, transparent 5px);
  border: 2px solid rgb(58, 39, 22);
  border-radius: 10px;
  transform: skewY(-30deg);
  box-shadow: 0 8px 0 0 rgb(58, 39, 22);
}
.right-roof {
  position: absolute;
  top: 80px;
  left: 256px;
  width: 360px;
  height: 300px;
  background: rgb(83, 57, 33);
  background-size: 30px 30px;
  background-image: linear-gradient(
    to right,
    rgb(58, 39, 22) 2px,
    transparent 1px
  ),
    linear-gradient(to bottom, rgb(58, 39, 22) 2px, transparent 5px);
  border: 2px solid rgb(58, 39, 22);
  border-radius: 10px;
  transform: skewY(30deg);
  box-shadow: 0 8px 0 0 rgb(58, 39, 22);
}
.front-wall {
  position: absolute;
  height: 400px;
  width: 594px;
  top: 300px;
  background: rgb(109, 76, 46);
  background-size: 60px 60px;
  background-image: linear-gradient(
    to bottom,
    rgb(58, 39, 22) 2px,
    transparent 1px
  );
  border-radius: 4px;
  border: 3px solid rgb(94, 65, 38);
}
.front-door {
  position: absolute;
  top: 500px;
  left: 240px;
  height: 200px;
  width: 120px;
  background: rgb(129, 105, 82);
  background-size: 30px 30px;
  background-image: linear-gradient(
    to right,
    rgb(58, 39, 22) 2px,
    transparent 1px
  );
  border: 3px solid rgb(58, 39, 22);
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.front-door::before {
  position: absolute;
  content: "";
  top: 100px;
  left: 10px;
  width: 10px;
  height: 10px;
  background: rgb(129, 105, 82);
  border: 3px solid rgb(58, 39, 22);
  border-radius: 50%;
  box-shadow: 0 -4px 0 0 rgb(58, 39, 22);
}
.window {
  height: 100px;
  width: 100px;
  background: rgb(129, 105, 82);
  border: 3px solid rgb(58, 39, 22);
  border-radius: 3px;
}
.left-window {
  position: absolute;
  top: 500px;
  left: 60px;
}
.right-window {
  position: absolute;
  top: 500px;
  left: 430px;
}
.window-pain {
  height: 35px;
  width: 35px;
  background: rgb(71, 75, 72);
  border: 2px solid rgb(58, 39, 22);
  border-radius: 3px;
}
.pain-1 {
  position: absolute;
  top: 5px;
  left: 5px;
}
.pain-2 {
  position: absolute;
  top: 5px;
  left: 55px;
}
.pain-3 {
  position: absolute;
  top: 55px;
  left: 5px;
}
.pain-4 {
  position: absolute;
  top: 55px;
  left: 55px;
}
.front-porch {
  position: absolute;
  top: 702px;
  width: 594px;
  height: 110px;
  background: rgb(156, 133, 71);
  background-size: 20px 20px;
  background-image: linear-gradient(
    to right,
    rgb(119, 101, 50) 2px,
    transparent 1px
  );
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border: 3px solid rgb(94, 65, 38);
  box-shadow: 0 4px 0 0 rgb(94, 65, 38);
}
.left-base {
  position: absolute;
  top: 850px;
  left: 20px;
  width: 80px;
  height: 20px;
  background: rgb(122, 115, 115);
  border-radius: 23% 17% 55% 18% / 50% 51% 37% 41%;
  box-shadow: 0 3px 0 0 rgb(88, 81, 81);
}
.left-base::before {
  position: absolute;
  content: "";
  top: -16px;
  left: 0px;
  width: 80px;
  height: 20px;
  background: rgb(122, 115, 115);
  border-radius: 16% 34% 15% 18% / 50% 51% 37% 29%;
  box-shadow: 0 3px 0 0 rgb(88, 81, 81);
}
.left-base::after {
  position: absolute;
  content: "";
  top: -34px;
  left: 0px;
  width: 80px;
  height: 20px;
  background: rgb(122, 115, 115);
  border-radius: 52% 34% 41% 46% / 50% 51% 37% 42%;
  box-shadow: 0 3px 0 0 rgb(88, 81, 81);
}
.right-base {
  position: absolute;
  top: 850px;
  left: 500px;
  width: 80px;
  height: 20px;
  background: rgb(122, 115, 115);
  border-radius: 32% 34% 23% 26% / 50% 51% 37% 42%;
  box-shadow: 0 3px 0 0 rgb(88, 81, 81);
}
.right-base::before {
  position: absolute;
  content: "";
  top: -16px;
  left: 0px;
  width: 80px;
  height: 20px;
  background: rgb(122, 115, 115);
  border-radius: 32% 34% 23% 40% / 30% 51% 65% 25%;
  box-shadow: 0 3px 0 0 rgb(88, 81, 81);
}
.right-base::after {
  position: absolute;
  content: "";
  top: -34px;
  left: 0px;
  width: 80px;
  height: 20px;
  background: rgb(122, 115, 115);
  border-radius: 52% 34% 41% 46% / 50% 51% 37% 42%;
  box-shadow: 0 3px 0 0 rgb(88, 81, 81);
}
.stairs {
  position: absolute;
  top: 790px;
  left: 230px;
  width: 150px;
  height: 100px;
}
.step-1 {
  position: absolute;
  width: 144px;
  height: 50px;
  background: rgb(156, 133, 71);
  background-size: 20px 20px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 3px solid rgb(94, 65, 38);
  box-shadow: 0 4px 0 0 rgb(94, 65, 38);
}
.step-2 {
  position: absolute;
  top: 26px;
  width: 144px;
  height: 50px;
  background: rgb(156, 133, 71);
  background-size: 20px 20px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 3px solid rgb(94, 65, 38);
  box-shadow: 0 4px 0 0 rgb(94, 65, 38);
}
.step-2::before {
  position: absolute;
  content: "";
  width: 14px;
  height: 16px;
  top: 56px;
  left: 10px;
  background: rgb(70, 48, 27);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.step-2::after {
  position: absolute;
  content: "";
  width: 14px;
  height: 16px;
  top: 56px;
  left: 120px;
  background: rgb(70, 48, 27);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.wall-dove-tail-left {
  position: absolute;
  height: 64px;
  top: 473px;
  left: 2px;
  border-right: 20px solid rgb(58, 39, 22);
  border-top: 10px solid rgb(109, 76, 46);
  border-bottom: 10px solid rgb(109, 76, 46);
}
.wall-dove-tail-left::before {
  position: absolute;
  content: "";
  height: 64px;
  top: 113px;
  left: 0px;
  border-right: 20px solid rgb(58, 39, 22);
  border-top: 10px solid rgb(109, 76, 46);
  border-bottom: 10px solid rgb(109, 76, 46);
}
.wall-dove-tail-right {
  position: absolute;
  height: 64px;
  top: 473px;
  left: 578px;
  border-left: 20px solid rgb(58, 39, 22);
  border-top: 10px solid rgb(109, 76, 46);
  border-bottom: 10px solid rgb(109, 76, 46);
}
.wall-dove-tail-right::before {
  position: absolute;
  content: "";
  height: 64px;
  top: 113px;
  left: -21px;
  border-left: 20px solid rgb(58, 39, 22);
  border-top: 10px solid rgb(109, 76, 46);
  border-bottom: 10px solid rgb(109, 76, 46);
}
.chimney {
  position: absolute;
  top: 10px;
  left: 460px;
  height: 200px;
  width: 100px;
  background-image: linear-gradient(
    to right,
    rgb(78, 44, 44) 90%,
    rgb(65, 35, 35) 100%
  );
  border-radius: 20px;
}
.chimney::before {
  position: absolute;
  content: "";
  top: -40px;
  left: -5px;
  height: 60px;
  width: 110px;
  background: rgb(78, 44, 44);
  border-radius: 10% 10% 10% 10% / 50% 50% 50% 50%;
  box-shadow: 0 20px 0 0 rgb(65, 35, 35);
}
.chimney::after {
  position: absolute;
  content: "";
  top: -25px;
  left: 10px;
  height: 30px;
  width: 80px;
  background: rgb(44, 23, 23);
  border-radius: 8% 8% 8% 8% / 50% 50% 50% 50%;
}

/* River Rocks CSS */
.rocks-area {
  grid-column: 6/7;
  grid-row: 5/6;
}
.river-rocks {
  position: absolute;
  width: 300px;
  height: 600px;
}
.river-rock-1 {
  position: absolute;
  top: 80px;
  left: 30px;
  height: 50px;
  width: 110px;
  background-image: linear-gradient(
    rgba(0, 119, 255, 0.274),
    rgba(26, 46, 70, 0.596)
  ),
    linear-gradient(rgb(112, 112, 112), rgb(112, 112, 112));
  border-radius: 48% 47% 51% 44% / 70% 67% 17% 15%;
  z-index: 2;
}
.river-rock-1::after {
  position: absolute;
  content: "";
  height: 20px;
  width: 94px;
  left: 8px;
  background: rgb(112, 112, 112);
  border-radius: 50% 50% 50% 50% / 87% 87% 11% 11%;
}
.river-rock-2 {
  position: absolute;
  top: 180px;
  left: 80px;
  height: 40px;
  width: 90px;
  background-image: linear-gradient(
    rgba(0, 119, 255, 0.274),
    rgba(26, 46, 70, 0.596)
  ),
    linear-gradient(rgb(112, 112, 112), rgb(112, 112, 112));
  border-radius: 48% 47% 51% 44% / 70% 67% 17% 15%;
  z-index: 2;
}
.river-rock-2::after {
  position: absolute;
  content: "";
  height: 14px;
  width: 74px;
  left: 8px;
  background: rgb(112, 112, 112);
  border-radius: 50% 50% 50% 50% / 87% 87% 11% 11%;
}
.river-rock-3 {
  position: absolute;
  top: 290px;
  left: 200px;
  height: 40px;
  width: 70px;
  background-image: linear-gradient(
    rgba(0, 119, 255, 0.274),
    rgba(26, 46, 70, 0.596)
  ),
    linear-gradient(rgb(112, 112, 112), rgb(112, 112, 112));
  border-radius: 48% 47% 51% 44% / 70% 67% 17% 15%;
  z-index: 2;
}
.river-rock-3::after {
  position: absolute;
  content: "";
  height: 10px;
  width: 50px;
  left: 10px;
  background: rgb(112, 112, 112);
  border-radius: 50% 50% 50% 50% / 87% 87% 11% 11%;
}

/* CSS Tree Alt 1 */
.tree-alt-1-tree-area {
  width: 300px;
  height: 400px;
  display: flex;
  justify-content: center;
}
.tree-alt-1-tree {
  position: absolute;
  width: 300px;
  height: 400px;
  display: flex;
  justify-content: center;
  cursor: pointer;
}
.tree-alt-1-trunk {
  position: absolute;
  bottom: 20px;
  background-image: linear-gradient(
    to right,
    rgb(92, 47, 47) 0%,
    rgb(92, 47, 47) 65%,
    rgb(71, 37, 37) 85%
  );
  width: 50px;
  height: 200px;
  border-radius: 10% 10% 49% 50% / 0% 0% 5% 5%;
}
.tree-alt-1-trunk::before {
  position: absolute;
  content: "";
  bottom: 26px;
  left: -8px;
  background-image: linear-gradient(
    to bottom,
    rgb(100, 54, 54) 60%,
    rgb(77, 45, 45) 90%
  );
  height: 26px;
  width: 20px;
  border-radius: 35% 35% 35% 35% / 50% 50% 50% 50%;
}
.tree-alt-1-trunk::after {
  position: absolute;
  content: "";
  bottom: 26px;
  left: -8px;
  background: rgb(151, 122, 98);
  height: 26px;
  width: 12px;
  border-radius: 50%;
}
.tree-alt-1-bottom {
  position: absolute;
  bottom: 80px;
  background-color: rgb(60, 136, 113);
  border-radius: 46% 36% 50% 27% / 45% 37% 57% 38%;
  width: 280px;
  height: 130px;
  border-bottom: 4px solid rgb(51, 117, 97);
}
.tree-alt-1-bottom::after {
  position: absolute;
  content: "";
  bottom: -14px;
  left: 109px;
  width: 156px;
  height: 54px;
  background-color: rgb(60, 136, 113);
  border-radius: 36% 38% 34% 23% / 13% 2% 63% 31%;
  border-bottom: 4px solid rgb(51, 117, 97);
}
.tree-alt-1-middle {
  position: absolute;
  bottom: 140px;
  background-color: rgb(60, 136, 113);
  border-radius: 55% 57% 40% 23% / 64% 65% 70% 68%;
  width: 260px;
  height: 140px;
  border-bottom: 4px solid rgb(51, 117, 97);
}
.tree-alt-1-middle::after {
  position: absolute;
  content: "";
  bottom: -30px;
  left: 20px;
  width: 160px;
  height: 84px;
  background-color: rgb(60, 136, 113);
  border-radius: 36% 38% 50% 39% / 38% 34% 45% 41%;
  border-bottom: 4px solid rgb(51, 117, 97);
}
.tree-alt-1-top {
  position: absolute;
  bottom: 240px;
  width: 240px;
  height: 130px;
  background-color: rgb(60, 136, 113);
  border-radius: 48% 31% 17% 27% / 67% 51% 23% 25%;
  border-bottom: 4px solid rgb(51, 117, 97);
}
.tree-alt-1-top::after {
  position: absolute;
  content: "";
  bottom: -30px;
  left: 70px;
  width: 110px;
  height: 84px;
  background-color: rgb(60, 136, 113);
  border-radius: 36% 38% 50% 39% / 38% 34% 45% 41%;
  border-bottom: 4px solid rgb(51, 117, 97);
}

/* CSS Tree Alt 2 */
.tree-alt-2-tree-area {
  width: 300px;
  height: 400px;
  display: flex;
  justify-content: center;
}
.tree-alt-2-tree {
  position: absolute;
  width: 300px;
  height: 400px;
  display: flex;
  justify-content: center;
  cursor: pointer;
}
.tree-alt-2-trunk {
  position: absolute;
  bottom: 20px;
  background-image: linear-gradient(
    to right,
    rgb(92, 47, 47) 0%,
    rgb(92, 47, 47) 65%,
    rgb(71, 37, 37) 85%
  );
  width: 50px;
  height: 200px;
  border-radius: 10% 10% 49% 50% / 0% 0% 5% 5%;
}
.tree-alt-2-trunk::before {
  position: absolute;
  content: "";
  bottom: 26px;
  left: 32px;
  background-image: linear-gradient(
    to bottom,
    rgb(100, 54, 54) 60%,
    rgb(77, 45, 45) 90%
  );
  height: 26px;
  width: 20px;
  border-radius: 35% 35% 35% 35% / 50% 50% 50% 50%;
}
.tree-alt-2-trunk::after {
  position: absolute;
  content: "";
  bottom: 26px;
  left: 42px;
  background: rgb(151, 122, 98);
  height: 26px;
  width: 12px;
  border-radius: 50%;
}
.tree-alt-2-bottom {
  position: absolute;
  bottom: 80px;
  background-color: rgb(60, 136, 113);
  border-radius: 46% 36% 50% 27% / 45% 37% 57% 38%;
  width: 280px;
  height: 130px;
  border-bottom: 4px solid rgb(51, 117, 97);
}
.tree-alt-2-bottom::after {
  position: absolute;
  content: "";
  bottom: -14px;
  left: 89px;
  width: 156px;
  height: 54px;
  background-color: rgb(60, 136, 113);
  border-radius: 36% 38% 34% 23% / 13% 2% 63% 31%;
  border-bottom: 4px solid rgb(51, 117, 97);
}
.tree-alt-2-middle {
  position: absolute;
  bottom: 140px;
  background-color: rgb(60, 136, 113);
  border-radius: 18% 22% 16% 16% / 59% 57% 31% 37%;
  width: 260px;
  height: 140px;
  border-bottom: 4px solid rgb(51, 117, 97);
}
.tree-alt-2-middle::after {
  position: absolute;
  content: "";
  bottom: -30px;
  left: 20px;
  width: 160px;
  height: 84px;
  background-color: rgb(60, 136, 113);
  border-radius: 36% 38% 50% 39% / 38% 34% 45% 41%;
  border-bottom: 4px solid rgb(51, 117, 97);
}
.tree-alt-2-top {
  position: absolute;
  bottom: 240px;
  width: 240px;
  height: 130px;
  background-color: rgb(60, 136, 113);
  border-radius: 37% 53% 32% 50% / 73% 64% 31% 25%;
  border-bottom: 4px solid rgb(51, 117, 97);
}
.tree-alt-2-top::after {
  position: absolute;
  content: "";
  bottom: -30px;
  left: 70px;
  width: 110px;
  height: 84px;
  background-color: rgb(60, 136, 113);
  border-radius: 36% 38% 50% 39% / 38% 34% 45% 41%;
  border-bottom: 4px solid rgb(51, 117, 97);
}

/* Tree Placement */
.alt-tree-1 {
  grid-column: 3;
  grid-row: 1;
  margin-left: -200px;
}
.alt-tree-2 {
  grid-column: 9;
  grid-row: 1;
}
.alt-tree-3 {
  grid-column: 6;
  grid-row: 8;
  margin-top: -100px;
}
.alt-tree-4 {
  grid-column: 2;
  grid-row: 9;
}
.alt-tree-5 {
  grid-column: 5;
  grid-row: 9;
}
.alt-tree-6 {
  grid-column: 1;
  grid-row: 4;
}
.alt-tree-7 {
  grid-column: 2;
  grid-row: 5;
}
.alt-tree-8 {
  grid-column: 10;
  grid-row: 10;
  margin-top: -100px;
}
.alt-tree-9 {
  grid-column: 5;
  grid-row: 5;
  margin-top: 80px;
  margin-left: 50px;
}
.alt-tree-10 {
  grid-column: 7;
  grid-row: 5;
  margin-top: -150px;
  margin-left: 100px;
}
.alt-tree-11 {
  grid-column: 8;
  grid-row: 9;
  margin-top: -240px;
  margin-left: -210px;
}
.alt-tree-12 {
  grid-column: 7;
  grid-row: 2;
  margin-top: -80px;
}
.alt-tree-13 {
  grid-column: 7;
  grid-row: 6;
  margin-top: 40px;
  margin-left: -120px;
}
.alt-tree-14 {
  grid-column: 5;
  grid-row: 4;
  margin-top: -120px;
  margin-left: -88px;
}
.alt-tree-15 {
  grid-column: 7;
  grid-row: 9;
  margin-top: -100px;
  margin-left: -160px;
}
.alt-tree-16 {
  grid-column: 5;
  grid-row: 1;
  margin-top: 80px;
}
.alt-tree-17 {
  grid-column: 3;
  grid-row: 10;
  margin-top: -120px;
  margin-left: -80px;
}
.alt-tree-18 {
  grid-column: 2;
  grid-row: 3;
  margin-top: -80px;
  margin-left: -100px;
}
.alt-tree-19 {
  grid-column: 2;
  grid-row: 7;
  margin-top: 80px;
  margin-left: -200px;
}
.alt-tree-20 {
  grid-column: 8;
  grid-row: 3;
  margin-top: -120px;
  margin-left: -80px;
}

/* Welcome Sign CSS */
.welcome-sign-area {
  grid-column: 1;
  grid-row: 1;
}
.welcome-sign {
  position: absolute;
  top: 120px;
  left: 20px;
  width: 286px;
  height: 230px;
  background: rgb(156, 133, 71);
  border: 2px solid rgb(58, 39, 22);
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 -8px 0 0 rgb(58, 39, 22);
}
.welcome-sign::before {
  position: absolute;
  content: "";
  width: 14px;
  height: 30px;
  top: 262px;
  left: 10px;
  background: rgb(70, 48, 27);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.welcome-sign::after {
  position: absolute;
  content: "";
  width: 14px;
  height: 30px;
  top: 262px;
  left: 290px;
  background: rgb(70, 48, 27);
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
}
.welcome-sign h1 {
  font-size: 1.8em;
  font-family: "Comfortaa", cursive;
  line-height: 1.4em;
  color: rgb(70, 48, 27);
}
.welcome-sign p {
  font-family: "Comfortaa", cursive;
  color: rgb(70, 48, 27);
  font-weight: bold;
}