@import url("https://fonts.googleapis.com/css2?family=Signika:wght@300..700&display=swap");

:root {
	--scroll-percent: 0;
  --c-primary: #ffc0f0;
  --c-accent: magenta;
}

html {
	font-family: "Signika", sans-serif;
	font-optical-sizing: auto;
	font-weight: 800;
	font-style: normal;
	font-variation-settings: "GRAD" 0;
}

body {
	margin: 0;
	background-image: url("https://img.freepik.com/free-vector/abstract-pattern-design_1298-50.jpg?t=st=1742149414~exp=1742153014~hmac=7a6852afddbf4fb4add720928c01e3e9ebb9a732d3dff67ead422381596d50aa&w=1380");
	background-size: 200px;
	background-repeat: repeat;
	/* backdrop-filter: brightness(.4); */
  /* backdrop-filter: contrast(5); */
	height: 100%;
	width: 100%;
}

main {
	padding: 1rem;
	/* max-width: 30rem; */
}

h1 {
	font-size: 15vw;
  filter: drop-shadow(2px 4px 4px black);
	background: linear-gradient(to right, #c23068, #f5498c, #ffe4ef);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
  text-shadow: #ffb4db 3px -2px 0px;
}

.navigation {
	& ul {
		list-style: none;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 1rem;

		& li {
			border: solid magenta 2px;
			background-color: #ffc0f0;
			border-radius: 10px;
      position: relative;
      

      &::before {
        content: '';
        width: 30%;
        height: 5px;
        background-color: rgba(255, 255, 255, 0.275);
        position: absolute;
        top: 5px;
        left: 5px;
        border-radius: 5px;
        pointer-events: none;
        transition-duration: 0.1s;
        transition-property: background, transform;
        transform-origin: left;
        
      }

      &:has(a:active)::before {
        background-color: rgba(255, 255, 255, 0.683);
        transform: translateY(15px) scale(2,5);
      }

			& a {
				color: magenta;
				display: inline-block;
				padding: 1rem;
				text-decoration: none;
        transition: background 0.1s;
			}

			& a:active {
				background-color: rgb(243, 243, 166);
			}
		}
	}
}



.flex {
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
}

ul.unstyled {
	padding: 0;
	list-style: none;
}