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

body {
  font-family: "Google Sans Flex", sans-serif;
  background-color: #3c2b6b;
  height: 100dvh;
  overflow: hidden;
}

.illustrations {
  visibility: hidden;
  position: relative;
  min-height: 100svh;
  overflow: hidden;
}

.parallax-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}

.illustrations svg,
.illustrations img {
  display: block;
  position: absolute;
}

svg {
  overflow: visible;
}


.planeta {
  user-select: none;
  width: 200vw;
  height: auto;
  top: 50vh;
  left: -32%;
}

.ojo {
  width: 21vw;
  height: auto;
  top: 40vh;
  left: 9%;
}

.esfera-1 {
  width: 97vw;
  height: auto;
  top: 52vh;
  left: -13%;
  z-index: -10;
}

.esfera-2 {
  width: 45vw;
  height: auto;
  top: 57.5vh;
  right: -18%;
}

.esfera-3 {
  width: 5vw;
  height: auto;
  top: 64vh;
  right: 25%;
}


.garabato {
  width: 33vw;
  height: auto;
  top: 53vh;
  left: 2%;
}

#garabato-dot {
  display: none;
}

@media (min-width: 768px) {

  .planeta {
    width: 175vw;
    top: 45vh;
    left: -23%;
  }

  .ojo {
    width: 18vw;
    top: 31vh;
  }

  .esfera-1 {
    top: 41vh;
  }

  .esfera-2 {
    width: 42vw;
    top: 53.3vh;
    right: -15%;
  }

  .esfera-3 {
    width: 3vw;
    top: 60vh;
  }

  .garabato {
    width: 32vw;
    top: 46vh;
    left: 5%;
  }
}

@media (min-width: 1024px) and (orientation: landscape) {
  .planeta {
    width: 105vw;
    top: 38vh;
    left: 5%;
  }

  .ojo {
    width: 10vw;
  }

  .esfera-1 {
    width: 65vw;
    left: 3%;
  }

  .esfera-2 {
    width: 27vw;
    top: 49vh;
    right: 8%;
  }

  .esfera-3 {
    width: 2vw;
    right: 36%;
  }

  .garabato {
    width: 17vw;
    top: 40vh;
    left: 23%;
  }
}