/* a,
div,
i,
img,
iframe {
  -khtml-user-drag: none;
  -webkit-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  pointer-events: auto;
} */

html {
  width: 100%;
  height: 100%;
}

body {
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
}

main {
  width: 100%;
  height: fit-content;
}

section {
  width: 100%;
  height: fit-content;
}

.wave {
  --size: 50px;
  --R: calc(var(--size) * 1.28);

  -webkit-mask: radial-gradient(var(--R) at 50% calc(1.8 * var(--size)),
      #000 99%,
      #0000 101%) calc(50% - 2 * var(--size)) 0 / calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at 50% calc(-0.8 * var(--size)),
      #0000 99%,
      #000 101%) 50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
  mask: radial-gradient(var(--R) at 50% calc(1.8 * var(--size)),
      #000 99%,
      #0000 101%) calc(50% - 2 * var(--size)) 0 / calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at 50% calc(-0.8 * var(--size)),
      #0000 99%,
      #000 101%) 50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
  background: linear-gradient(90deg, var(--first-color), var(--first-color));
  height: 150px;
  transition: 0.3s all;
}

.wave2 {
  --size: 50px;
  --R: calc(var(--size) * 1.28);

  -webkit-mask: radial-gradient(var(--R) at 50% calc(1.8 * var(--size)),
      #000 99%,
      #0000 101%) calc(50% - 2 * var(--size)) 0 / calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at 50% calc(-0.8 * var(--size)),
      #0000 99%,
      #000 101%) 50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
  mask: radial-gradient(var(--R) at 50% calc(1.8 * var(--size)),
      #000 99%,
      #0000 101%) calc(50% - 2 * var(--size)) 0 / calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at 50% calc(-0.8 * var(--size)),
      #0000 99%,
      #000 101%) 50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
  background: linear-gradient(90deg, var(--second-color), var(--second-color));
  height: 150px;
  rotate: 180deg;
  transition: 0.3s all;
}

.wave3 {
  --size: 50px;
  --R: calc(var(--size) * 1.28);

  -webkit-mask: radial-gradient(var(--R) at 50% calc(1.8 * var(--size)),
      #000 99%,
      #0000 101%) calc(50% - 2 * var(--size)) 0 / calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at 50% calc(-0.8 * var(--size)),
      #0000 99%,
      #000 101%) 50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
  mask: radial-gradient(var(--R) at 50% calc(1.8 * var(--size)),
      #000 99%,
      #0000 101%) calc(50% - 2 * var(--size)) 0 / calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at 50% calc(-0.8 * var(--size)),
      #0000 99%,
      #000 101%) 50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
  background: linear-gradient(90deg, var(--second-color), var(--second-color));
  height: 150px;
  transition: 0.3s all;
}

.wave4 {
  --size: 50px;
  --R: calc(var(--size) * 1.28);

  -webkit-mask: radial-gradient(var(--R) at 50% calc(1.8 * var(--size)),
      #000 99%,
      #0000 101%) calc(50% - 2 * var(--size)) 0 / calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at 50% calc(-0.8 * var(--size)),
      #0000 99%,
      #000 101%) 50% var(--size) / calc(4 * var(--size)) 100% repeat-x;
  mask: radial-gradient(var(--R) at 50% calc(1.8 * var(--size)),
      #000 99%,
      #0000 101%) calc(50% - 2 * var(--size)) 0 / calc(4 * var(--size)) 100%,
    radial-gradient(var(--R) at 50% calc(-0.8 * var(--size)),
      #0000 99%,
      #000 101%) 50% var(--size) / calc(4 * var(--size)) 100% repeat-x;

  /* Ganti warna atas dari hitam (black) menjadi var(--second-color) */
  background: linear-gradient(90deg, black, black);
  height: 150px;
  transition: 0.3s all;
}

@media screen and (min-width: 850px) {
  .wave {
    --size: 50px;
    height: 150px;
  }

  .wave2 {
    --size: 50px;
    height: 150px;
  }

  .wave3 {
    --size: 50px;
    height: 150px;
  }

  .wave4 {
    --size: 50px;
    height: 150px;
  }
}

@media screen and (max-width: 850px) {
  .wave {
    --size: 30px;
    height: 100px;
  }

  .wave2 {
    --size: 30px;
    height: 100px;
  }

  .wave3 {
    --size: 30px;
    height: 100px;
  }

  .wave4 {
    --size: 30px;
    height: 100px;
  }
}

@media screen and (max-width: 550px) {
  .wave {
    --size: 20px;
    height: 50px;
  }

  .wave2 {
    --size: 20px;
    height: 50px;
  }

  .wave3 {
    --size: 20px;
    height: 50px;
  }

  .wave4 {
    --size: 20px;
    height: 50px;
  }
}