header {
  position: relative;
  isolation: isolate;
  padding-block-start: 100px;
}

header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;

  background-color: light-dark(#eeeee0, #11111f);
  clip-path: shape(
    from 0 100%,
    vline to 25px,
    curve to 4.17% 29px with 2.78% 31px,
    curve to 6.94% 27.5px with 5.56% 27px,
    curve to 9.72% 34.5px with 8.33% 28px,
    curve to 12.5% 29.5px with 11.11% 41px,
    curve to 15.28% 33px with 13.89% 18px,
    curve to 18.06% 46.5px with 16.67% 48px,
    curve to 20.83% 35px with 19.44% 45px,
    curve to 23.61% 30.5px with 22.22% 25px,
    curve to 26.39% 31px with 25% 36px,
    curve to 29.17% 20.5px with 27.78% 26px,
    curve to 31.94% 18.5px with 30.56% 15px,
    curve to 34.72% 21px with 33.33% 22px,
    curve to 37.5% 34px with 36.11% 20px,
    curve to 40.28% 28px with 38.89% 48px,
    curve to 43.06% 21px with 41.67% 8px,
    curve to 45.83% 27px with 44.44% 34px,
    curve to 48.61% 31px with 47.22% 20px,
    curve to 51.39% 29.5px with 50% 42px,
    curve to 54.17% 17.5px with 52.78% 17px,
    curve to 56.94% 15.5px with 55.56% 18px,
    curve to 59.72% 30.5px with 58.33% 13px,
    curve to 62.5% 43px with 61.11% 48px,
    curve to 65.28% 34px with 63.89% 38px,
    curve to 68.06% 30.5px with 66.67% 30px,
    curve to 70.83% 21.5px with 69.44% 31px,
    curve to 73.61% 6px with 72.22% 12px,
    curve to 76.39% 12.5px with 75% 0px,
    curve to 79.17% 31.5px with 77.78% 25px,
    curve to 81.94% 39.5px with 80.56% 38px,
    curve to 84.72% 31.5px with 83.33% 41px,
    curve to 87.5% 32.5px with 86.11% 22px,
    curve to 90.28% 35.5px with 88.89% 43px,
    curve to 93.06% 26.5px with 91.67% 28px,
    curve to 95.83% 17px with 94.44% 25px,
    curve to 100% 25px with 97.22% 9px,
    vline to 100%,
    hline to 0
  );
  transform: scaleY(-1);
}

.home {
  display: flex;
  inset-block-start: 0.5rem;
  inset-inline-start: 1rem;
  position: absolute;
  z-index: 2;

  a {
    background-color: transparent;
    border: none;
    font: inherit;
    padding: 0.5rem;
    transition: all 0.2s ease-in-out;

    img {
        border-radius: 50%;
    }
  }
}

.mode {
  display: flex;
  inset-block-start: 0.5rem;
  inset-inline-end: 1rem;
  position: absolute;
  text-align: end;
  z-index: 2;

  button {
    background-color: transparent;
    border: none;
    font: inherit;
    padding: 0.5rem 0.75rem;
    transition: all 0.2s ease-in-out;
  }
}