.illustration {
  position: fixed;
  z-index: -1;
  width: 100vw;
  height: var(--app-height);
  top: 0;
  left: 0;
  pointer-events: none;
  overflow: hidden;
}

/* SECTION Clouds */

/* ANCHOR Animation */

@keyframes cloudLeft {
  from {
    left: 100%;
  }

  to {
    left: -130px;
  }
}

@keyframes cloudRight {
  from {
    right: 100%;
  }

  to {
    right: -80px;
  }
}

.illustration .cloud {
  position: absolute;
}

.illustration .cloud.one {
  -moz-animation: cloudLeft 60s infinite linear;
  -webkit-animation: cloudLeft 60s infinite linear;
  animation: cloudLeft 60s infinite linear;
}

.illustration .cloud.two {
  -moz-animation: cloudRight 80s infinite linear;
  -webkit-animation: cloudRight 80s infinite linear;
  animation: cloudRight 80s infinite linear;
}

/* ANCHOR Media Query */

@media (min-width: 1024px) {
  .illustration .cloud.one {
    top: 42%;
  }

  .illustration .cloud.two {
    top: 35%;
  }
}

@media (max-width: 1023px) {
  .illustration .cloud.one {
    width: 90px;
    top: 65%;
  }

  .illustration .cloud.two {
    width: 50px;
    top: 10%;
  }
}

/* ANCHOR Media Query Height */

@media (min-height: 901px) and (min-width: 1024px) {
  .illustration .cloud.one {
    width: 130px;
  }
  .illustration .cloud.two {
    width: 80px;
  }
}

@media (max-height: 900px) and (min-width: 1024px) {
  .illustration .cloud.one {
    width: 110px;
  }
  .illustration .cloud.two {
    width: 60px;
  }
}

/* !SECTION */

/* SECTION Bottom */

.illustration .bottom {
  position: absolute;
  bottom: 0;
  width: 100vw;
  display: flex;
  flex-direction: column;
}

/* ANCHOR Media Query */

@media (max-width: 1023px) {
  .illustration .bottom {
    height: 100px;
  }
}

/* ANCHOR Media Query Height */

@media (min-height: 901px) and (min-width: 1024px) {
  .illustration .bottom {
    height: 300px;
  }
}

@media (max-height: 900px) and (min-width: 1024px) {
  .illustration .bottom {
    height: 240px;
  }
}

@media (max-height: 900px) and (min-width: 1024px) {
  .illustration .bottom {
    height: 100px;
    transform: translateY(15px);
  }

  .illustration .bottom footer {
    z-index: 1000;
  }
}

/* !SECTION */

/* SECTION Grass */

.illustration .bottom .grass {
  width: 100vw;
  display: block;
}

.illustration .grass.med {
  background-color: var(--illustration-green-med);
}

.illustration .grass.dark {
  background-color: var(--illustration-green-dark);
}

/* ANCHOR Media Query */

@media (max-width: 1023px) {
  .illustration .grass.med {
    height: 30px;
  }

  .illustration .grass.dark {
    height: 40px;
  }
}

/* ANCHOR Media Query Height */

@media (min-height: 901px) and (min-width: 1024px) {
  .illustration .grass.med {
    height: 90px;
  }

  .illustration .grass.dark {
    height: 125px;
  }
}

@media (max-height: 900px) and (min-width: 1024px) {
  .illustration .grass.med {
    height: 70px;
  }

  .illustration .grass.dark {
    height: 105px;
  }
}

/* !SECTION */

/* SECTION Track */

.illustration .trackWrapper {
  width: 100vw;
  height: 85px;
  position: relative;
  background-color: var(--illustration-green-light);
}

/* ANCHOR Media Query */

@media (max-width: 1023px) {
  .illustration .trackWrapper {
    height: 30px;
  }
}

/* ANCHOR Media Query Height */

@media (min-height: 901px) and (min-width: 1024px) {
  .illustration .trackWrapper {
    height: 85px;
  }
}

@media (max-height: 900px) and (min-width: 1024px) {
  .illustration .trackWrapper {
    height: 65px;
  }
}

.illustration .trackWrapper .track {
  display: block;
  position: absolute;
  width: 100%;
  height: 45px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-image: url('/img/illustration/track.svg');
  background-position: center;
  background-repeat: repeat-x;
  background-size: contain;
}

/* ANCHOR Media Query */

@media (max-width: 1023px) {
  .illustration .trackWrapper .track {
    height: 18px;
  }
}

