@import url("/css/reset.css");
@view-transition {
	navigation: auto;
}

:root {
	--bg-light: #e4e4e4;
	--bg-image-light: url('/img/bg-white.svg');
	--bg-dark: #333333;
	--bg-image-dark: url('/img/bg-black.svg');
	--text-dark: #333333;
	--text-light: #c5c5c5;
	--text-green: rgb(216, 255, 137);
	--font-size: 16px;
	--font-size-heading: calc(var(--font-size) + 6px);
	--font-family-mono: ui-monospace, monospace;
	--font-heading: ui-sans-serif, sans-serif;
	--font-serif: ui-serif, serif;
	--font-sans-serif: ui-sans-serif, sans-serif;
	--padding-1x: 1rem;
	--padding-2x: 2rem;
}

html {
	font-size: var(--font-size);
	color: var(--text-light);
	font-family: var(--font-family-mono);
	text-transform: lowercase;
}

body {
	background-image: var(--bg-image-dark);
	background-size: cover;
	background-attachment: fixed;
	position: relative;
}

a[href], a[href]:visited {
	color: var(--text-green);
	text-decoration: none;
}

figure img {
	margin-inline: auto;
}

img {
	width: 100%;
	height: auto;
}

h2, h3, h4 {
	font-size: 1rem;
	text-wrap: pretty;
	font-family: var(--font-heading);
}

figcaption {
	text-align: center;
	padding-block: 1rem;
	font-size: calc(1rem - 2px);
}

/* reusable */

.social {
	max-width: 8px;
	opacity: 0.5;
	&:hover {
		filter: brightness(500%) grayscale(100%);
		opacity: 1;
	}
}

.hidden {
	display: none;
}

.bigger {
	font-size: calc(1rem * 2);
}

.justify {
	text-align: justify;
	text-wrap: pretty;
}

.center {
	text-align: center;
}

.lighter {
	opacity: .05;
}

.lightest {
	opacity: .025;
}

.flex-row {
	display: flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: space-between;
}

.full.flex-column {
	display: flex;
	flex-flow: column;
	justify-content: flex-end;
	align-items: center;
	text-align: center;
	gap: 2rem;
}

.embed {
		display: flex;
		justify-content: center;
}

.green {
	color: var(--text-green);
}

/* layout */

.wrapper {
	width: min(95%, 65ch);
	margin-inline: auto;
}

main {
	min-height: 100dvh;
	padding-block: 3rem 3rem;
	display: grid;
	place-items: center;
}

/* header */

.header-main {
	margin: 1rem auto;
	position: relative;
}

.header-nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background-image: var(--bg-image-dark);
	background-size: cover;
	background-attachment: fixed;
	z-index: 99;
	opacity: 0.75;
}

.links {
	width: 100%;
	padding-block: 1rem;
	text-align: center;
	& a[href] {
	display: inline-block;
	padding-inline: 0.25rem;
	}
}

.footer-nav {
	text-align: center;
	&  ul li {
		list-style-type: none;
		display: inline-block;
	}
}

.header-nav ul {
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	width: fit-content;
	margin-inline: auto;
}

.site-title {
	display: inline;
	transform: scaleY(-1);
	transition: 1s ease-in-out transform;
	color: var(--text-light)!important;
	text-decoration: underline!important;
	text-decoration-color: var(--text-green);
	font-size: calc(1rem + 2px);
}

.site-title:hover {
	color: var(--text-green)!important;
	text-decoration-color: var(--text-light)!important;
	transition: 1s ease-in color, 1s ease-in text-decoration-color;
}
.header-nav a:any-link {
	text-decoration: none;
	display: inline-block;
	color: var(--text-green);
	opacity: 1;
}

.header-nav a:hover {
	color: var(--text-light);
}

.header-nav ul li {
	display: inline-block;
}

.header-nav ul li:last-child {
	padding-right: 0;
}

/* home */

.home.flex-row {
	align-items: flex-start;
	justify-content: center;
	gap: 1rem;
}

.home.flex-row article {
	width: min(100%, 65ch / 2.07);
}

.post-txt, .post-aud, .post-pic, .post-vid {
	margin-bottom: 1rem;
}

.home {
	& .post-txt, .post-aud, .post-pic, .post-vid {
		overflow: hidden;
		aspect-ratio: 1 / 1;
		background: rgba(0, 0, 0, 0.05);
		outline: 1px solid rgba(168, 168, 168, 0.09);
		margin: 0;
		}
	& article {
		margin-block: 2rem;
	}
}

.post-txt {
	padding: 1rem;
}

.post-txt h2 {
	font-size: 1rem;
}

