/* general css */
@import url("https://fonts.googleapis.com/css2?family=Acme&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Acme&family=Amatic+SC:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
@keyframes bulldozerDrive {
  100% {
    left: 200%;
  }
}
@keyframes rocking {
  from {
    transform: rotate(0) translateY(-30px);
  }
  to {
    transform: rotate(2deg) translateY(-40px);
  }
}
@keyframes upDown {
  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(10px);
  }
}
@keyframes pipeShake {
  0%, 50%, 100% {
    transform: translateX(0);
  }
  25% {
    transform: translateX(2px);
  }
  75% {
    transform: translateX(-2px);
  }
}
@keyframes rotateWheel {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
@keyframes seedGrow {
  0%, 49% {
    d: path("M11.5 33.02c-.15 4.97-.22 7.45 1.22 9.27 1.46 1.84 3.46 2.58 4.66 2.9 1.01-.42 1.12-1.53 1.46-2.47.77-2.27.29-4.35-1.4-6.19-1.49-1.62-2.93-3.6-4.71-4.86-.2-.1-.48-.21-.73-.1-.45.2-.5 1.02-.51 1.46Z");
  }
  50%, 60% {
    d: path("m19.5 43.3-5.1 2-1.8-4 1.8-17.7.1-6.9c-1.2-1.8-2-3.8-2-6l-.1-.7-.1-1.5V7.3l1 2 .6 1.5.7 3.7v-.7l.5-.6.2-1.1 1.2-3.6.6 1.4.2 1.3-.5 4.7-1 2.8 3.7 24.6Z");
  }
  60%, 70% {
    d: path("m19.6 43.3-5.2 2-1.8-4 1.8-17.7.2-7.7c-1.2-1.8-2-4-2.3-6.2l-.1-.8-.2-1.7V5.8L13.1 8l.6 1.7 1 4 .3-.4c0-.8.2-1.5.4-2.2L17 7l.6 1.6v1.5l-.7 5.3-1 2.5 3.8 25.3Z");
  }
  70%, 80% {
    d: path("M21.4 4.3v1.9l-.5 1.4-2.9 4.8-2.7 2.7 4.3 28.2-5.2 2-1.8-4 1.8-17.7.2-9.1c-2.5-1.1-4.6-2.9-6.2-5.2L8 8.6 7 7.1l-.8-1.3 2.3 1.5 1.4 1.2 4.6 5.6-.4-1.7.6-.9.6 1.1v2.1l1.6-4.5c.3-1 .9-1.9 1.6-2.6l3-3.3Z");
  }
  80%, 90% {
    d: path("M23.4 5 23 6.8c-.2.4-.4 1-.7 1.3l-3.7 4.2-3.3 2.3.4 2.8 1.2-.3-.1 1.1c0 .2-.2.4-.4.4l-.5.1 3.7 24.6-5.2 2-1.8-4 1.8-17.7.2-5.3v-3.8l-.9-1c-2.3-.6-4.6-2-6.4-3.8l-.5-.6-1.3-1.4-1-1 2.5 1 1.6 1 6 5 .1-1.2-.5-3.2c-.1-.7 0-1.4.3-2.1l.8-1.8.4 3.5v2.4l-.6.8.2 1v.9h.2l2.4-4c.5-1 1.2-1.7 2-2.4L23.4 5Z");
  }
  90%, 100% {
    d: path("m24.7 7-1 1.5-.5 1c-.4 1-1 1.9-2 2.5l-.6.4c-.6.5-1.4.8-2.1 1l-3.2 1 .4 3 .6-1h.8c.2 0 .6-.1.7.1 0 .3-.9 1.7-1 2-.3.3-.6.2-1 0l3.8 24.8-5.2 2-1.8-4 1.8-17.7.2-9-.7-.8c-2.3-.2-4.6-.5-6.6-2l-1-.6c-.5-.3-1-1-1.5-1.4l-1.1-.7 3 .1 1.6.7 6.3 3.6.1-1.5V12l-.4-2.5c-.2-1.3-1.3-3.8-.5-4.8L16.7.5l-.7 8-.4 2.4-.6 1 .2 1.2v.8l1.7-2.7c.6-.8 2.7-2.2 3.6-2.6L24.7 7Z");
  }
}
@keyframes leafMoveOne {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: translate(0) rotate(-5deg);
  }
}
@keyframes leafMoveTwo {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: translate(0) rotate(-2deg);
  }
}
@keyframes leafMoveThree {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: translate(0) rotate(5deg);
  }
}
@keyframes leafMoveBase {
  0% {
    transform: skew(-0.15deg);
  }
  50% {
    transform: skew(0deg);
  }
  100% {
    transform: skew(0.1deg);
  }
}
@keyframes windBlow {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(0.5%);
  }
  100% {
    transform: translateY(0);
  }
}
@keyframes flowerWaveOne {
  100% {
    transform: rotate(0.2deg);
  }
}
@keyframes flowerWaveTwo {
  100% {
    transform: rotate(-0.2deg);
  }
}
@keyframes flowerRotate {
  0% {
    transform: rotateX(-10deg) translateX(-0.1%);
  }
  50% {
    transform: rotate(0);
  }
  100% {
    transform: rotateX(10deg) translateX(0.1%);
  }
}
:root {
  --delayShake: 1.2s;
}

