:root {
	font-family: system-ui, sans-serif;
	line-height: 1.5;
	--color-background: white;
	--color-section-background: rgba(0, 0, 0, .05);
	--color-foreground: rgb(32, 32, 32);
	--color-foreground-muted: rgba(32, 32, 32, .15);
	--color-accent: rgb(96, 64, 192);
	--color-accent-muted: rgba(96, 64, 192, .5);
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-background: rgb(32, 32, 32);
		--color-section-background: rgba(255, 255, 255, .05);
		--color-foreground: rgb(224, 224, 224);
		--color-foreground-muted: rgba(255, 255, 255, .25);
		--color-accent: rgb(160, 128, 255);
		--color-accent-muted: rgba(160, 128, 255, .6);
	}
}

* {
	box-sizing: border-box;
}

html,
body,
section.post > p,
section.post figure,
section.post dd,
section.post .media figure p.thumbnail {
	margin: 0;
	padding: 0;
}

html {
	background: linear-gradient(to top, var(--color-accent) 1px, transparent 1rem, transparent) no-repeat var(--color-background);
	color: var(--color-foreground);
}

a:link {
	color: var(--color-accent);
	text-decoration-color: var(--color-accent-muted);
}

a:visited {
	color: var(--color-accent-muted);
}

a:hover,
a:active {
	text-decoration-color: initial;
}

hr {
	opacity: .5;
}

h1, h2, h3, h4, h5, h6 {
	color: var(--color-accent);
	line-height: 1.2;
	margin: 2rem 0 -.5rem;
}

h1 {
	font-size: 1rem;
}

h1 a:link,
h1 a:visited {
	color: var(--color-foreground);
}

h1 a:hover,
h1 a:active {
	color: var(--color-accent);
}

h2 {
	font-size: 3rem;
	font-weight: 900;
}

h2.welcome {
	margin-top: 1rem;
}

h2.post {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 1rem 0;
}

h3 {
	font-size: 1.5rem;
	font-weight: 700;
}

h3 svg {
	width: 1.25em;
	height: 1.25em;
}

h3:has(> svg) {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: .25em;
}

ul * + * {
	margin-top: .5rem;
}

summary {
	cursor: default;
}

summary:hover {
	color: var(--color-accent);
}

body {
	max-width: 72ch;
	margin: 0 auto;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: start;
	min-height: 100vh;
}

header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	width: 100%;
}

header h1 {
	margin: 0;
}

header h1 a {
	text-decoration: none;
}

header h1,
header h1 svg {
	height: 1.25em;
}

header p {
	font-size: .75rem;
	align-self: flex-end;
	margin: 0;
}

main {
	flex: 1;
}

img.appleScreenshot {
	border: solid 1px var(--color-foreground-muted);
	border-radius: .5rem;
	width: 393px;
}

@media (max-width: 500px) {
    img.appleScreenshot {
		display: block;
		margin: 1rem auto;
		max-width: 100%;
	}
}

@media (min-width: 500px) {
    img.appleScreenshot {
		float: right;
		margin: 1rem 0 1rem 1rem;
		width: 50%;
	}
}

form {
	background-color: var(--color-section-background);
	margin: 1rem 0;
	padding: .5rem 1rem;
	border-radius: .5rem;
}

form p {
	margin: 0;
	display: grid;
	grid-template-columns: auto 1fr auto;
	justify-content: center;
	align-items: center;
	gap: .5rem;
}

form input,
form button {
	font-family: inherit;
}

form input {
	width: auto;
	min-width: 6em;
	padding: .15em .25em;
	font-size: 100%;
	border-radius: .25em;
	border: solid 1px var(--color-foreground-muted);
	background-color: var(--color-background);
}

form button {
	padding: .25em .75em;
	font-size: .8rem;
	text-transform: uppercase;
	font-weight: 900;
	letter-spacing: 1px;
	border-radius: .25em;
	border: none;
	background-color: var(--color-foreground-muted);
	color: var(--color-foreground);
}

form button:hover {
	background-color: var(--color-accent-muted);
}

form button:active {
	background-color: var(--color-accent);
	color: var(--color-background);
}

form input::placeholder {
	color: var(--color-accent-muted)
}

section.home summary {
	margin: 1rem 0;
}

section.post,
section.post .media figure {
	background-color: var(--color-section-background);
}

section.post {
	display: grid;
	grid-template-areas:
		"avatar author postTime"
		"avatar username username"
		"content content content";
	grid-template-columns: auto 1fr auto;
	grid-template-rows: auto 1fr auto auto;
	column-gap: .5rem;
	margin: .5rem 0;
	padding: 1rem;
	position: relative;
	word-break: break-word;
	border-radius: .75rem;	
}

section.post .postTime {
	grid-area: postTime;
	place-self: center end;
	font-size: .75rem;
}

section.post .avatar {
	grid-area: avatar;
}

section.post .avatar img {
	max-width: 3rem;
	border-radius: .5rem;
	display: block;
}

section.post .author {
	grid-area: author;
	font-size: 1.15rem;
	font-weight: 700;
}

section.post .username {
	grid-area: username;
	font-size: .75rem;
}

section.post .content {
	grid-area: content;
}

section.post summary,
section.post .media {
	margin-top: 1rem;
}

/* Let's go lobotomized owl selector! */
section.post .content * + *,
section.post .media * + * {
	margin: 1rem 0 0;
}

summary .noWarning,
section.post .media .noDescription {
	opacity: .5;
}

section.post .media figure {
	position: relative;
	padding: .75rem;
	display: grid;
	grid-template-areas:
		"thumbnail description"
		"details details";
	grid-template-columns: auto 1fr;
	grid-template-rows: auto 1fr;
	column-gap: 1rem;
	place-items: start;
	border-radius: .5rem;
}

section.post .media figure p.thumbnail {
	grid-area: thumbnail;
	margin: 0;
	padding: 0;
	text-align: center;
	font-size: .75rem;
	text-transform: uppercase;
	font-weight: 700;
}

section.post .media figure p.thumbnail img,
section.post .media figure p.thumbnail audio {
	width: 8rem;
	max-width: 25vw;
}

section.post .media figure p.thumbnail img {
	border-radius: .5rem;
}

section.post .media figure figcaption {
	grid-area: description;
}

section.post .media figure dl {
	grid-area: details;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(5rem, 1fr));
}

section.post .media figure dl * {
	font-family: inherit;
	font-size: .75rem;
	text-transform: uppercase;
	font-weight: 700;
}

section.post .media figure dl dt,
section.post .media figure dl dd {
	margin: 0;
	padding: 0;
	border: solid 1px var(--color-foreground-muted);
	padding: .1rem .5rem;
	word-break: none;
}

section.post .media figure dl dt {
	background-color: var(--color-section-background);
	border-radius: .5rem 0 0 .5rem;
}

section.post .media figure dl dd {
	background-color: var(--color-accent-muted);
	border-radius: 0 .5rem .5rem 0;
	border-left: none;
	margin-right: .5rem;
}

section.post .media figure dl pre {
	white-space: pre-wrap;
}

footer {
	text-align: center;
}

footer nav ul,
footer nav ul li {
	list-style: none;
	margin: 0;
	padding: 0;
}

footer nav ul {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 1rem;
}

footer nav ul li {
	
}

footer .signature {
	font-size: .75rem;
}

footer .viewSource {
	font-family: monospace;
	font-size: .75rem;
	opacity: .5;
}