.post-txt .preview-body p {
	text-wrap: balance;
	text-align: justify;
}

.page p ,
.post-txt p {
	margin-block: 0 1rem;
}

.page-vid header {
	padding-block: 1rem;
}

.half-circle {
	border-bottom-right-radius: 50%;
	border-bottom-left-radius: 50%;
	margin-top: 2rem;
}

.preview-body a:any-link {
	text-decoration: none;
}

/* audio */

.post-aud .preview-body {
	background-size: cover;
	position: relative;
	overflow: visible;
}

.post-aud audio {
	margin: 0;
	width: 100%;
}

.post-aud-full .inner {
	background: rgba(0, 0, 0, 0.5);
	width: 100%;
	padding: 1rem;
}

.post-aud-full .full p {
	background-color: rgba(255, 255, 255, 0);
	color: white;
	text-shadow: 0 1px 0 black;
}

.full audio {
	width: min(100%, 65ch);
	display: block;
	margin-inline: auto;
}

/* img */

.post-pic .preview-body img {
	width: 100%;
	height: auto;
}

.post-pic header {
	display: none;
}

.post-pic-full figure {
	margin-top: 2rem;
}

.post-pic-full .full,
.post-aud-full .full {
	content: "";
	height: auto;
	width: 100%;
	aspect-ratio: 1/1;
}

.post-pic-full .full p {
	background-color: rgba(255, 255, 255, 0.1);
}

.gallery {
	columns: 2;
	padding-top: 1rem;
}

.gallery img {
	display: block;
	padding-bottom: 1rem;
}

/* post, page */

.post-title-area h1 {
	color: var(--text-light);
	font-size: 1rem;
}

.post-text-full:has(header) .post-body-full {
	padding-top: 2rem;
}

.post-body-full p {
	margin: 0 auto 1rem auto;
}

.page-body-full {
	padding-top: 1rem;
	min-height: 50dvh;
}

.full p {
	display: inline;
	padding: 1rem;
	text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}



/* footer */

.footer-main {
	position: fixed;
	inset: auto 0 0 0;
	width: 100%;
	z-index: 99;
	padding: 0 1rem;
	backdrop-filter: blur(5px);
	background-color: rgba(0, 0, 0, 0.5);
	& > * {
		flex-grow: 1;
		width: 33%;
	}

	.footer-nav {
		text-align: center;
		font-size: calc(1rem - 4px);
	}

	.right {
		text-align: right;
	}
}

.footer-main a[href] {
	text-decoration: none;
	opacity: .75;
}

.footer-main a[href]:hover {
	opacity: 1;
}

.footer-main.flex-row {
	justify-content: space-between;
	font-size: calc(1rem - 2px);
}

.footer-main.flex-row div {
	flex-grow: 1;
}

.footer-main > div:nth-of-type(2) {
	text-align: right;
}

.footer-main div p {
	opacity: .75;
}

.footer-main div p:hover {
	opacity: 1;
}


.post-aud-full, .post-vid-full {
	.embed {
		margin-top: 3rem;
	}
}


.embed iframe {
		aspect-ratio: 16 / 9;
		width: 100% !important;
}

.preview h2 {
	padding-block: 1rem;
	font-size: 1rem;
}

.txt-feed .post-txt {
	border-bottom: 1px dashed rgba(255, 255, 255, 0.25);
	width: 100%;
	height: auto;
}

.preview a[href]:has(h2) {
	text-decoration: none;
	color: var(--text-green);
}

span.ha-placeholder {
	visibility: hidden;
}

.nextprev {
	margin-block: 5rem;
}

.email {
	display: block;
	background-image: url('/img/bg-black.svg');
	width: min(100%, 30ch);
	margin: 1rem auto;
	color: #fefefe;
	padding: 1rem 2rem;
	text-decoration: none;
	outline: 1px solid var(--text-light);
}

.email:hover {
	background-image: url('/img/bg-black.svg');
	color: yellowgreen;
}

.outline ul {
	list-style-type: none;
	margin-left: 0;
	padding-left: 0;
}

li:has(.aud-list)::before {
	content: "🎵 ";
}

li:has(.pic-list)::before {
	content: "📷 ";
}

li:has(.txt-list)::before {
	content: "💬 ";
}

li:has(.vid-list)::before {
	content: "📼 ";
}
.the-playlist {
	h2 {
		margin-block: 2rem;
	}
}

.margin-small {
	margin-block: 1rem;
}

.txt-feed p {
	margin-block: 1rem;
}

.img-prev {
	width: 50%;
}

.body-prev {
	width: 50%;
	padding: 1rem;
}