* {
  box-sizing: border-box;
  margin: 0;
}

html {
  font-family: "Acme";
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.scrollbars::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
.scrollbars::-webkit-scrollbar-thumb {
  background: #c2c2c2;
  border-radius: 10px;
}
.scrollbars::-webkit-scrollbar-track {
  background: #f3f3f3;
}

body {
  overflow-x: hidden;
}

.keyword {
  font-weight: 600;
}
.keyword--warning {
  color: #b93939;
}
.keyword--green {
  color: #347462;
}
.keyword--blue {
  color: #6a7ca9;
}

.scene {
  position: relative;
  height: 100vh;
  width: 100vw;
}
.scene__one, .scene__three--one, .scene__three--two, .scene__three--three, .scene__three--four {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #e8ecea;
}
.scene__headline {
  overflow: hidden;
  transform: translate(-50%, -50%);
  font-family: "Amatic SC", sans-serif;
  top: 50%;
  left: 50%;
  position: absolute;
  font-size: 8vw;
  z-index: 1;
}
.scene__paragraph {
  background-color: rgba(255, 255, 255, 0.9);
  font-size: clamp(14px, 1.5vw, 20px);
  position: absolute;
  left: 25%;
  width: 50%;
  top: -40%;
  padding: 5%;
  text-align: center;
  z-index: 1;
  box-shadow: 0 0 1vw 0.5vw rgba(0, 0, 0, 0.35);
}
.scene__paragraph--five, .scene__paragraph--six {
  position: absolute;
  transform: translate(-50%, 0%);
  padding: 2%;
  font-size: clamp(14px, 3vw, 2.25rem);
  background-color: #C6DBDB;
  opacity: 0;
}
.scene__paragraph--five {
  left: 35%;
  top: 40%;
  width: 25ch;
}
.scene__paragraph--six {
  left: 65%;
  top: 30%;
}
.scene__two {
  align-items: flex-end;
  height: 100%;
  width: 100%;
  position: absolute;
  display: flex;
  opacity: 0;
  background-color: #a1a9c2;
}
.scene__three--one {
  opacity: 0;
}
.scene__three--two, .scene__three--three, .scene__three--four {
  display: none;
}

.city__building {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  gap: 5%;
  align-items: center;
  position: absolute;
  bottom: 10vw;
}
.city__building--one {
  width: 6%;
}
.city__building--two {
  width: 13%;
  left: 6%;
}
.city__building--three {
  width: 15%;
  left: 19%;
}
.city__building--four {
  width: 13.5%;
  left: 34%;
}
.city__building--five {
  width: 13.5%;
  left: 47.5%;
}
.city__building--six {
  width: 10%;
  left: 61%;
}
.city__building--seven {
  width: 7%;
  left: 71%;
}
.city__building--eight {
  width: 10%;
  right: 12%;
}
.city__building--nine {
  width: 12%;
  right: 0%;
}
.city__floor {
  width: 100%;
  opacity: 0;
  background-color: #232C43;
  padding: 3% 1.2% 0;
  position: absolute;
}
.city__road {
  width: 0%;
  display: block;
  height: 20%;
  margin: 0 auto;
  opacity: 0;
  background-color: #555e73;
}
.city__window {
  background-color: #4c5f8f;
  opacity: 0;
}
.city__window--small {
  height: 11%;
  width: 10%;
  margin: 0 9%;
}
.city__window--medium {
  height: 8%;
  width: 50%;
}
.city__window--large {
  height: 10%;
  width: 75%;
}
.city__window--tall {
  width: 10%;
  margin: 0 9%;
  height: 30%;
}
.city__water {
  position: absolute;
  background-color: rgba(72, 81, 105, 0.741);
  width: 120%;
  height: 0;
  transition: 1s;
  bottom: -10vw;
  left: -5%;
  overflow: hidden;
}

svg {
  bottom: 0;
  position: absolute;
}

.deer {
  bottom: 10vw;
  left: 0;
  width: 10%;
  fill: #1e5e4b;
  opacity: 0;
}
.deer__legs--one {
  transform-origin: center;
}
.deer__legs--two {
  transform-origin: center;
}

.planes__patch--one {
  fill: #1e5e4b;
}
.planes__patch--two {
  fill: #287561;
}
.planes__patch--three {
  fill: #4e9b85;
}
.planes__patch--four {
  fill: #8bb6a9;
}
.planes__container {
  position: absolute;
  transform: translate(-50%, 0%);
  left: 50%;
  top: 3%;
  display: flex;
  gap: 5px;
  flex-direction: column;
  align-items: center;
  opacity: 0;
}
.planes__button {
  margin-top: 1rem;
  z-index: 2;
  padding: 1% 2%;
  font-size: 1.4em;
  border-radius: 3px;
  border: solid rgb(44, 44, 44) 1px;
  background-color: #e8ecea;
  text-decoration: none;
}
.planes__button--disabled {
  display: none;
}
.planes__text {
  padding: 2%;
  text-align: center;
  box-shadow: 0 0 1vw 0.5vw rgba(0, 0, 0, 0.35);
  background-color: #e8ecea;
}

.tree-growth__mountain {
  fill: #8bb6a9;
}
.tree-growth__shadow--mountain {
  fill: #81A498;
}
.tree-growth__leaves--sapling {
  fill: #287561;
}
.tree-growth__leaves--light {
  fill: #287561;
}
.tree-growth__leaves--dark {
  fill: #1C513F;
}
.tree-growth__leaves--mid {
  fill: #1e5e4b;
}
.tree-growth__stem--sapling {
  fill: #205f4b;
}
.tree-growth__stem--middle {
  fill: url(#tree-growth__linear-gradient);
}
.tree-growth__stem--brown {
  fill: #5C584D;
}
.tree-growth__grass--back {
  fill: #4e9b85;
}
.tree-growth__grass--front {
  fill: #287561;
}
.tree-growth__dividers {
  fill: #e8ecea;
}

.seed {
  position: absolute;
  width: 5%;
  fill: #5C584D;
  transition: opacity 0.2s;
  opacity: 0;
}
.seed1 {
  left: 20%;
  bottom: 41vw;
}
.seed1--plant {
  opacity: 1;
  animation: plantSeed1 2s forwards;
}
@keyframes plantSeed1 {
  20%, 40% {
    transform: translateY(220%);
  }
  60%, 70% {
    transform: translateY(216%);
  }
  70%, 80% {
    transform: translateY(210%);
  }
  80%, 90% {
    transform: translateY(202%);
  }
  90%, 100% {
    transform: translateY(192%);
  }
  50%, 100% {
    fill: #4e9b85;
  }
}
.seed2 {
  left: 40%;
  bottom: 18.8vw;
}
.seed2--plant {
  opacity: 1;
  animation: plantSeed2 2s forwards;
}
@keyframes plantSeed2 {
  20%, 40% {
    transform: translateY(220%);
  }
  60%, 70% {
    transform: translateY(216%);
  }
  70%, 80% {
    transform: translateY(210%);
  }
  80%, 90% {
    transform: translateY(202%);
  }
  90%, 100% {
    transform: translateY(192%);
  }
  50%, 100% {
    fill: #1e5e4b;
  }
}
.seed3 {
  left: 80%;
  bottom: 30vw;
}
.seed3--plant {
  opacity: 1;
  animation: plantSeed3 2s forwards;
}
@keyframes plantSeed3 {
  20%, 40% {
    transform: translateY(220%);
  }
  60%, 70% {
    transform: translateY(216%);
  }
  70%, 80% {
    transform: translateY(210%);
  }
  80%, 90% {
    transform: translateY(202%);
  }
  90%, 100% {
    transform: translateY(192%);
  }
  50%, 100% {
    fill: #287561;
  }
}
.seed--grow {
  animation: seedGrow 2s forwards;
}

.forest__shake--active {
  animation: sceneShakingGround 0.4s alternate 19.25;
}
.forest__trees {
  position: absolute;
  bottom: 0;
  fill: #1e5e4b;
  width: 102%;
  left: 0;
}
.forest__tree {
  overflow: hidden;
}
.forest__tree--shake {
  animation: sceneShakingGround 0.4s alternate infinite;
}
.forest__patch--one {
  fill: #1e5e4b;
  width: 102%;
  left: -1%;
  bottom: -0.5vw;
}
.forest__patch--two {
  fill: #287561;
}
.forest__patch--three {
  fill: #4e9b85;
}
.forest__patch--four {
  fill: #8bb6a9;
}

.nature__mountains {
  fill: #C6DBDB;
}
.nature__patch-two {
  fill: #4e9b85;
}
.nature__patch-one {
  fill: #287561;
}
.nature__leaves {
  animation: windBlow 2s ease-in-out infinite;
  fill: #1e5e4b;
}
.nature__leaves-light {
  fill: #287561;
}
.nature__tree {
  width: 72%;
  fill: #6D5D4F;
}
.nature__tree-highlight {
  fill: #967E69;
}
.nature__tree-mid {
  fill: #64554A;
}
.nature__tree-shadow {
  fill: #574940;
}

.bird {
  width: 8%;
  bottom: 37.5vw;
  left: 37%;
  fill: #c24444;
}
.bird__wing {
  transform-origin: center;
  fill: #943737;
}
.bird__blush {
  fill: #e05b5a;
}
.bird__stomach {
  fill: #e5e0c7;
}
.bird__details {
  fill: #602526;
}

.flowers {
  fill: #287561;
}
.flowers__bell {
  fill: #4c6aa0;
  transform-origin: center;
  animation: flowerRotate 2s ease-in-out alternate infinite;
}
.flowers__bell-shadow {
  fill: #375786;
}
.flowers--one, .flowers--three {
  animation: flowerWaveOne 2s ease-in-out alternate infinite;
}
.flowers--two {
  animation: flowerWaveTwo 2s ease-in-out alternate infinite;
}

.bulldozer {
  width: 60%;
  position: absolute;
  z-index: 2;
  bottom: 0;
  right: -60%;
  fill: #DBBB6B;
}
.bulldozer__pipe {
  fill: #6E707C;
  animation: pipeShake 0.5s linear infinite;
}
.bulldozer__lift {
  animation: rocking 0.5s alternate infinite;
}
.bulldozer__body {
  animation: upDown 0.5s alternate infinite;
}
.bulldozer__wheel {
  transform-origin: center;
  transform-box: fill-box;
  fill: #B1B7C9;
  stroke-width: 4;
  stroke: #8B8F99;
  animation: rotateWheel 0.8s infinite;
}
.bulldozer__yellow-light {
  fill: #EBCA71;
}
.bulldozer__yellow-mid {
  fill: #C1A35E;
}
.bulldozer__yellow-dark {
  fill: #947B4A;
}
.bulldozer__grey-light {
  fill: #B1B7C9;
}
.bulldozer__grey-mid {
  fill: #8B8F99;
}
.bulldozer__grey-dark {
  fill: #6E707C;
}
.bulldozer__grey-xdark {
  fill: #5F6269;
}

.forest-seed__mountains {
  fill: #C6DBDB;
}

.forest-seed__soil {
  fill: #967E69;
}
.forest-seed__soil-mid {
  fill: #826D5E;
}
.forest-seed__soil-dark {
  fill: #574940;
}
.forest-seed__soil-shadow {
  fill: #64554A;
}

.forest-seed__arm {
  fill: #D3BDAB;
}
.forest-seed__arm-light {
  fill: #E5D7CF;
}
.forest-seed__arm-highlight {
  fill: #DCCDC6;
}
.forest-seed__arm-shadow {
  fill: #AA9387;
}

.forest-seed__leaf {
  fill: #287561;
  transform-origin: center;
  width: 7%;
}

.forest-seed__leaf--one {
  bottom: 31.5vw;
  right: 35.5%;
  animation: leafMoveOne 1s alternate infinite;
}

.forest-seed__leaf--two {
  bottom: 36.5vw;
  right: 27%;
  animation: leafMoveTwo 1s alternate infinite;
}

.forest-seed__leaf--three {
  bottom: 31.2vw;
  right: 23%;
  animation: leafMoveThree 1s alternate infinite;
}

.forest-seed__base-top {
  width: 20%;
  fill: #1e5e4b;
  animation: leafMoveBase 1s alternate infinite;
}

.forest-seed__base-bottom {
  fill: url(#forest-seed__linear-gradient);
}

.mobile-landscape__cont {
  display: none;
}

@media screen and (max-height: 500px) and (orientation: landscape) {
  .mobile-landscape {
    display: none;
  }
  .mobile-landscape__cont {
    width: 100%;
    height: 100%;
    display: block;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 2rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .bulldozer__pipe,
  .bulldozer__lift,
  .bulldozer__body,
  .bulldozer__wheel {
    animation: none;
  }
}
/*# sourceMappingURL=test.css.map */