@layer base {
	:root {
		--black: #000000FF;
		--white: #ffffff;
		--text: #cdd6f4;
		--background: #1e1e2e;
		--pink: #f5c2e7;
		--sapphire: #74c7ec;
		--green: #a6e3a1;
		--main: "Montserrat", sans-serif;
		--heading: "EB Garamond", serif;
		--base-size: 1rem;
		--scale: 1.2;
		--h1: calc(var(--h2) * var(--scale));
		--h2: calc(var(--h3) * var(--scale));
		--h3: calc(var(--h4) * var(--scale));
		--h4: calc(var(--h5) * var(--scale));
		--h5: calc(var(--h6) * var(--scale));
		--h6: var(--base-size);
	}
	body {
		font-family: var(--main);
		margin: 0;
		padding: 0;
		font-size: var(--base-size);
		line-height: 1.5;
		background-color: var(--background);
	}
	p {
		color: var(--text);
	}
	ul {
		color: var(--text);
		list-style-type: none;
	}
	li {
		padding-top: 2rem;
	}
	h1,
	h2,
	h3,
	h4,
	h5,
	h6 {
		font-family: var(--heading);
		color: var(--text);
	}
	h1 {
		font-size: var(--h1);
	}
	h2 {
		font-size: var(--h2);
	}
	h3 {
		font-size: var(--h3);
	}
	h4 {
		font-size: var(--h4);
	}
	h5 {
		font-size: var(--h5);
	}
	h6 {
		font-size: var(--h6);
	}
	a {
		color: var(--pink);
		text-decoration: underline;
	}
	a:hover {
		color: var(--sapphire);
		text-decoration: none;
	}
	a:visited {
		color: var(--green);
	}
}
@layer responsive {
	@media screen and (max-width: 768px) {
		:root {
			--base-size: 0.9rem;
			--scale: 1.15;
		}
		body {
			padding: 0 1rem;
		}
		img {
			max-width: 100%;
			height: auto;
		}
	}

	@media screen and (max-width: 480px) {
		:root {
			--base-size: 0.85rem;
			--scale: 1.1;
		}
		body {
			padding: 0 0.5rem;
		}
		li {
			padding-top: 1.5rem;
		}
		img {
			max-width: 100%;
			height: auto;
		}
	}

	@media screen and (min-width: 1200px) {
		:root {
			--base-size: 1.1rem;
			--scale: 1.25;
		}
		body {
			max-width: 1200px;
			margin: 0 auto;
		}
		img {
			max-width: 100%;
			height: auto;
		}
	}
}