/* ANCHOR Media Query Height */

@media (min-height: 901px) and (min-width: 1024px) {
  .illustration .trackWrapper .track {
    height: 45px;
  }
}

@media (max-height: 900px) and (min-width: 1024px) {
  .illustration .trackWrapper .track {
    height: 35px;
  }
}

/* !SECTION */

/* SECTION Obstacle */

.illustration .trackWrapper .obstacle {
  position: absolute;
  top: -20px;
  z-index: 10;
}

.illustration .trackWrapper .obstacle.one {
  left: 200px;
}

.illustration .trackWrapper .obstacle.two {
  left: 50%;
  transform: translateX(-50%);
}

.illustration .trackWrapper .obstacle.three {
  right: 200px;
}

/* ANCHOR Media Query */

@media (max-width: 1023px) {
  .illustration .trackWrapper .obstacle {
    width: 30px;
  }
}

@media (max-width: 767px) {
  .illustration .trackWrapper .obstacle.one,
  .illustration .trackWrapper .obstacle.three {
    display: none;
  }
}

/* ANCHOR Media Query Height */

@media (min-height: 901px) and (min-width: 1024px) {
  .illustration .trackWrapper .obstacle {
    width: 47px;
  }
}

@media (max-height: 900px) and (min-width: 1024px) {
  .illustration .trackWrapper .obstacle {
    width: 38px;
  }
}

@media (max-height: 900px) and (min-width: 1024px) {
  .illustration .trackWrapper .obstacle {
    width: 30px;
  }
}

/* !SECTION */

/* SECTION Character */

.illustration .trackWrapper .character {
  width: 100%;
  position: absolute;
  z-index: 20;
  -moz-animation: run 8s infinite linear;
  -webkit-animation: run 8s infinite linear;
  animation: run 8s infinite linear;
}

/* ANCHOR Media Query */

@media (max-width: 1023px) {
  .illustration .trackWrapper .character {
    --character-size: 150px;
  }
}

/* ANCHOR Media Query Height */

@media (min-height: 901px) and (min-width: 1024px) {
  .illustration .trackWrapper .character {
    --character-size: 300px;
  }
}

@media (max-height: 900px) and (min-width: 1024px) {
  .illustration .trackWrapper .character {
    --character-size: 230px;
  }
}

/* ANCHOR Animation */

@keyframes run {
  from {
    left: 100%;
  }

  to {
    left: calc(var(--character-size) * -1);
  }
}

.illustration .trackWrapper .character img {
  width: var(--character-size);
  height: var(--character-size);
  position: relative;
}

.illustration .trackWrapper .character.boy {
  animation-delay: 3s;
}

/* ANCHOR Media Query */

@media (max-width: 1023px) {
  .illustration .trackWrapper .character {
    top: -100px;
  }
}

/* ANCHOR Media Query Height */

@media (min-height: 901px) and (min-width: 1024px) {
  .illustration .trackWrapper .character {
    top: -200px;
  }
}

@media (max-height: 900px) and (min-width: 1024px) {
  .illustration .trackWrapper .character {
    top: -155px;
  }
}

/* !SECTION */

/* SECTION Tree */

.illustration .trackWrapper .tree {
  position: absolute;
  bottom: calc(100% - 5px);
  z-index: 1;
}

/* ANCHOR Media Query */

@media (max-width: 1023px) {
  .illustration .trackWrapper .tree {
    width: 30px;
  }
}

/* ANCHOR Media Query Height */

@media (min-height: 901px) and (min-width: 1024px) {
  .illustration .trackWrapper .tree {
    width: 50px;
  }
}

@media (max-height: 900px) and (min-width: 1024px) {
  .illustration .trackWrapper .tree {
    width: 40px;
  }
}

@media (max-height: 768px) and (min-width: 1024px) {
  .illustration .trackWrapper .tree {
    width: 30px;
  }
}

.illustration .trackWrapper .tree.one {
  left: 14%;
}

.illustration .trackWrapper .tree.two {
  right: 28%;
}

.illustration .trackWrapper .tree.three {
  right: 5%;
}

/* ANCHOR Media Query */

@media (max-width: 480px) {
  .illustration .trackWrapper .tree.one {
    left: 10%;
  }

  .illustration .trackWrapper .tree.two {
    right: 10%;
  }

  .illustration .trackWrapper .tree.three {
    display: none;
  }
}

/* !SECTION */