:root {
	--bg-0: white;
	--bg-1: aquamarine;
	--bg-2: lightcyan;
	--bg-4: floralwhite;
	--bg-5: lavender;
	--bg-6: transparent;
	--bg-7: transparent;
	--fg-0: black;
	--fg-1: black;
	--link: blue;
	--link-visited: purple;
	--typography-ui: 13px monospace;
	--typography-content: 13px monospace;
	--letter-spacing: -0.35px;
}

.calm {
	--bg-0: silver;
	--bg-1: darkseagreen;
	--bg-2: white;
	--bg-4: ivory;
	--bg-5: ivory;
	--bg-6: white;
	--bg-7: white;
	--fg-0: black;
	--fg-1: black;
	--link: blue;
	--link-visited: purple;
	--typography-ui: 12px serif;
	--typography-content: 13px serif;
	--letter-spacing: 0;
}

.emo-kitty {
	--bg-0: black;
	--bg-1: deeppink;
	--bg-2: white;
	--bg-4: rebeccapurple;
	--bg-5: midnightblue;
	--bg-6: transparent;
	--bg-7: transparent;
	--fg-0: white;
	--fg-1: black;
	--link: deeppink;
	--link-visited: deeppink;
	--typography-ui: 13px monospace;
	--typography-content: 13 monospace;
	--letter-spacing: -0.35px;
}

.olive {
	--bg-0: darkkhaki;
	--bg-1: darkolivegreen;
	--bg-2: olivedrab;
	--bg-4: papayawhip;
	--bg-5: thistle;
	--bg-6: papayawhip;
	--bg-7: PaleGoldenRod;
	--fg-0: black;
	--fg-1: white;
	--link: navy;
	--link-visited: rebeccapurple;
	--typography-ui: 13px serif;
	--typography-content: 13px serif;
	--letter-spacing: 0;
}

.dark-olive{
	--bg-0: darkslategray;
	--bg-1: darkseagreen;
	--bg-2: antiquewhite;
	--bg-4: darkolivegreen;
	--bg-5: dimgray;
	--bg-6: transparent;
	--bg-7: transparent;
	--fg-0: antiquewhite;
	--fg-1: black;
	--link: darkorange;
	--link-visited: darkorange;
	--typography-ui: 12px monospace;
	--typography-content: 13px serif;
	--letter-spacing: 0;
}

.not-hacker-news {
	--bg-0: black;
	--bg-1: tomato;
	--bg-2: antiquewhite;
	--bg-4: darkslategrey;
	--bg-5: dimgray;
	--bg-6: transparent;
	--bg-7: transparent;
	--fg-0: antiquewhite;
	--fg-1: black;
	--link: tomato;
	--link-visited: tomato;
	--typography-ui: 12px sans-serif;
	--typography-content: 13px sans-serif;
	--letter-spacing: 0;
}

/*
// OVERRIDES
*/

* {
	margin: 0;
	padding: 0;
	overflow-wrap: anywhere;
}

html {
	font: var(--typography-ui);
	letter-spacing: var(--letter-spacing);
}

h1,h2,h3,h4,h5,h6 {
	font-size: 1rem;
}

body {
	background-color: var(--bg-0);
	color: var(--fg-0);
}

img {
	max-width: 100%;
}

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

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

/*
// LAYOUT
*/

body {
	padding: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 1rem;
}

main {
	display: flex;
	flex-direction: column;
}

.site-title {
	display: inline-block;
	text-transform: uppercase;
	margin-bottom: 1rem;
	text-decoration: none;
	color: var(--fg-0);
	font-weight: bold;
}

.site-title:visited {
	color: var(--fg-0);
}

.site-title:hover {
	text-decoration: underline;
}

.site-header {
	display: flex;
	align-items: start;
	justify-content: space-between;
	gap: 3rem;
}

.site-header nav {
	display: flex;
	flex-wrap: wrap;
	width: fit-content;
	list-style: none;
	gap: 2px;
}

.site-header a {
	display: flex;
	padding: 0.25rem 0.5rem;
	border: 1.5px solid var(--fg-0);
	text-decoration: none;
	text-transform: uppercase;
	color: var(--fg-0);
	background-color: var(--bg-7);
}

.site-header a:visited {
	color: var(--fg-0);
}

.site-header a:hover {
	text-decoration: underline;
}

.site-header a.active {
	background-color: var(--bg-1);
	color: var(--fg-1);
}

.empty-state {
	max-width: 45em;
	padding: 1rem;
}

.page-description {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	column-gap: 2rem;
	row-gap: 1rem;
	padding: 1rem;
	background-color: var(--bg-2); 
	border: 1.5px solid var(--bg-2);
	color: var(--fg-1);
}

