#trees {
  position: relative;
  background: #fff;
  overflow: hidden;
  height: 25vh;
  width: 100%;
  margin-top: 70vh;
}

#floor {
  background: #3a471f;
  position: bottom;
  padding: 2px 1em 0 2em;
  bottom: 0px;
  height: 0px;
  width: 100%;
  left: 0;

}

.tree {
  stroke: #3a471f;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.2px;
  pointer-events: none;
  display: block;
  position: absolute;
  bottom: -5px;
  transform-origin: center calc(100% - 5px);
}
.tree path:not(.trunk) {
  pointer-events: none;
}

.tree path {
  pointer-events: visibleStroke;
}

.tree:nth-of-type(1) {
  height: 34.0770116513%;
  left: 15.1420279267%;
  z-index: 3408;
  stroke: #d8dad2;
}
.tree:nth-of-type(1) .trunk {
  fill: #d8dad2;
}

.tree:nth-of-type(2) {
  height: 86.661807011%;
  left: 43.2464767835%;
  z-index: 8666;
  stroke: #616c4c;
}
.tree:nth-of-type(2) .trunk {
  fill: #616c4c;
}

.tree:nth-of-type(3) {
  height: 100.5996356332%;
  left: 29.5922945551%;
  z-index: 10060;
  stroke: #3a471f;
}
.tree:nth-of-type(3) .trunk {
  fill: #3a471f;
}

.tree:nth-of-type(4) {
  height: 65.4479880083%;
  left: 91.1867737449%;
  z-index: 6545;
  stroke: #899179;
}
.tree:nth-of-type(4) .trunk {
  fill: #899179;
}

.tree:nth-of-type(5) {
  transform: scaleX(-1);
  height: 93.5205250197%;
  left: 82.9504113165%;
  z-index: 9352;
  stroke: #616c4c;
}
.tree:nth-of-type(5) .trunk {
  fill: #616c4c;
}

.tree:nth-of-type(6) {
  transform: scaleX(-1);
  height: 98.2153911046%;
  left: 4.2091489282%;
  z-index: 9822;
  stroke: #3a471f;
}
.tree:nth-of-type(6) .trunk {
  fill: #3a471f;
}

.tree:nth-of-type(7) {
  transform: scaleX(-1);
  height: 91.0990333739%;
  left: 74.5484117981%;
  z-index: 9110;
  stroke: #616c4c;
}
.tree:nth-of-type(7) .trunk {
  fill: #616c4c;
}

.tree:nth-of-type(8) {
  transform: scaleX(-1);
  height: 63.4061580778%;
  left: 14.2728668654%;
  z-index: 6341;
  stroke: #899179;
}
.tree:nth-of-type(8) .trunk {
  fill: #899179;
}

.tree:nth-of-type(9) {
  height: 81.1369427589%;
  left: 101.4709439547%;
  z-index: 8114;
  stroke: #616c4c;
}
.tree:nth-of-type(9) .trunk {
  fill: #616c4c;
}

.tree:nth-of-type(10) {
  height: 72.4753024854%;
  left: 81.1186818195%;
  z-index: 7248;
  stroke: #899179;
}
.tree:nth-of-type(10) .trunk {
  fill: #899179;
}

.tree:nth-of-type(11) {
  transform: scaleX(-1);
  height: 55.2949381753%;
  left: 21.1624600494%;
  z-index: 5529;
  stroke: #899179;
}
.tree:nth-of-type(11) .trunk {
  fill: #899179;
}

.tree:nth-of-type(12) {
  height: 66.5339190727%;
  left: 79.6924687114%;
  z-index: 6653;
  stroke: #899179;
}
.tree:nth-of-type(12) .trunk {
  fill: #899179;
}

.tree:nth-of-type(13) {
  transform: scaleX(-1);
  height: 61.7294520118%;
  left: 52.5250543392%;
  z-index: 6173;
  stroke: #899179;
}
.tree:nth-of-type(13) .trunk {
  fill: #899179;
}

.tree:nth-of-type(14) {
  transform: scaleX(-1);
  height: 41.9495971057%;
  left: 80.4132255104%;
  z-index: 4195;
  stroke: #b0b5a5;
}
.tree:nth-of-type(14) .trunk {
  fill: #b0b5a5;
}

.tree:nth-of-type(15) {
  transform: scaleX(-1);
  height: 102.1043940726%;
  left: 95.5276544317%;
  z-index: 10210;
  stroke: #3a471f;
}
.tree:nth-of-type(15) .trunk {
  fill: #3a471f;
}

