html {
  interpolate-size: allow-keywords;
}

body {
  background-image: url("https://embroiderygalore.neocities.org/Gradient%20Dots%20Background.gif");
  background-attachment: fixed;
}

nav {
  width: fit-content;
  margin: 3rem auto;
  background: hsl(0 0% 0% / 0.8);

  padding: 8px;
  border-radius: 8px;

  isolation: isolate;

  anchor-name: --hovered-link;

  li:hover {
    anchor-name: --hovered-link;
  }

  &::before,
  &::after {
    content: "";
    content: "";
    position: absolute;
    top: calc(anchor(bottom) - 10px);
    left: calc(anchor(left) + 1rem);
    right: calc(anchor(right) + 1rem);
    bottom: calc(anchor(bottom) + 5px);
    border-radius: 10px;

    position-anchor: --hovered-link;

    transition: 500ms
      linear(
        0,
        0.029 1.6%,
        0.123 3.5%,
        0.651 10.6%,
        0.862 14.1%,
        1.002 17.7%,
        1.046 19.6%,
        1.074 21.6%,
        1.087 23.9%,
        1.086 26.6%,
        1.014 38.5%,
        0.994 46.3%,
        1
      );
  }

  &::before {
    z-index: -1;
    background: rgb(0 0 0 / 0.2);
    backdrop-filter: blur(2px);
  }

  &::after {
    z-index: -2;
    background-image: url("https://embroiderygalore.neocities.org/Gradient%20Dots%20Background.gif");
    background-attachment: fixed;
  }

  &:has(a:hover)::before,
  &:has(a:hover)::after {
    top: anchor(top);
    left: anchor(left);
    right: anchor(right);
    bottom: anchor(bottom);

    @supports (corner-shape: squircle) {
      corner-shape: squircle;
      border-radius: 50%;
    }
  }

  &:has(li:first-of-type a:hover)::before,
  &:has(li:first-of-type a:hover)::after {
    @supports (corner-shape: squircle) {
      border-radius: 32px 50% 50% 32px;
    }
  }

  &:has(li:last-of-type a:hover)::before,
  &:has(li:last-of-type a:hover)::after {
    @supports (corner-shape: squircle) {
      border-radius: 50% 32px 32px 50%;
    }
  }

  @supports (corner-shape: squircle) {
    border-radius: 24px;
    corner-shape: squircle;
  }

  > ul {
    padding: 0;
    margin: 0;
    list-style: none;
    display: flex;
  }

  a {
    display: block;
    padding: 1rem;
    text-decoration: none;
    color: pink;
  }
}

/* 
nav ul > :nth-child(1) { anchor-name: --link-1; }
nav ul > :nth-child(2) { anchor-name: --link-2; }
nav ul > :nth-child(3) { anchor-name: --link-3; }
nav ul > :nth-child(4) { anchor-name: --link-4; }


nav:has(ul > :nth-child(1):hover)::after {
  position-anchor: --link-1;
}

nav:has(ul > :nth-child(2):hover)::after {
  position-anchor: --link-2;
}

nav:has(ul > :nth-child(3):hover)::after {
  position-anchor: --link-3;
}

nav:has(ul > :nth-child(4):hover)::after {
  position-anchor: --link-4;
} */

html {
  color-scheme: dark;
}

body {
  font-family: system-ui;
  font-size: 2rem;
}