.page-description > a {
	text-transform: uppercase;
	text-decoration: none;
}

.page-description a:hover {
	text-decoration: underline;
}

.toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1rem;
	background-color: var(--bg-1);
	border: 1.5px solid var(--fg-0);
	color: var(--fg-1);
}

/*
// JAVASCRIPT
*/

#theme-switch {
	position: absolute;
	top: 0.75rem;
	right: 1rem;
	padding: 0.1rem 0.25rem;
	font-size: 1rem;
}

#clock {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	column-gap: 0.5rem;
	padding: 0.25rem 0.5rem;
	text-align: right;
}

#article-list {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	margin-top: 1rem;
}

button {
	display: flex;
	align-items: center;
	gap: 3px;
	line-height: 1.2;
	background: lightgray;
	color: black;
	padding: 0.15rem 0.5rem;
	border-radius: 0.5rem;
	border: none;
	cursor: pointer;
	text-transform: lowercase;
	filter: drop-shadow(2px 2px);
	text-decoration: none;
}

button:hover {
	background-color: lightblue;
}

button:active {
	background-color: skyblue;
	transform: scale(0.95);
	filter: drop-shadow(0px 0px);
}

/*
// TEMPLATE STYLES
*/

.template-article ul,
.template-page ul,
.template-text ul,
.template-article ol,
.template-page ol,
.template-text ol {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-left: 2rem;
}

.template-article,
.template-page,
.template-text,
.template-link {
	font: var(--typography-content);
}

.template-page > article,
.template-article {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	max-width: 45em;
	padding: 1rem;
	border: 1.5px solid var(--fg-0);
	line-height: 1.35;
	background-color: var(--bg-4);
}

.template-page > article > header,
.template-article header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem;
	border-bottom: 1.5px solid var(--fg-0);
	padding-bottom: 0.5rem;
}

.template-page > article > header > p {
	opacity: 0.5;
}

.template-page > article > header > p:hover {
	opacity: 0.65;
}

.template-page > article h1,
.template-article h2 {
	text-transform: uppercase;
}

.template-page > article > footer,
.template-article footer {
	font-style: italic;
	opacity: 0.5;
}

.template-page > article > footer:hover,
.template-article footer:hover {
	opacity: 0.65;
}

.template-image,
.template-text {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	max-width: 45em;
	padding: 1rem;
	line-height: 1.35;
	background-color: var(--bg-6);
	border-bottom: 1.5px solid var(--fg-0);
}

.template-image footer,
.template-link footer,
.template-text footer {
	font-style: italic;
	opacity: 0.5;
}

.template-image footer:hover,
.template-link footer:hover,
.template-text footer:hover {
	opacity: 0.65;
}

.template-link {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
	max-width: 45em;
	padding: 1rem;
	border: 1.5px solid var(--fg-0);
	line-height: 1.35;
	background-color: var(--bg-5);
}

.template-link header {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem;
	border-bottom: 1.5px solid var(--fg-0);
	padding-bottom: 0.5rem;
}

/*.template-link div {
	display: flex;
	gap: 1rem;
}*/

.template-link > div > a.screenshot {
	float: left;
	display: block;
	border: 1.5px solid var(--fg-0);
	min-width: 8rem;
	width: 8rem;
	height: 8rem;
	margin-right: 1rem;
}

.template-link > div > a:not(.screenshot) {
	display: inline-block;
	margin-top: 1rem;
}

.template-link > div > a > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: top;
}

.template-link > div > p {
	line-height: 1.35;
}

/*
// UTILS
*/

.nowrap {
	white-space: nowrap;
}

.spacer {
	flex-grow: 1;
}

/* --- guestbook form --- */

.guestbook-panel {
	position: fixed;
	top: 6rem;
	right: 2rem;
	width: 18rem;
	padding: 1rem;
	background: var(--bg-4);
	color: var(--fg-0);
	border: 1.5px solid var(--fg-0);
	font: var(--typography-ui);
	letter-spacing: var(--letter-spacing);
}

.guestbook-panel input,
.guestbook-panel textarea,
.guestbook-panel button {
	display: block;
	width: 100%;
	margin-top: 0.5rem;
	padding: 0.25rem 0.5rem;
	font: var(--typography-ui);
	background: var(--bg-2);
color: var(--fg-1);
	border: 1.5px solid var(--fg-0);
	box-sizing: border-box;
}

@media (max-width: 960px) {
	.guestbook-panel {
		position: static;
		width: auto;
		margin: 1rem;
	}
}