body {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-size: 18px;
  background: black;
  font-family: "Open Sans", sans-serif;
  color: #2b2b33;
}

.forest {
  width: 4800px;
  height: 4800px;
  display: grid;
  grid-template-columns: 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px;
  grid-template-rows: 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px 300px;
  background: #298146;
}

.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, #5c2f2f 0%, #5c2f2f 65%, #472525 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, #643636 60%, #4d2d2d 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: #977a62;
  height: 26px;
  width: 12px;
  border-radius: 50%;
}

.bottom {
  position: absolute;
  bottom: 80px;
  background-color: #296339;
  border-radius: 46% 36% 50% 27% / 45% 37% 57% 38%;
  width: 280px;
  height: 130px;
  border: 2px solid #184425;
  border-bottom: 4px solid #184425;
}

.bottom::after {
  position: absolute;
  content: "";
  bottom: -14px;
  left: 69px;
  width: 156px;
  height: 54px;
  background-color: #296339;
  border-radius: 36% 38% 34% 23% / 13% 2% 63% 31%;
  border-bottom: 4px solid #184425;
}

.middle {
  position: absolute;
  bottom: 140px;
  background-color: #296339;
  border-radius: 55% 57% 40% 23% / 64% 65% 70% 68%;
  width: 260px;
  height: 140px;
  border: 2px solid #184425;
  border-bottom: 4px solid #184425;
}

.middle::after {
  position: absolute;
  content: "";
  bottom: -30px;
  left: 50px;
  width: 160px;
  height: 84px;
  background-color: #296339;
  border-radius: 36% 38% 50% 39% / 38% 34% 45% 41%;
  border-bottom: 4px solid #184425;
}

.top {
  position: absolute;
  bottom: 240px;
  width: 240px;
  height: 130px;
  background-color: #296339;
  border-radius: 48% 31% 17% 27% / 67% 51% 23% 25%;
  border: 2px solid #184425;
  border-bottom: 4px solid #184425;
}

.top::after {
  position: absolute;
  content: "";
  bottom: -30px;
  left: 100px;
  width: 110px;
  height: 84px;
  background-color: #296339;
  border-radius: 36% 38% 50% 39% / 38% 34% 45% 41%;
  border-bottom: 4px solid #184425;
}

.apple {
  position: relative;
  background-color: #b32e17;
  width: 40px;
  height: 38px;
  border-radius: 55% 57% 40% 42% / 64% 65% 70% 68%;
  border-left: 3px solid #b44c39;
  border-right: 1px solid #7a281a;
}

.apple::after {
  position: absolute;
  content: "";
  width: 1px;
  height: 4px;
  background: #54615e;
  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: #296339;
  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: #184425;
  transform: rotate(45deg);
  left: 7px;
  top: -4px;
  border-radius: 50% 50% 50% 50% / 85% 85% 15% 15%;
}

.leaf-dropped {
  bottom: 0px;
}

.river-bank-upper {
  grid-column: 7 / 12;
  grid-row: 4;
  width: 100%;
  height: 300px;
  background-image: linear-gradient(to bottom, rgba(73, 47, 41, 0.534) 20%, #492f29 40%), repeating-linear-gradient(to right, #492f29 60px, #4b2c25 90px, #5e382f 120px, #492f29 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%, #492f29 40%), repeating-linear-gradient(to right, #492f29 60px, #4b2c25 90px, #5e382f 120px, #492f29 150px);
}

.river {
  margin-top: 40px;
  background: rgba(56, 129, 255, 0.61);
  height: 260px;
  width: 100%;
}

.river-inner-corner {
  grid-column: 7;
  grid-row: 5;
  background: #3e61ac;
}

.river-inner-corner-top {
  grid-column: 7;
  grid-row: 5;
  height: 300px;
  width: 300px;
  background: #298146;
  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%, #492f29 40%), repeating-linear-gradient(to right, #492f29 60px, #4b2c25 90px, #5e382f 120px, #492f29 150px);
}

.river-outer-corner-top {
  margin-top: 40px;
  height: 260px;
  width: 300px;
  background: rgba(56, 129, 255, 0.61);
  border-top-left-radius: 100%;
}

.river-center {
  grid-column: 6;
  grid-row: 5/7;
  background: #3e61ac;
}

.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: #298146;
  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: #3e61ac;
}

.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: #3e61ac;
}

