@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Mansalva&display=swap');

:root {
	--main-width: 90ch;
	--main-column-width: 1ch;
	--block-gap: 1em;
	--marker-text-font: "Mansalva", sans-serif;

	--theme: lightgoldenrodyellow;
	--on-theme: oklch(from var(--theme) .1 c h);
	--theme-text: var(--ontheme);
	--theme-line-height: 1.6;
}

html {
	box-sizing: border-box;
	font-family: sans-serif;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

html,
body {
	color: var(--theme-text);
	line-height: var(--theme-line-height);
	margin: 0;
	min-height: 100svh;
	padding: 0;
}

.header-layout {
	color: var(--theme-text);
	font-family: "Mansalva", sans-serif;
	margin-inline: auto;
	position: relative;
}

.line-height-1 {
	line-height: 1;
}

.text {
	color: oklch(from var(--mark-color) l c h);
	/* font-size: 48px; */
	font-family: var(--marker-text-font);
	font-weight: 600;
	padding: 6px 12px;
	padding: 0.125em 0.25em;
	position: relative;
	text-align: center;
	-webkit-user-select: none;
	user-select: none;
	white-space: nowrap;
	width: fit-content;

	&::before {
		border-radius: 3px 5px 3px 5px;
		content: '';
		position: absolute;
		inset: 0;
		z-index: -1;
		background:
			conic-gradient(at 0 100%, rgb(var(--mark-color) / 100%) 1%, #fff0 3%) no-repeat 0 0 / auto 120%,
			conic-gradient(from 180deg at 100% 0, #fff0, rgb(var(--mark-color) / 100%) 1%, #fff0 4%) no-repeat 100% 100% / auto 120%,
			linear-gradient(var(--mark-bg-angle), rgb(var(--mark-color) / 60%), rgb(var(--mark-color) / 20%) 75%, rgb(var(--mark-color) / 55%)) no-repeat center / auto;
	}

	&.yellow-mark {
		--mark-color: 255 232 62;
		--mark-bg-angle: 50deg;

		&::before {
			rotate: 1deg;
			scale: 1.1;
			transform: skew(-5deg);
		}
	}

	&.green-mark {
		--mark-color: 91 233 92;
		--mark-bg-angle: 30deg;

		&::before {
			scale: 1;
			transform: skew(-12deg);
		}
	}

	&.red-mark {
		--mark-color: 255 100 185;
		--mark-bg-angle: 150deg;

		&::before {
			rotate: 0.5deg;
			transform: skew(5deg);
		}
	}
}

.fc {
	align-items: center;
	display: flex;
	justify-content: center;
}
.margin-block-1 {
	margin-block: var(--block-gap);
}
.margin-block-start-0\.5 {
	margin-block-start: calc(var(--block-gap) * 0.5);
}
.margin-block-end-1 {
	margin-block-end: var(--block-gap);
}

.h1 {
	font-family: "Mansalva", sans-serif;
	font-size: 3rem;
	font-weight: 700;
}
.h2 {
	font-family: "Mansalva", sans-serif;
	font-size: 2rem;
	font-weight: 600;
}
.main-layout {
	max-width: calc(var(--main-width) + 2 * var(--main-column-width));
}

.text-align-center {
	text-align: center;
}

.margin-inline-auto {
	margin-inline: auto;
}

.grid {
	display: grid;
}

.n-col {
	grid-template-columns: repeat(auto-fit, minmax(30ch, 1fr));
}
.a {
	text-decoration: 1px solid underline currentColor;
	text-underline-offset: 3px;
	&:hover {
		text-decoration-style: dashed;
	}
}