@font-face {
	font-family: "Taters";
	src: url("/fonts/Taters0.2-Baked.otf");
}
@font-face {
	font-family: "Taters Fried";
	src: url("/fonts/Taters0.2-Fried.otf");
}

::selection {
	color: var(--bg);
	-webkit-text-fill-color: var(--bg);
	background: var(--fg);
}

body {
	--fg: #000;
	--bg: #fbf7f4;
	--bg: #fff;
	--acolor: #d89d00;
	/* --acolor: #d8003b; */
	/* --acolor: #fff; */
	
	--fgtranslucent: #00000040;
	--altbg: #fcecdc;

	--headerfont: "Taters";
	--bodyfont: "Literata";
	--monofont: "DM Mono";

	
	color: var(--fg);

	font-family: var(--monofont);


	background: linear-gradient(
		to right,
		var(--bg) 40%,
		var(--altbg) 40%,
		var(--altbg) 60%,
		var(--bg) 60%,
		var(--bg) 100%
	);
	background-size: .6rem;
}

img {
	max-width: 100%;
}

h1, h2, h3, h4, h5, h6 {
	font-weight: normal;
	margin: 0;
	line-height: 1;
}

strong {
	font-weight: bold;
}

.recipe a, #recipe-header a {
	display: inline-block;
	/* width: min-content; */
	background: linear-gradient(to bottom right, #d89d00, #d8003b);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: #d89d00;
	text-decoration: none;
}
a:hover, #recipe-header a:hover {
	text-decoration: underline;
	text-decoration-color: var(--fg);
}

#recipe-header {
	margin: auto;
	margin-bottom: 1rem;
	padding: 0 .8rem;
}
#cookbooktitle {
	margin: 0;
	font-family: 'Taters Fried';
	font-size: clamp(2.25rem, 9vw, 4rem);
	text-align: center;
	line-height: 1;
	letter-spacing: -0.05em;
}
/* comment */
.recipe h4 {
	margin-top: 1rem;
	font-size: 1.5rem;
	font-style: italic;
	line-height: 1.3;
	font-variation-settings: "opsz" 10;
}

.recipe > p:first-child {
	margin-top: 0rem;
}
.recipe > p:first-child::first-letter {
	float: left;
	font-size: 2.9rem;
	line-height: 1;
	margin-right: .25rem;
	font-variation-settings: 'opsz' 64, 'wght' 800;
}

.recipe h5 {
	margin-top: 2rem;
	padding-top: 4px;
	border-top: 1px solid black;
	font-variation-settings: 'opsz' 10, 'wght' 800;
	letter-spacing: .2em;
}

.recipe {
	max-width: 650px;
	margin: 0 auto;
	padding: .75rem;
	border-radius: 1rem;
	background: var(--bg);
	/* border: 1px solid var(--fg); */
	font-family: var(--bodyfont);
	font-variation-settings: "opsz" 10;
}
.nextpostlink {
	font-family: var(--monofont);
	margin-top: 1rem;
	height: 0;
}

.recipe p, .recipe ol, .recipe ul, .recipe li {
	line-height: 1.5;
}

.recipe > *:first-child {
	margin-top: 0;
}

.recipe h1 {
	margin-top: .5rem;
	line-height: 0.87;
	font-family: var(--headerfont);
	font-size: clamp(3rem, 16vw, 6.5rem);
	font-variation-settings: "opsz" 30;
	letter-spacing: -0.015em;
}
.recipe h2 {
	margin-top: 1.5rem;
	font-size: 1.95rem;
	font-style: italic;
	font-variation-settings: "opsz" 36, "wght" 200;
	line-height: 1;
}
.recipe h3 {
	margin-top: 1.5rem;
	font-family: "Taters Fried";
	font-size: 1.5rem;
	line-height: 1;
}

.recipe img {
	border-radius: .5rem;
}

.recipe > p {
	margin-top: .5rem;
}
.recipe ul, .recipe ol {
	margin-top: .5rem;
}
.recipe ul + p, .recipe ol + p {
	margin-top: 1rem;
}

ul {
	display: normal;
	padding: 0;
}
ul ::marker {
	content: "\2713   ";
	vertical-align: text-bottom;
	line-height: 1.1rem;
}

ol ::marker {
	font-style: italic;
	font-variation-settings: "opsz" 18, "wght" 900;
}

li {
	margin-top: .5rem;
	margin-left: 1.5rem;
}

qu, ing {
	padding: 0 .1rem;
	background: var(--altbg);
	border-radius: .25rem;
	/* font-family: var(--monofont); */
}

ing {
	background: #dafaea;
}