@charset 'utf-8';

:root {
	height: 100%;
	color-scheme: light dark;
}

body {
	font: 14px system-ui, 'SF Pro', 'Helvetica Neue', Verdana, sans-serif;
	color: black;
	background: white;
	margin: 0;
}

main {
	padding: 2em;
	margin: 0 auto 50px;
	max-width: 600px;
}

h1 {
	font: bold 16px system-ui, 'SF Pro', 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

.disabled {
	color: #999;
}

nav {
	color: #333;
}

h1 {
	color: #666;
}

.poster {
	font-weight: bold;
}

.quote {
	margin: 2em;
}
			
.quotetext {
	text-align: justify;
}

.permalink {
	color: #999;
}

footer {
	font-size: 11px;
	border-top: 1px solid hsla(0, 0%, 50%, 0.5);	
	/* position: fixed; */
	margin: 0;
	bottom: 0;
	width: 100%;
	background: white;
	color: #666;
}

footer > details, footer > p {
	margin: 0 auto;
	max-width: 650px;
	padding: 1em 0;
}

footer > details > summary {
	cursor: default;
	font-weight: bold;
}

summary:focus {
	outline: none;
}

footer > details > p {
	margin: 1em 10px 0;
}

footer > div > p:last-child {
	margin-bottom: 0;	
}

a:link, a:visited {
	color: #669;
}

a:hover {
	color: #336;
}

a:active {
	color: #900;
}

form > section {
	display: grid;
	grid-gap: .5ch;
	grid-template-columns: 50px 200px;
	align-items: center;
	margin-bottom: 1em;
}

input[type=search] {
	grid-column: 2 / 3;
}

label {
	margin-top: -1px;
	text-align: right;
	grid-column: 1 / 2;
}

dd {
	margin-left: 0;
	margin-top: 0;
	padding: 0;
}

dd p:first-of-type, dd {
	margin-top: .5em;
}

dt {
	margin-bottom: 0;
}

@media(prefers-color-scheme: dark) {
	:root {
		background: black;	
	}
	
	body {
		color: white;
		background: #222;
	}
	
	footer {
		background: black;
		color: #999;
	}
	
	h1 {
		color: #ccc;	
	}
	
	nav {
		color: #999;
	}
	
	a:link, a:visited {
		color: #aad;
	}
	
	a:hover {
		color: #669;
	}
	
	a:active {
		color: #900;
	}

}