.tree:nth-of-type(16) {
  height: 75.109333919%;
  left: 7.0467707147%;
  z-index: 7511;
  stroke: #616c4c;
}
.tree:nth-of-type(16) .trunk {
  fill: #616c4c;
}

.tree:nth-of-type(17) {
  transform: scaleX(-1);
  height: 67.7556523876%;
  left: 48.9471637374%;
  z-index: 6776;
  stroke: #899179;
}
.tree:nth-of-type(17) .trunk {
  fill: #899179;
}

.tree:nth-of-type(18) {
  transform: scaleX(-1);
  height: 54.0933037349%;
  left: 54.4263060761%;
  z-index: 5409;
  stroke: #b0b5a5;
}
.tree:nth-of-type(18) .trunk {
  fill: #b0b5a5;
}

.tree:nth-of-type(19) {
  transform: scaleX(-1);
  height: 102.3800524391%;
  left: 77.9571091514%;
  z-index: 10238;
  stroke: #3a471f;
}
.tree:nth-of-type(19) .trunk {
  fill: #3a471f;
}

.tree:nth-of-type(20) {
  height: 28.9203328935%;
  left: 42.0669689552%;
  z-index: 2892;
  stroke: #d8dad2;
}
.tree:nth-of-type(20) .trunk {
  fill: #d8dad2;
}

.tree:nth-of-type(21) {
  height: 41.0865400097%;
  left: 59.5690865422%;
  z-index: 4109;
  stroke: #b0b5a5;
}
.tree:nth-of-type(21) .trunk {
  fill: #b0b5a5;
}

.tree:nth-of-type(22) {
  transform: scaleX(-1);
  height: 61.7887120272%;
  left: 83.6288218585%;
  z-index: 6179;
  stroke: #899179;
}
.tree:nth-of-type(22) .trunk {
  fill: #899179;
}

.tree:nth-of-type(23) {
  transform: scaleX(-1);
  height: 74.893924045%;
  left: 17.3409639689%;
  z-index: 7489;
  stroke: #899179;
}
.tree:nth-of-type(23) .trunk {
  fill: #899179;
}

.tree:nth-of-type(24) {
  transform: scaleX(-1);
  height: 25.6900068876%;
  left: 6.311859523%;
  z-index: 2569;
  stroke: #d8dad2;
}
.tree:nth-of-type(24) .trunk {
  fill: #d8dad2;
}

.tree:nth-of-type(25) {
  height: 27.5796781867%;
  left: 28.8647291962%;
  z-index: 2758;
  stroke: #d8dad2;
}
.tree:nth-of-type(25) .trunk {
  fill: #d8dad2;
}

.tree:nth-of-type(26) {
  transform: scaleX(-1);
  height: 35.9200782358%;
  left: 35.7716985152%;
  z-index: 3592;
  stroke: #b0b5a5;
}
.tree:nth-of-type(26) .trunk {
  fill: #b0b5a5;
}

.tree:nth-of-type(27) {
  transform: scaleX(-1);
  height: 55.9411303381%;
  left: 42.124500632%;
  z-index: 5594;
  stroke: #899179;
}
.tree:nth-of-type(27) .trunk {
  fill: #899179;
}

.tree:nth-of-type(28) {
  transform: scaleX(-1);
  height: 44.6089765166%;
  left: 28.6567036891%;
  z-index: 4461;
  stroke: #b0b5a5;
}
.tree:nth-of-type(28) .trunk {
  fill: #b0b5a5;
}

.tree:nth-of-type(29) {
  height: 103.622452482%;
  left: 40.7986825174%;
  z-index: 10362;
  stroke: #3a471f;
}
.tree:nth-of-type(29) .trunk {
  fill: #3a471f;
}

.tree:nth-of-type(30) {
  height: 33.4729927056%;
  left: 74.6620928269%;
  z-index: 3347;
  stroke: #d8dad2;
}
.tree:nth-of-type(30) .trunk {
  fill: #d8dad2;
}

.tree:nth-of-type(31) {
  height: 67.9793445812%;
  left: 101.9441147055%;
  z-index: 6798;
  stroke: #899179;
}
.tree:nth-of-type(31) .trunk {
  fill: #899179;
}

.tree:nth-of-type(32) {
  height: 99.4380594801%;
  left: 22.3928297807%;
  z-index: 9944;
  stroke: #3a471f;
}
.tree:nth-of-type(32) .trunk {
  fill: #3a471f;
}

.tree:nth-of-type(33) {
  transform: scaleX(-1);
  height: 70.5361357578%;
  left: 21.5382560897%;
  z-index: 7054;
  stroke: #899179;
}
.tree:nth-of-type(33) .trunk {
  fill: #899179;
}

