:root {
	--main-width: 1024px;
	--constrained-width: max( 18px, calc( (100vw - var(--main-width)) / 2 ) );
	--color-green: hsl(182 20% 30%);
	--color-green2: hsl(182 24% 22%);
	--color-ice: hsl(183 60% 90%);
	--color-lipstick: hsl(340 88% 15%);
	--color-purple: rebeccapurple;
	--color-sky-blue: hsl(206 100% 40%);
	--color-slate: hsl(100 15% 80%);
	--color-sand: hsl(55 30% 92%);
	--color-sand2: hsl(55 25% 85%);
	--color-almost-white: hsl( 55 35% 95%);
	--color-almost-black: hsl(15 10% 5%);
	--font-text: Moderustic;
	--font-headings: Barriecito;
}


body {
	font-family: var(--font-text), sans-serif;
	background-image: radial-gradient( circle at 20% 20%, var(--color-green) , var(--color-green2) );
	color: var(--color-almost-white);
	font-size: 22px;
	border-top: 2px solid var(--color-purple);
}

.site-title {
	font-size: clamp(17vw, 250px, 20vw);
	margin: -.25em 0 0 5px;
	color: var(--color-sand);
	text-shadow: 0 0 20px hsl( 0 0% 0% / .2);
	-webkit-text-stroke: 1px var(--color-sand2);
}

main {
	--main-h-padding: 4rem;
	background: var(--color-almost-black);
	border-left: 2px solid var(--color-purple);
	font-weight: 300;
	font-size: 1.2em;
	line-height: 1.15;
	position: relative;
	container-type: inline-size;
	--border-radius: 0;
	border-radius: 0 var(--border-radius) 0 0;
	min-height: 50vh;
}
@media (min-width: 800px) {
	main {
		--border-radius: 50px;
	}
	main::before, main::after {
		content: '';
		display: block;
		position: absolute;
		border-color: var(--color-almost-black);
		border-width: 3px;
		border-top-style: solid;
		transform-origin: 0 0;
	}

	main::before {
		height: 3px;
		width: 50px;
		top: -8px;
		right: -31px;
		rotate: 57deg;
		opacity: .7;
	}

	main::after {
		width: 24px;
		top: -5px;
		right: -20px;
		rotate: 65deg;
		opacity: .5;
		border-width: 2px;
	}
}


.post-complete , .post-abbreviated {
	margin-inline: var(--main-h-padding);
}

.post-abbreviated {
	margin-block: 3em;
	border-left: var(--color-ice) 4px solid;
	padding-left: 1rem;
}

h1.page-title {
	font-size: 2.5em;
	padding: .75em var(--main-h-padding);
	color: var(--color-sand);

	&:not(._img-bg) {
		-webkit-text-stroke: .5px var(--color-almost-white);
	}
}

.post-image {
	aspect-ratio: 5 / 2;
	background-size: cover;
	background-position: var(--title-background-position, 50% 50% );
	border-radius: 0 var(--border-radius) 0 0;
	display: flex;
	/* justify-content: stretch; */
	align-items: flex-end;
	margin-bottom: 4rem;

	.page-title {
		margin: 0;
		padding: .75em var(--main-h-padding);
		background: hsl( from var(--title-background-color,--color-ice) h calc( s - 30 ) calc( l - 30 ) / 0.25 );
		backdrop-filter: blur(5px) contrast(.7) grayscale(.2);
		text-shadow: 0 0 11px hsl( 0 0% 0% / 0.5 );
		width: 100%;
	}
}



ul#menu-main {
	margin: 0; padding: 0;
	display: flex;
	flex-direction: column;

	li {
		margin: 0; padding: 0;
		display: contents;
	}
	a {
		display: block;
		text-decoration: none;
		padding: 1em 1.5em;
		margin-block-end: 6px;
		font-family: var(--font-headings), 'sans-serif';
		font-size: 24px;
		background: var(--color-ice);
		color: var(--color-lipstick);
		position: relative;
		transition: .25s color;

		&::after {
			content: '';
			position: absolute;
			top: 0;
			right: 0;
			width: 1em;
			height: 100%;
			background: hsl( 0 0% 0% / .2 );
			transition: .25s width;
		}
		&:hover {
			color: var(--color-sky-blue);
			-webkit-text-stroke: 1px black;
			&::after {
				width: 1.5em;
			}
		}
	}
}

.footer-inner {
	width: 66vw;
	margin: 2em auto 2em auto;
	border-radius: 120px 30px 100px 20px/30px 120px 40px 60px;
	padding: 3em 3em 5em;
	font-size: 18px;
	color: var(--color-slate);
	font-weight: 200;
	background: hsl( 0 0% 100% / .1 );
	border-left: 20px solid hsl( 0 0% 0% / .1 );

	h1 {
		font-size: 8em;
		margin: 0;
		text-align: center;
	}

	@media (min-width: 800px) {
		width: max-content;
	}
}


