.shapesContainer {
  position: absolute;
  overflow: hidden;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -10;
}

.shape {
  --blue: invert(53%) sepia(80%) saturate(4689%) hue-rotate(189deg)
    brightness(92%) contrast(93%);
  --teal: invert(76%) sepia(39%) saturate(578%) hue-rotate(110deg)
    brightness(91%) contrast(88%);

  position: absolute;
  filter: var(--blue);
  opacity: 20%;

  transition: 0.5s;
}

.homeDots {
  top: calc(0.06 * (580rem / 0.65) / 16);
  right: 90vw;
  width: calc(168rem / 16);
  height: calc(204rem / 16);
  filter: var(--teal);
  opacity: 25%;
}

.homeHash1 {
  top: calc(0.32 * (580rem / 0.65) / 16);
  left: 12vw;
  width: calc(60rem / 16);
  height: calc(60rem / 16);
}

.homeTriangle1 {
  top: calc(0.05 * (580rem / 0.65) / 16);
  left: 20vw;
  width: calc(68rem / 16);
  height: calc(68rem / 16);
  transform: rotate(18deg);
  filter: var(--teal);
  opacity: 30%;
}

.homeWaves1 {
  top: calc(0.5 * (580rem / 0.65) / 16);
  left: 24vw;
  width: calc(116rem / 16);
  height: calc(58rem / 16);
  filter: var(--teal);
}

.homeTriangle2 {
  top: calc(0.02 * (580rem / 0.65) / 16);
  right: 40vw;
  width: calc(68rem / 16);
  height: calc(68rem / 16);
  transform: rotate(-26deg);
}

.homePlus {
  top: calc(0.42 * (580rem / 0.65) / 16);
  right: 22vw;
  width: calc(48rem / 16);
  height: calc(48rem / 16);
}

.homeWaves2 {
  top: calc(0.1 * (580rem / 0.65) / 16);
  right: 18vw;
  width: calc(102rem / 16);
  height: calc(50rem / 16);
  filter: var(--teal);
}

.homeHash2 {
  top: calc(0.25 * (580rem / 0.65) / 16);
  right: 9vw;
  width: calc(60rem / 16);
  height: calc(60rem / 16);
}

@media only screen and (max-height: calc((580rem / 0.65) / 16)) {
  .homeDots {
    top: 6vh;
  }
  .homeHash1 {
    top: 32vh;
  }
  .homeTriangle1 {
    top: 5vh;
  }
  .homeWaves1 {
    top: 50vh;
  }
  .homeTriangle2 {
    top: 2vh;
  }
  .homePlus {
    top: 42vh;
  }
  .homeWaves2 {
    top: 10vh;
  }
  .homeHash2 {
    top: 25vh;
  }
}

@media only screen and (max-height: calc((420rem / 0.65) / 16)) {
  .homeDots {
    top: calc(0.06 * (420rem / 0.65) / 16);
  }
  .homeHash1 {
    top: calc(0.32 * (420rem / 0.65) / 16);
  }
  .homeTriangle1 {
    top: calc(0.05 * (420rem / 0.65) / 16);
  }
  .homeWaves1 {
    top: calc(0.5 * (420rem / 0.65) / 16);
  }
  .homeTriangle2 {
    top: calc(0.02 * (420rem / 0.65) / 16);
  }
  .homePlus {
    top: calc(0.42 * (420rem / 0.65) / 16);
  }
  .homeWaves2 {
    top: calc(0.1 * (420rem / 0.65) / 16);
  }
  .homeHash2 {
    top: calc(0.25 * (420rem / 0.65) / 16);
  }
}

@media only screen and (max-width: calc(768rem / 16)) {
  .homeDots {
    top: 0;
    right: 80vw;
    width: calc(168rem / 16);
    height: calc(152rem / 16);
    filter: var(--blue);
    opacity: 20%;
  }

  .homeHash1 {
    top: calc(190rem / 16);
    left: unset;
    right: 87vw;
    width: calc(60rem / 16);
    height: calc(60rem / 16);
  }

  .homeTriangle1 {
    top: calc(266rem / 16);
    left: unset;
    right: 78vw;
    width: calc(45rem / 16);
    height: calc(45rem / 16);
    transform: rotate(-26deg);
    filter: var(--blue);
    opacity: 20%;
  }

  .homeWaves1 {
    display: none;
  }

  .homeTriangle2 {
    top: calc(4rem / 16);
    right: 3vw;
    width: calc(45rem / 16);
    height: calc(45rem / 16);
    transform: rotate(16deg);
  }

  .homePlus {
    display: none;
  }

  .homeWaves2 {
    top: calc(168rem / 16);
    left: 86vw;
    right: unset;
    width: calc(102rem / 16);
    height: calc(50rem / 16);
    filter: var(--blue);
  }

  .homeHash2 {
    display: none;
  }
}