.tree:nth-of-type(34) {
  transform: scaleX(-1);
  height: 71.6276631602%;
  left: -0.1219568608%;
  z-index: 7163;
  stroke: #899179;
}
.tree:nth-of-type(34) .trunk {
  fill: #899179;
}

.tree:nth-of-type(35) {
  transform: scaleX(-1);
  height: 48.4182890397%;
  left: 101.7135518183%;
  z-index: 4842;
  stroke: #b0b5a5;
}
.tree:nth-of-type(35) .trunk {
  fill: #b0b5a5;
}

.tree:nth-of-type(36) {
  height: 56.8793015907%;
  left: 43.0343566871%;
  z-index: 5688;
  stroke: #899179;
}
.tree:nth-of-type(36) .trunk {
  fill: #899179;
}

.tree:nth-of-type(37) {
  transform: scaleX(-1);
  height: 86.7029009066%;
  left: 59.3930478314%;
  z-index: 8670;
  stroke: #616c4c;
}
.tree:nth-of-type(37) .trunk {
  fill: #616c4c;
}

.tree:nth-of-type(38) {
  height: 72.8944408401%;
  left: 63.7480618446%;
  z-index: 7289;
  stroke: #899179;
}
.tree:nth-of-type(38) .trunk {
  fill: #899179;
}

.tree:nth-of-type(39) {
  transform: scaleX(-1);
  height: 50.1982878945%;
  left: 27.86837966%;
  z-index: 5020;
  stroke: #b0b5a5;
}
.tree:nth-of-type(39) .trunk {
  fill: #b0b5a5;
}

.tree:nth-of-type(40) {
  transform: scaleX(-1);
  height: 65.446634584%;
  left: 32.9083965269%;
  z-index: 6545;
  stroke: #899179;
}
.tree:nth-of-type(40) .trunk {
  fill: #899179;
}

.tree:nth-of-type(41) {
  transform: scaleX(-1);
  height: 91.5942658805%;
  left: 71.6781226463%;
  z-index: 9159;
  stroke: #616c4c;
}
.tree:nth-of-type(41) .trunk {
  fill: #616c4c;
}

.tree:nth-of-type(42) {
  height: 68.4569793343%;
  left: 23.6267068752%;
  z-index: 6846;
  stroke: #899179;
}
.tree:nth-of-type(42) .trunk {
  fill: #899179;
}

.tree:nth-of-type(43) {
  transform: scaleX(-1);
  height: 48.1331942794%;
  left: 22.8869871262%;
  z-index: 4813;
  stroke: #b0b5a5;
}
.tree:nth-of-type(43) .trunk {
  fill: #b0b5a5;
}

.tree:nth-of-type(44) {
  height: 28.6849651057%;
  left: 20.8998614955%;
  z-index: 2868;
  stroke: #d8dad2;
}
.tree:nth-of-type(44) .trunk {
  fill: #d8dad2;
}

.tree:nth-of-type(45) {
  transform: scaleX(-1);
  height: 35.3361981539%;
  left: 18.3663609812%;
  z-index: 3534;
  stroke: #b0b5a5;
}
.tree:nth-of-type(45) .trunk {
  fill: #b0b5a5;
}

.tree:nth-of-type(46) {
  transform: scaleX(-1);
  height: 91.2277005625%;
  left: 28.3046546731%;
  z-index: 9123;
  stroke: #616c4c;
}
.tree:nth-of-type(46) .trunk {
  fill: #616c4c;
}

.tree:nth-of-type(47) {
  height: 42.5636670584%;
  left: 76.2232364691%;
  z-index: 4256;
  stroke: #b0b5a5;
}
.tree:nth-of-type(47) .trunk {
  fill: #b0b5a5;
}

.tree:nth-of-type(48) {
  transform: scaleX(-1);
  height: 102.640181586%;
  left: 26.3271487725%;
  z-index: 10264;
  stroke: #3a471f;
}
.tree:nth-of-type(48) .trunk {
  fill: #3a471f;
}

.tree:nth-of-type(49) {
  height: 33.4368565377%;
  left: 17.6410697449%;
  z-index: 3344;
  stroke: #d8dad2;
}
.tree:nth-of-type(49) .trunk {
  fill: #d8dad2;
}

.tree:nth-of-type(50) {
  transform: scaleX(-1);
  height: 47.4414107883%;
  left: 16.0931998753%;
  z-index: 4744;
  stroke: #b0b5a5;
}
.tree:nth-of-type(50) .trunk {
  fill: #b0b5a5;
}