/* -- GENERAL -- */

:root {
	--padding-template-vertical: clamp(1.5rem,1.5rem + 0vw,1.5rem);
	--padding-template-horizontal: clamp(1rem,0.848rem + 0.758vw,1.5rem);
}



html {
  interpolate-size: allow-keywords;
}

body {
  /*background-image: url("https://efrogstudio.com/images/button-background.webp");*/
  background-attachment: fixed;
}

nav {
  width: fit-content;
  /*margin: 3rem auto;*/
	color: black;
  /*background: hsl(0 0% 0% / 0.8);*/
	/*background: hsl(100 100% 100% / 0.8);*/
	background: var(--neutral-200);

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

  isolation: isolate;

  anchor-name: --hovered-link;

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

  &::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: 100vw;

    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(100 100 100 / 0.2);
    backdrop-filter: blur(20px);
  }

  &::after {
    z-index: -2;
    background-image: url("https://efrogstudio.com/images/button-background.webp");
    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: white;
  }
}

/* 
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;
}




/*body {
	background-image: #fff;
	background-attachment: fixed;
}
nav {
    width: fit-content;
	margin: 3rem auto;
	color: white;
	background: hsl(0 0% 0% / 0.8);
	padding: 8px;
	border-radius: 8px;
	
	isolation: isolate;
	
	/*position: relative;*/
	
/*	anchor-name: --hovered-link;
	
	li:hover {
		anchor-name: --hovered-link;
	}
	
	&::before,
	&::after {
		content: "";
		position: absolute;
		/*inset: auto 0 0;*/
/*		top: calc(anchor(bottom) - 10px);
		left: calc(anchor(left) + 1rem);
		right: calc(anchor(right) + 1rem);
		bottom: calc(anchor(bottom) + 5px);
		/*height: 10px;*/
/*		background: steelblue;
		
		border-radius: 10px;
		
		position-anchor: --hovered-link;
		
		transition: 500ms linear(0, 0.029 1.3%, 0.119 2.8%, 0.659 8.7%, 0.871 11.6%, 1.009 14.6%, 1.052 16.2%, 1.078 17.9%, 1.088 19.7%, 1.085 21.7%, 1.014 31.4%, 0.993 38%, 1.001 57.6%, 1);
	}
	
	&::before {
		z-index: -1;
		background: rgb(0 0 0 / 0.4);
		backdrop-filter: blur(2px);
	}
	
	&::after {
		z-index: -2;
		background-image: url("http://website.com");
		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%;
		}
	}

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

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

	a {
		display: block;
		padding: 1rem;
		text-decoration: none;
		color: white;
	}
}*/