@import url("./base.css");

/*
Contains CSS specific to lists
*/

@property --radial-fill {
	syntax: "<percentage>";
	inherits: false;
	initial-value: 0%;
}

.article {
	*[lang="hi"] {
		font-family: "Kalam";
	}

	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: "Fredericka the Great", serif;
		font-weight: 400;
		margin-block: 0.5em;

		color: var(--heading-text-color);
	}

	li {
		margin-left: 4ch;
		margin-block: 0.5em;

		& p::first-letter {
			font-family: "Fredericka The Great", serif;
			text-transform: uppercase;
			font-size: 2rem;
			color: var(--heading-text-color);
		}
	}

	ul > li:has(ul) {
		& > p {
			padding-block: 0.5em;
			padding-inline-start: 2ch;
		}

		& a {
			--radial-fill: 0%;
			background-image: radial-gradient(
				circle at center in lab,
				blue var(--radial-fill),
				red calc(100% - var(--radial-fill))
			);
			background-position-y: 200%;
			color: transparent;
			background-clip: text;

			transition: --radial-fill 200ms ease-in-out;

			&:hover {
				--radial-fill: 100%;
				color: transparent;
			}
		}
	}
}