/* New River */
.river-outer-corner-3 {
  grid-column: 12;
  grid-row: 4;
  border-top-right-radius: 300px;
  background-image: linear-gradient(to bottom, rgba(73, 47, 41, 0.534) 20%, #492f29 40%), repeating-linear-gradient(to right, #492f29 60px, #4b2c25 90px, #5e382f 120px, #492f29 150px);
}

.river-outer-corner-top-3 {
  margin-top: 40px;
  height: 260px;
  width: 300px;
  background: rgba(56, 129, 255, 0.61);
  border-top-right-radius: 100%;
}

.river-inner-corner-4 {
  grid-column: 11;
  grid-row: 5;
  background: #3e61ac;
}

.river-inner-corner-top-4 {
  grid-column: 11;
  grid-row: 5;
  height: 300px;
  width: 300px;
  background: #298146;
  border-top-right-radius: 80px;
}

.river-center-2 {
  grid-column: 12;
  grid-row: 5/14;
  background: #3e61ac;
}

.river-bank-lower-2 {
  grid-column: 1 / 12;
  grid-row: 14;
  width: 100%;
  height: 300px;
  background-image: linear-gradient(to bottom, rgba(73, 47, 41, 0.534) 20%, #492f29 40%), repeating-linear-gradient(to right, #492f29 60px, #4b2c25 90px, #5e382f 120px, #492f29 150px);
}

.river-outer-corner-4 {
  grid-column: 12;
  grid-row: 14;
  border-bottom-right-radius: 300px;
  background: #3e61ac;
}

.river-inner-corner-5 {
  grid-column: 11;
  grid-row: 13;
  background: #52322b;
}

.river-inner-corner-top-5 {
  height: 300px;
  width: 300px;
  background: #298146;
  border-bottom-right-radius: 80px;
}

.river-inner-corner-top-6 {
  grid-column: 11;
  grid-row: 14;
  justify-self: end;
  align-self: start;
  height: 40px;
  width: 40px;
  background: #3e61ac;
}

.river-inner-corner-top-6-inner {
  height: 40px;
  width: 40px;
  background: #52322b;
  border-bottom-right-radius: 80px;
}

.river-bank-lower-3 {
  grid-column: 13 / 17;
  grid-row: 9;
  width: 100%;
  height: 300px;
  background-image: linear-gradient(to bottom, rgba(73, 47, 41, 0.534) 20%, #492f29 40%), repeating-linear-gradient(to right, #492f29 60px, #4b2c25 90px, #5e382f 120px, #492f29 150px);
}

.river-inner-corner-7 {
  grid-column: 13;
  grid-row: 8;
  background: #52322b;
}

.river-inner-corner-top-7 {
  height: 300px;
  width: 300px;
  background: #298146;
  border-bottom-left-radius: 80px;
}

.river-inner-corner-top-8 {
  grid-column: 13;
  grid-row: 9;
  justify-self: start;
  align-self: start;
  height: 40px;
  width: 40px;
  background: #3e61ac;
}

.river-inner-corner-top-8-inner {
  height: 40px;
  width: 40px;
  background: #52322b;
  border-bottom-left-radius: 80px;
}

.river-inner-corner-9 {
  grid-column: 13;
  grid-row: 10;
  background: #3e61ac;
}

.river-inner-corner-top-9 {
  grid-column: 11;
  grid-row: 5;
  height: 300px;
  width: 300px;
  background: #298146;
  border-top-left-radius: 80px;
}

/* Bridge */
.bridge-1 {
  grid-column: 9;
  grid-row: 3 / 6;
}

.bridge-2 {
  grid-column: 3;
  grid-row: 6 / 9;
}

.bridge-3 {
  grid-column: 10;
  grid-row: 13 / 16;
}

.bridge-4 {
  grid-column: 11/14;
  grid-row: 7;
}

.bridge {
  width: 260px;
  height: 416px;
  background: #9c8547;
  background-image: repeating-linear-gradient(to bottom, #9c8547 30px, #5e4126 30px 32px, #9c8547 32px 62px);
  border: 1px solid #5e4126;
  box-shadow: 0 8px 0 0 #5e4126, 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: #9c8547;
  border: 1px solid #5e4126;
  box-shadow: 0 8px 0 0 #5e4126, 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, #5e4126 70%, #3f2a17 100%);
  border-radius: 0 0 6px 6px;
  top: 409px;
  left: 5px;
}

.right-rail {
  position: relative;
  width: 30px;
  height: 400px;
  background: #9c8547;
  border: 1px solid #5e4126;
  box-shadow: 0 8px 0 0 #5e4126, 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, #5e4126 70%, #3f2a17 100%);
  border-radius: 0 0 6px 6px;
  top: 409px;
  left: 5px;
}

/* Alt Bridge */
.bridge-alt {
  width: 461px;
  height: 200px;
  background: #9c8547;
  background-image: repeating-linear-gradient(to right, #9c8547 30px, #5e4126 30px 32px, #9c8547 32px 62px);
  border: 1px solid #5e4126;
  box-shadow: 0 8px 0 0 #5e4126, 3px 8px 5px 3px rgba(0, 0, 0, 0.158);
  border-radius: 10px;
  justify-self: center;
  align-self: center;
  z-index: 100;
}

.top-rail {
  position: relative;
  width: 440px;
  height: 30px;
  background: #9c8547;
  border: 1px solid #5e4126;
  box-shadow: 0 8px 0 0 #5e4126, 5px 60px 5px 3px rgba(0, 0, 0, 0.158);
  border-radius: 8px;
  left: 8px;
  top: -50px;
}

.top-rail::after {
  position: absolute;
  content: "";
  width: 20px;
  height: 50px;
  background: linear-gradient(to right, #5e4126 70%, #3f2a17 100%);
  border-radius: 0 0 6px 6px;
  top: 38px;
  left: 25px;
}

.top-rail::before {
  position: absolute;
  content: "";
  width: 20px;
  height: 50px;
  background: linear-gradient(to right, #5e4126 70%, #3f2a17 100%);
  border-radius: 0 0 6px 6px;
  top: 38px;
  left: 395px;
}

.bottom-rail {
  position: relative;
  width: 440px;
  height: 30px;
  background: #9c8547;
  border: 1px solid #5e4126;
  box-shadow: 0 8px 0 0 #5e4126, 5px 60px 5px 3px rgba(0, 0, 0, 0.158);
  border-radius: 8px;
  left: 8px;
  top: 70px;
}

.bottom-rail::after {
  position: absolute;
  content: "";
  width: 20px;
  height: 50px;
  background: linear-gradient(to right, #5e4126 70%, #3f2a17 100%);
  border-radius: 0 0 6px 6px;
  top: 38px;
  left: 25px;
}

.bottom-rail::before {
  position: absolute;
  content: "";
  width: 20px;
  height: 50px;
  background: linear-gradient(to right, #5e4126 70%, #3f2a17 100%);
  border-radius: 0 0 6px 6px;
  top: 38px;
  left: 395px;
}

.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%, #492f29 40%), repeating-linear-gradient(to right, #492f29 60px, #4b2c25 90px, #5e382f 120px, #492f29 150px);
  border-radius: 38% 14% 29% 30% / 42% 21% 31% 31%;
}

.pond::after {
  position: absolute;
  content: "";
  width: 500px;
  top: 40px;
  height: 260px;
  background: rgba(56, 129, 255, 0.61);
  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: #298a29;
  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: #298a29;
  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: #707070;
  border-radius: 57% 33% 29% 32% / 66% 58% 14% 17%;
  box-shadow: 0 3px 0 0 #5f5f5f;
}

.rock-2 {
  position: absolute;
  left: 30px;
  height: 50px;
  width: 110px;
  background-image: linear-gradient(rgba(0, 119, 255, 0.575), rgba(35, 82, 139, 0.596)), linear-gradient(#707070, #707070);
  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: #707070;
  border-radius: 50% 50% 50% 50% / 87% 87% 11% 11%;
}

@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: #fff4b6;
    border-bottom: none;
  }
  88% {
    background: #fff4b6;
    border-bottom: none;
  }
  89% {
    background: #35373a;
    border-bottom: #121213;
  }
  95% {
    background: #fff4b6;
    border-bottom: none;
  }
  96% {
    background: #35373a;
    border-bottom: #121213;
  }
  100% {
    background: #fff4b6;
    border-bottom: none;
  }
}

@keyframes blink-iris {
  0% {
    background: #121213;
    border-bottom: none;
  }
  88% {
    background: #121213;
    border-bottom: none;
  }
  89% {
    background: #35373a;
    border-bottom: #121213;
  }
  95% {
    background: #121213;
    border-bottom: none;
  }
  96% {
    background: #35373a;
    border-bottom: #121213;
  }
  100% {
    background: #121213;
    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: #35373a;
  border-radius: 17% 32% 35% 35% / 0% 0% 50% 50%;
  border-bottom: 2px solid #121213;
  animation: face-move 3s 0s 3;
  z-index: 2;
}

.cat-ear-1 {
  position: relative;
  top: -60px;
  width: 0px;
  height: 0px;
  border-bottom: 60px #35373a solid;
  border-right: 30px solid transparent;
}

.cat-ear-2 {
  position: relative;
  top: -120px;
  left: 60px;
  width: 0px;
  height: 0px;
  border-bottom: 60px #35373a solid;
  border-left: 30px solid transparent;
}

.cat-eye-1 {
  position: relative;
  top: -108px;
  left: 10px;
  background: #fff4b6;
  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: #121213;
  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: #fff4b6;
  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: #121213;
  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 #121213;
  top: -124px;
  left: 38px;
  animation: nose-move 3s 0s 4;
}

.cat-whisker-1 {
  position: relative;
  width: 30px;
  height: 1px;
  background: #6b6b6b;
  top: -114px;
  left: -4px;
}

.cat-whisker-1::before {
  position: absolute;
  content: "";
  width: 30px;
  height: 1px;
  background: #6b6b6b;
  top: -6px;
  left: 0px;
  transform: rotate(6deg);
}

.cat-whisker-1::after {
  position: absolute;
  content: "";
  width: 30px;
  height: 1px;
  background: #6b6b6b;
  top: 6px;
  left: 1px;
  transform: rotate(-6deg);
}

.cat-whisker-2 {
  position: relative;
  width: 30px;
  height: 1px;
  background: #6b6b6b;
  top: -114px;
  left: 64px;
}

.cat-whisker-2::before {
  position: absolute;
  content: "";
  width: 30px;
  height: 1px;
  background: #6b6b6b;
  top: -6px;
  left: 0px;
  transform: rotate(-6deg);
}

.cat-whisker-2::after {
  position: absolute;
  content: "";
  width: 30px;
  height: 1px;
  background: #6b6b6b;
  top: 6px;
  left: -1px;
  transform: rotate(6deg);
}

.cat-mouth {
  position: absolute;
  width: 29px;
  height: 4px;
  background: transparent;
  border-radius: 4px;
  border-bottom: 1px solid #292a2c;
  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 #fff4b6;
  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 #fff4b6;
  top: 5px;
  left: 22px;
}

.cat-body {
  position: relative;
  width: 144px;
  height: 90px;
  border-radius: 30px;
  background: #35373a;
  top: -2px;
  left: 6px;
  /*z-index: -12;*/
  border-bottom: 3px #121213 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 #121213;
  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 #121213;
  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 #121213;
  border-left: 1px solid #121213;
  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 #121213;
  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 #121213;
  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: #121213 solid 2px;
  border-right: 3px solid transparent;
  border-top: 1px solid #121213;
  border-left: 2px solid #121213;
}

.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 #121213;
  border-left: transparent;
  border-top: transparent;
  top: -21px;
  left: 48px;
}

@keyframes tailWag {
  0% {
    transform: translateY(0);
  }
  25% {
    transform: translateY(-3px);
  }
  50% {
    transform: translateY(0);
  }
  75% {
    transform: translateY(-3px);
  }
  100% {
    transform: translateY(0);
  }
}

@keyframes dogBlink {
  0% {
    height: 10px;
    border-radius: 50% 50% 0% 29% / 100% 100% 10% 0%;
  }
  80% {
    height: 10px;
    border-radius: 50% 50% 0% 29% / 100% 100% 10% 0%;
  }
  90% {
    height: 20px;
    border-radius: 50%;
  }
  100% {
    height: 10px;
    border-radius: 50% 50% 0% 29% / 100% 100% 10% 0%;
  }
}

.dog-1 {
  grid-column: 5;
  grid-row: 6;
  align-self: center;
  justify-self: start;
  margin-top: 60px;
  margin-left: -60px;
}

.dog-area {
  width: 150px;
  height: 150px;
}

.dog {
  position: absolute;
}

.dog-face {
  position: absolute;
  background: #d4b037;
  border-radius: 25% 30% 20% 0% / 25% 30% 20% 10%;
  width: 90px;
  height: 90px;
  left: 30px;
}

.dog-nose {
  position: absolute;
  background: #d4b037;
  border-radius: 0% 0% 0% 50% / 0% 0% 0% 50%;
  height: 60px;
  width: 60px;
  top: 30px;
  border-bottom: 2px solid #524000;
}

.dog-nose::before {
  position: absolute;
  content: "";
  border-radius: 57% 17% 13% 71% / 34% 49% 49% 61%;
  background: #524000;
  height: 30px;
  width: 15px;
  left: -12px;
}

.dog-nose::after {
  position: absolute;
  content: "";
  border-radius: 0% 100% 0% 0% / 0% 100% 0% 0%;
  height: 2px;
  width: 6px;
  top: 60px;
  left: 60px;
  background: #524000;
}

.dog-body {
  position: absolute;
  content: "";
  width: 100px;
  height: 75px;
  border-radius: 10% 30% 15% 15% / 0% 30% 20% 15%;
  background: #d4b037;
  top: 30px;
  left: 50px;
  border-bottom: 2px solid #524000;
  border-right: 2px solid #524000;
}

.dog-front-paw {
  position: absolute;
  width: 60px;
  height: 24px;
  left: 60px;
  top: 91px;
  border-radius: 54% 0% 25% 17% / 70% 10% 50% 31%;
  background: #d4b037;
  border-bottom: 2px solid #524000;
  border-right: 2px solid #524000;
  border-left: 2px solid #524000;
}

.dog-back-paw {
  position: absolute;
  width: 58px;
  height: 30px;
  left: 90px;
  top: 90px;
  border-radius: 54% 0% 25% 17% / 70% 0% 50% 31%;
  background: #d4b037;
  border-bottom: 2px solid #524000;
  border-right: 2px solid #524000;
  border-left: 2px solid #524000;
}

.dog-eye-1 {
  position: absolute;
  width: 12px;
  height: 20px;
  left: 46px;
  top: 16px;
  background: white;
  border-radius: 50%;
}

.dog-eye-1::before {
  position: absolute;
  content: "";
  top: 6px;
  left: 1px;
  width: 7px;
  height: 10px;
  background: #524000;
  border-radius: 50%;
}

.dog-eye-1::after {
  position: absolute;
  content: "";
  height: 10px;
  width: 12px;
  border-radius: 50% 50% 0% 29% / 100% 100% 10% 0%;
  background: #b4942c;
  animation: dogBlink 6s 0s infinite forwards;
}

.dog-eye-2 {
  position: absolute;
  width: 12px;
  height: 20px;
  left: 30px;
  top: 16px;
  background: white;
  border-radius: 50%;
}

.dog-eye-2::before {
  position: absolute;
  content: "";
  top: 6px;
  left: 1px;
  width: 7px;
  height: 10px;
  background: #3a2e04;
  border-radius: 50%;
}

.dog-eye-2::after {
  position: absolute;
  content: "";
  height: 10px;
  width: 12px;
  border-radius: 50% 50% 0% 29% / 100% 100% 10% 0%;
  background: #b4942c;
  animation: dogBlink 6s 0s infinite forwards;
}

.dog-tail {
  position: absolute;
  top: 55px;
  left: 150px;
  width: 22px;
  height: 16px;
  background: #d4b037;
  border-radius: 10% 15% 100% 0% / 0% 30% 70% 0%;
  animation: tailWag 0.4s 0s infinite forwards;
  border-bottom: 2px solid #524000;
}

.dog-ear {
  position: absolute;
  left: 90px;
  height: 90px;
  width: 30px;
  border-radius: 0% 100% 50% 50% / 0% 30% 15% 15%;
  background: #d4b037;
  border-bottom: 2px solid #524000;
  border-right: 2px solid #524000;
  border-left: 2px solid #524000;
}

.dog-ear::before {
  position: absolute;
  content: "";
  width: 4px;
  height: 30px;
  left: -3px;
  background: #d4b037;
}

.dog-ear::after {
  position: absolute;
  content: "";
  width: 26px;
  height: 26px;
  top: 4px;
  left: -28px;
  background: transparent;
  border-radius: 0% 100% 0% 0% / 10% 100% 0% 0%;
  border-left: transparent;
  border-bottom: transparent;
  border-right: 2px solid #524000;
}

.dog-teeth {
  position: absolute;
  top: 90px;
  left: 40px;
  width: 4px;
  height: 5px;
  border-radius: 10% 10% 29% 71% / 0% 0% 31% 100%;
  background: white;
}

.dog-teeth::before {
  position: absolute;
  content: "";
  left: -8px;
  width: 4px;
  height: 5px;
  border-radius: 10% 10% 29% 71% / 0% 0% 31% 100%;
  background: white;
}

.dog-whiskers {
  position: absolute;
  top: 78px;
  left: 45px;
  height: 1px;
  width: 14px;
  border-radius: 2px;
  background: #524000;
  transform: rotate(30deg);
}

.dog-whiskers::before {
  position: absolute;
  content: "";
  top: 3px;
  left: -4px;
  height: 1px;
  width: 10px;
  border-radius: 2px;
  background: #524000;
  transform: rotate(8deg);
}

.dog-whiskers::after {
  position: absolute;
  content: "";
  top: -3px;
  left: 5px;
  height: 1px;
  width: 14px;
  border-radius: 2px;
  background: #524000;
  transform: rotate(-4deg);
}

.dog-scruff {
  position: absolute;
  top: -12px;
  left: 70px;
  width: 10px;
  height: 14px;
  background: #dbbb4f;
  border-radius: 0% 100% 10% 15% / 17% 100% 0% 0%;
}

.dog-scruff::before {
  position: absolute;
  content: "";
  top: 5px;
  left: -5px;
  width: 6px;
  height: 10px;
  background: #dbbb4f;
  border-radius: 0% 100% 10% 15% / 17% 100% 0% 0%;
}

.dog-scruff::after {
  position: absolute;
  content: "";
  top: -3px;
  left: 7px;
  width: 10px;
  height: 18px;
  background: #dbbb4f;
  border-radius: 0% 100% 10% 15% / 17% 100% 0% 0%;
}

.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: #533921;
  background-size: 30px 30px;
  background-image: linear-gradient(to right, #3a2716 2px, transparent 1px), linear-gradient(to bottom, #3a2716 2px, transparent 5px);
  border: 2px solid #3a2716;
  border-radius: 10px;
  transform: skewY(-30deg);
  box-shadow: 0 8px 0 0 #3a2716;
}

.right-roof {
  position: absolute;
  top: 80px;
  left: 256px;
  width: 360px;
  height: 300px;
  background: #533921;
  background-size: 30px 30px;
  background-image: linear-gradient(to right, #3a2716 2px, transparent 1px), linear-gradient(to bottom, #3a2716 2px, transparent 5px);
  border: 2px solid #3a2716;
  border-radius: 10px;
  transform: skewY(30deg);
  box-shadow: 0 8px 0 0 #3a2716;
}

.front-wall {
  position: absolute;
  height: 400px;
  width: 594px;
  top: 300px;
  background: #6d4c2e;
  background-size: 60px 60px;
  background-image: linear-gradient(to bottom, #3a2716 2px, transparent 1px);
  border-radius: 4px;
  border: 3px solid #5e4126;
}

.front-door {
  position: absolute;
  top: 500px;
  left: 240px;
  height: 200px;
  width: 120px;
  background: #816952;
  background-size: 30px 30px;
  background-image: linear-gradient(to right, #3a2716 2px, transparent 1px);
  border: 3px solid #3a2716;
  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: #816952;
  border: 3px solid #3a2716;
  border-radius: 50%;
  box-shadow: 0 -4px 0 0 #3a2716;
}

.window {
  height: 100px;
  width: 100px;
  background: #816952;
  border: 3px solid #3a2716;
  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: #474b48;
  border: 2px solid #3a2716;
  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: #9c8547;
  background-size: 20px 20px;
  background-image: linear-gradient(to right, #776532 2px, transparent 1px);
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  border: 3px solid #5e4126;
  box-shadow: 0 4px 0 0 #5e4126;
}

.left-base {
  position: absolute;
  top: 850px;
  left: 20px;
  width: 80px;
  height: 20px;
  background: #7a7373;
  border-radius: 23% 17% 55% 18% / 50% 51% 37% 41%;
  box-shadow: 0 3px 0 0 #585151;
}

.left-base::before {
  position: absolute;
  content: "";
  top: -16px;
  left: 0px;
  width: 80px;
  height: 20px;
  background: #7a7373;
  border-radius: 16% 34% 15% 18% / 50% 51% 37% 29%;
  box-shadow: 0 3px 0 0 #585151;
}

.left-base::after {
  position: absolute;
  content: "";
  top: -34px;
  left: 0px;
  width: 80px;
  height: 20px;
  background: #7a7373;
  border-radius: 52% 34% 41% 46% / 50% 51% 37% 42%;
  box-shadow: 0 3px 0 0 #585151;
}

.right-base {
  position: absolute;
  top: 850px;
  left: 500px;
  width: 80px;
  height: 20px;
  background: #7a7373;
  border-radius: 32% 34% 23% 26% / 50% 51% 37% 42%;
  box-shadow: 0 3px 0 0 #585151;
}

.right-base::before {
  position: absolute;
  content: "";
  top: -16px;
  left: 0px;
  width: 80px;
  height: 20px;
  background: #7a7373;
  border-radius: 32% 34% 23% 40% / 30% 51% 65% 25%;
  box-shadow: 0 3px 0 0 #585151;
}

.right-base::after {
  position: absolute;
  content: "";
  top: -34px;
  left: 0px;
  width: 80px;
  height: 20px;
  background: #7a7373;
  border-radius: 52% 34% 41% 46% / 50% 51% 37% 42%;
  box-shadow: 0 3px 0 0 #585151;
}

.stairs {
  position: absolute;
  top: 790px;
  left: 230px;
  width: 150px;
  height: 100px;
}

.step-1 {
  position: absolute;
  width: 144px;
  height: 50px;
  background: #9c8547;
  background-size: 20px 20px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 3px solid #5e4126;
  box-shadow: 0 4px 0 0 #5e4126;
}

.step-2 {
  position: absolute;
  top: 26px;
  width: 144px;
  height: 50px;
  background: #9c8547;
  background-size: 20px 20px;
  border-bottom-left-radius: 5px;
  border-bottom-right-radius: 5px;
  border: 3px solid #5e4126;
  box-shadow: 0 4px 0 0 #5e4126;
}

.step-2::before {
  position: absolute;
  content: "";
  width: 14px;
  height: 16px;
  top: 56px;
  left: 10px;
  background: #46301b;
  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: #46301b;
  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 #3a2716;
  border-top: 10px solid #6d4c2e;
  border-bottom: 10px solid #6d4c2e;
}

.wall-dove-tail-left::before {
  position: absolute;
  content: "";
  height: 64px;
  top: 113px;
  left: 0px;
  border-right: 20px solid #3a2716;
  border-top: 10px solid #6d4c2e;
  border-bottom: 10px solid #6d4c2e;
}

.wall-dove-tail-right {
  position: absolute;
  height: 64px;
  top: 473px;
  left: 578px;
  border-left: 20px solid #3a2716;
  border-top: 10px solid #6d4c2e;
  border-bottom: 10px solid #6d4c2e;
}

.wall-dove-tail-right::before {
  position: absolute;
  content: "";
  height: 64px;
  top: 113px;
  left: -21px;
  border-left: 20px solid #3a2716;
  border-top: 10px solid #6d4c2e;
  border-bottom: 10px solid #6d4c2e;
}

.chimney {
  position: absolute;
  top: 10px;
  left: 460px;
  height: 200px;
  width: 100px;
  background-image: linear-gradient(to right, #4e2c2c 90%, #412323 100%);
  border-radius: 20px;
}

.chimney::before {
  position: absolute;
  content: "";
  top: -40px;
  left: -5px;
  height: 60px;
  width: 110px;
  background: #4e2c2c;
  border-radius: 10% 10% 10% 10% / 50% 50% 50% 50%;
  box-shadow: 0 20px 0 0 #412323;
}

.chimney::after {
  position: absolute;
  content: "";
  top: -25px;
  left: 10px;
  height: 30px;
  width: 80px;
  background: #2c1717;
  border-radius: 8% 8% 8% 8% / 50% 50% 50% 50%;
}

.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.575), rgba(35, 82, 139, 0.596)), linear-gradient(#707070, #707070);
  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: #707070;
  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.575), rgba(35, 82, 139, 0.596)), linear-gradient(#707070, #707070);
  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: #707070;
  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.575), rgba(35, 82, 139, 0.596)), linear-gradient(#707070, #707070);
  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: #707070;
  border-radius: 50% 50% 50% 50% / 87% 87% 11% 11%;
}

.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, #5c2f2f 0%, #5c2f2f 65%, #472525 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, #643636 60%, #4d2d2d 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: #977a62;
  height: 26px;
  width: 12px;
  border-radius: 50%;
}

.tree-alt-1-bottom {
  position: absolute;
  bottom: 80px;
  background-color: #296339;
  border-radius: 46% 36% 50% 27% / 45% 37% 57% 38%;
  width: 280px;
  height: 130px;
  border: 2px solid #184425;
  border-bottom: 4px solid #184425;
}

.tree-alt-1-bottom::after {
  position: absolute;
  content: "";
  bottom: -14px;
  left: 109px;
  width: 156px;
  height: 54px;
  background-color: #296339;
  border-radius: 36% 38% 34% 23% / 13% 2% 63% 31%;
  border-bottom: 4px solid #184425;
}

.tree-alt-1-middle {
  position: absolute;
  bottom: 140px;
  background-color: #296339;
  border-radius: 55% 57% 40% 23% / 64% 65% 70% 68%;
  width: 260px;
  height: 140px;
  border: 2px solid #184425;
  border-bottom: 4px solid #184425;
}

.tree-alt-1-middle::after {
  position: absolute;
  content: "";
  bottom: -30px;
  left: 20px;
  width: 160px;
  height: 84px;
  background-color: #296339;
  border-radius: 36% 38% 50% 39% / 38% 34% 45% 41%;
  border-bottom: 4px solid #184425;
}

.tree-alt-1-top {
  position: absolute;
  bottom: 240px;
  width: 240px;
  height: 130px;
  background-color: #296339;
  border-radius: 48% 31% 17% 27% / 67% 51% 23% 25%;
  border: 2px solid #184425;
  border-bottom: 4px solid #184425;
}

.tree-alt-1-top::after {
  position: absolute;
  content: "";
  bottom: -30px;
  left: 70px;
  width: 110px;
  height: 84px;
  background-color: #296339;
  border-radius: 36% 38% 50% 39% / 38% 34% 45% 41%;
  border-bottom: 4px solid #184425;
}

/* 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, #5c2f2f 0%, #5c2f2f 65%, #472525 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, #643636 60%, #4d2d2d 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: #977a62;
  height: 26px;
  width: 12px;
  border-radius: 50%;
}

.tree-alt-2-bottom {
  position: absolute;
  bottom: 80px;
  background-color: #296339;
  border-radius: 46% 36% 50% 27% / 45% 37% 57% 38%;
  width: 280px;
  height: 130px;
  border: 2px solid #184425;
  border-bottom: 4px solid #184425;
}

.tree-alt-2-bottom::after {
  position: absolute;
  content: "";
  bottom: -14px;
  left: 89px;
  width: 156px;
  height: 54px;
  background-color: #296339;
  border-radius: 36% 38% 34% 23% / 13% 2% 63% 31%;
  border-bottom: 4px solid #184425;
}

.tree-alt-2-middle {
  position: absolute;
  bottom: 140px;
  background-color: #296339;
  border-radius: 18% 22% 16% 16% / 59% 57% 31% 37%;
  width: 260px;
  height: 140px;
  border: 2px solid #184425;
  border-bottom: 4px solid #184425;
}

.tree-alt-2-middle::after {
  position: absolute;
  content: "";
  bottom: -30px;
  left: 20px;
  width: 160px;
  height: 84px;
  background-color: #296339;
  border-radius: 36% 38% 50% 39% / 38% 34% 45% 41%;
  border-bottom: 4px solid #184425;
}

.tree-alt-2-top {
  position: absolute;
  bottom: 240px;
  width: 240px;
  height: 130px;
  background-color: #296339;
  border-radius: 37% 53% 32% 50% / 73% 64% 31% 25%;
  border: 2px solid #184425;
  border-bottom: 4px solid #184425;
}

.tree-alt-2-top::after {
  position: absolute;
  content: "";
  bottom: -30px;
  left: 70px;
  width: 110px;
  height: 84px;
  background-color: #296339;
  border-radius: 36% 38% 50% 39% / 38% 34% 45% 41%;
  border-bottom: 4px solid #184425;
}

.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;
}

/* New Trees */
.alt-tree-21 {
  grid-column: 13;
  grid-row: 12;
  margin-top: -120px;
  margin-left: -80px;
}

.alt-tree-22 {
  grid-column: 14;
  grid-row: 13;
  margin-top: -120px;
  margin-left: -80px;
}

.alt-tree-23 {
  grid-column: 5;
  grid-row: 12;
  margin-top: -120px;
  margin-left: -80px;
}

.alt-tree-24 {
  grid-column: 5;
  grid-row: 13;
  margin-top: -160px;
  margin-left: -160px;
}

.alt-tree-25 {
  grid-column: 7;
  grid-row: 15;
  margin-top: -120px;
  margin-left: -80px;
}

.alt-tree-26 {
  grid-column: 8;
  grid-row: 3;
  margin-top: -120px;
  margin-left: -80px;
}

.alt-tree-27 {
  grid-column: 8;
  grid-row: 16;
  margin-top: -120px;
  margin-left: -80px;
}

.alt-tree-28 {
  grid-column: 8;
  grid-row: 3;
  margin-top: -120px;
  margin-left: -80px;
}

.alt-tree-29 {
  grid-column: 16;
  grid-row: 8;
  margin-top: -120px;
  margin-left: -80px;
}

.alt-tree-30 {
  grid-column: 15;
  grid-row: 15;
  margin-top: -120px;
  margin-left: -80px;
}

.alt-tree-31 {
  grid-column: 13;
  grid-row: 4;
  margin-top: -120px;
  margin-left: -80px;
}

.alt-tree-32 {
  grid-column: 15;
  grid-row: 6;
  margin-top: -120px;
  margin-left: -80px;
}

.alt-tree-33 {
  grid-column: 14;
  grid-row: 8;
  margin-top: -120px;
  margin-left: -80px;
}

.alt-tree-34 {
  grid-column: 3;
  grid-row: 12;
  margin-top: -120px;
  margin-left: -80px;
}

.alt-tree-35 {
  grid-column: 4;
  grid-row: 15;
  margin-top: -120px;
  margin-left: -80px;
}

.alt-tree-36 {
  grid-column: 8;
  grid-row: 11;
  margin-top: -120px;
  margin-left: -80px;
}

.alt-tree-37 {
  grid-column: 11;
  grid-row: 13;
  margin-top: -120px;
  margin-left: -80px;
}

.alt-tree-38 {
  grid-column: 11;
  grid-row: 5;
  margin-top: -120px;
  margin-left: -80px;
}

.alt-tree-39 {
  grid-column: 14;
  grid-row: 1;
  margin-top: -120px;
  margin-left: -80px;
}

.alt-tree-40 {
  grid-column: 15;
  grid-row: 13;
  margin-top: -120px;
  margin-left: -80px;
}

.alt-tree-41 {
  grid-column: 15;
  grid-row: 2;
  margin-top: -120px;
  margin-left: -80px;
}

.alt-tree-42 {
  grid-column: 15;
  grid-row: 3;
  margin-top: -120px;
  margin-left: -300px;
}

.alt-tree-43 {
  grid-column: 12;
  grid-row: 1;
  margin-top: -120px;
  margin-left: -80px;
}

.alt-tree-44 {
  grid-column: 13;
  grid-row: 4;
  margin-top: -120px;
  margin-left: -80px;
}

.alt-tree-45 {
  grid-column: 15;
  grid-row: 6;
  margin-top: -120px;
  margin-left: -80px;
}

.welcome-sign-area {
  grid-column: 1;
  grid-row: 1;
}

.welcome-sign {
  position: absolute;
  top: 120px;
  left: 20px;
  width: 286px;
  height: 230px;
  background: #9c8547;
  border: 2px solid #3a2716;
  border-radius: 10px;
  padding: 16px;
  box-shadow: 0 -8px 0 0 #3a2716;
}

.welcome-sign::before {
  position: absolute;
  content: "";
  width: 14px;
  height: 30px;
  top: 262px;
  left: 10px;
  background: #46301b;
  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: #46301b;
  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: #46301b;
}

.welcome-sign p {
  font-family: "Comfortaa", cursive;
  color: #46301b;
  font-weight: bold;
}