* {
			box-sizing: border-box;
		}

		:root {
			--image: url("./background.jpg");
			--fg: #333;
			--bg: #fff;

			--Post-background: #fffb;
			--Post-boxShadow: 0 .2em .8em #3334;
			--Post-header-background: #eee7;
		}

		body {
			font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
			font-size: 2.6vmax;
			font-size: clamp(14px, 2.6vmax, 24px);
			font-weight: 300;
			line-height: 1.5;
			color: var(--fg);
			background-color: var(--bg);

			inline-size: 100%;
			block-size: 100vh;
			block-size: 100dvh;

			margin: 0;
		}

		a {
			color: inherit;
		}

		a:is(:hover, :focus, :active) {
			filter: brightness(0.8);
		}

		h1,
		h2 {
			font-weight: 300;
			line-height: 1.2;
		}

		h1 {
			margin-block-end: 0;
		}

		header {
			padding: 2rem;
		}

		header>* {
			margin-block-start: 0;
		}

		header p {
			text-wrap: balance;
		}

		main {
			padding: 2rem;
		}

		main:has(pre:empty) {
			display: none;
		}

		pre {
			font-size: .75em;
			margin-block-end: 4rem;
			overflow-x: auto;
		}

		twtxt-feed-viewer {
			display: flex;
			flex-flow: column;
			gap: 1em;
		}

		.Post {
			display: flex;
			flex-flow: column;
			gap: .4em;
			font-size: .9em;
			background: var(--Post-background);
			padding: 1em;
			border-radius: .5em;
			box-shadow: var(--Post-boxShadow);
			opacity: 0;
			transform: translateY(1em);
			animation:
				fade-in 1.5s .5s forwards,
				move-in 1.5s .5s forwards;
		}

		.Post :first-child {
			margin-block-start: 0;
		}

		.Post :last-child {
			margin-block-end: 0;
		}

		.Post-header,
		.Post-footer {
			font-size: .85em;
		}

		.Post-header {
			border-radius: .2em;
			background: var(--Post-header-background);
			border-inline-start: .2em solid currentColor;
			padding: .2em .2em .2em .5em;
		}

		.Post-body {
			word-break: break-word;
		}

		.Post-footer {
			text-align: end;
		}

		@keyframes fade-in {
			to {
				opacity: 1;
			}
		}

		@keyframes move-in {
			to {
				transform: translateY(0);
			}
		}

		/* Mobile */
		@media (max-width: 70rem) {
			body {
				background: var(--bg) var(--image);
				background-size: contain;
				background-repeat: no-repeat;
				background-position: bottom;
				background-attachment: fixed;
			}

			header {
				padding-block: 3em;
			}

			.Post {
				backdrop-filter: blur(10px) saturate(1.2) brightness(1.1);
			}
		}

		/* Desktop */
		@media (min-width: 70rem) {
			body {
				display: grid;
				grid-template-columns: 1fr 2fr;
			}

			header {
				padding-block-start: 7vmin;
				padding-block-start: 7dvmin;
				background-image: var(--image);
				background-size: contain;
				background-repeat: no-repeat;
				background-position: bottom;
			}

			main {
				background-color: var(--bg);
				overflow-y: auto;
			}

			pre {
				margin-block-start: 7vmin;
				margin-block-start: 7dvmin;
			}

			twtxt-feed-viewer {
				max-inline-size: 35em;
			}
		}