.post-date {
	p {
		margin: 0;
		background: hsl( 0 0% 100% / .15 );
		color: var(--color-slate);
		width: max-content;
		padding: .25em 1em .25em 1em;
		position: relative;
		font-size: .8em;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: -12px;
			height: 100%;
			width: 0;
			border-left: 5px dotted hsl( 0 0% 100% / .15 );
		}

		@container ( width > 800px ) {
			float: right;
			right: -1em;
			text-align: right;
		}
	}
}

.post-footer {
	padding: 2rem var(--main-h-padding);
}

.post-paging {
	display: flex;
	justify-content: space-evenly;

	a {
		background: var(--color-lipstick);
		color: white;
		padding: 13px 29px;
		text-decoration: none;
		transition: 200ms transform, 150ms border-radius, 200ms padding, 200ms border-width;
		border-radius: 4px;
		border: hsl( 0 0% 0% / .2 ) solid 0;
	}

	a[data-direction="previous"] {
		&:hover {
			transform: translateX(-15px) rotateY(20deg);
			border-radius: 57% 12px 12px 43%;
			padding-inline: 8px 32px;
			border-right-width: 12px;
		}
		&:active {
			transform: translateX(-35px) rotateY(30deg);
		}
	}
	a[data-direction="next"] {
		&:hover {
			transform: translateX(15px) rotateY(-20deg);
			border-radius: 12px 57% 43% 12px;
			padding-inline: 32px 8px;
			border-left-width: 12px;
		}
		&:active {
			transform: translateX(35px) rotateY(-30deg);
		}
	}
}

.post-tags p {
	font-size: .8em;
	margin: 4em 0 1em;
	display: flex;
	gap: .75em;
}



h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-headings), sans-serif;
	margin-block: 1.1em 0;
}
h1 { font-size: 3em;   color: var(--color-ice); }
h2 { font-size: 2.3em; }
h2 { font-size: 1.7em; }
h4 { font-size: 1.4em; }
h5 { font-size: 1.4em; color: var(--color-slate); }
h6 { font-size: 1.4em; color: var(--color-slate); }

a {
	color: var(--color-ice);
}

p {
	line-height: 1.4;
	margin-block: .5em 1.5em;
}


.wp-block-code {
	background: black;
	padding: 1rem;
	font-size: 1rem;
	font-weight: 300;
	line-height: 1.4;
	color: white;
	border: 1px solid var(--color-sky-blue);
	border-left-width: 4px;
}

figure.wp-block-audio {
	background: var(--color-lipstick);
	padding: 1.5em 2.2em;
	border: 25px hsl( 0 0% 0% / .25 ) solid;
	box-shadow: 0 0 14px hsl( 0 0% 0% ) inset;
	display: flex;
	gap: 1em;
	flex-direction: column;
	border-radius: 400px;
	max-width: 800px;
	audio {

	}
	figcaption {
		margin: 0;
		font-size: .7em;
	}
}

hr.wp-block-separator {
	border-top: 5px dotted var(--color-purple);
	opacity: .7;
	margin-block: 2em;
}

.wp-block-buttons {
	gap: .75em;
	margin-block: 1.25em;

	.wp-block-button a.wp-block-button__link {
		border-radius: 3px;

		&:hover {
			text-decoration: underline;
		}
	}

	.wp-block-button.is-style-fill a.wp-block-button__link {
		background: var(--color-ice);
		color: var(--color-sky-blue);
	}

	.wp-block-button.is-style-outline a.wp-block-button__link {
		color: var(--color-ice);
		background: hsl( from currentColor h s l / .1 );
	}
}

blockquote.wp-block-quote {
	font-style: italic;
	font-size: 1.2em;
	border-left: 4px solid var(--color-purple);
	margin-left: 1rem;
	padding: 1.5em 1em;
	background: hsl( from var(--color-purple) h calc( s + 15 ) calc( l - 32 ) / .9 );
	position: relative;

	&::before, &::after {
		position: absolute;
		color: white;
		opacity: .2;
		font-size: 200px;
		font-family: var(--font-headings), sans-serif;
		z-index: 1;
	}
	&::before {
		content: '“';
		top: -.33em;
		left: -.1em;
	}
	&::after {
		content: '”';
		bottom: -.75em;
		right: .25em;
		font-size: 140px;
	}

	p {
		margin-block: .5em;
	}
	& > :first-child {
		margin-top: 0;
	}
	& > :last-child {
		margin-bottom: 0;
	}
}