/* See https://codeberg.org/lucajunge/css-reset for details */
@import url(./reset.css);

@import url(./fonts.css);

@import url(./icons.css);

@import url(./util.css);

@import url(./post.css);

:root {
	--font-family: "Source Sans 3", -apple-system, system-ui, sans-serif;
	--font-family-monospace: Consolas, Menlo, Monaco, Andale Mono WT, Andale Mono,
		Lucida Console, Lucida Sans Typewriter, DejaVu Sans Mono,
		Bitstream Vera Sans Mono, Liberation Mono, Nimbus Mono L, Courier New,
		Courier, monospace;
	--background-color: #242424;
	--background-color-strong: #080808;
	--text-color: #f3f3f3;
	--accent-color: #daa520;
}

html,
body {
	font-family: var(--font-family);
	color: var(--text-color);
	background-color: var(--background-color);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	font-family: "Crimson Pro";
	font-size: 1.3em;
	font-weight: 600;
	color: var(--accent-color);
}

h1 {
	font-size: 1.6em;
}

h2,
h3,
h4,
h5,
h6 {
	margin-block: 0.5em 0.7em;
}

.header {
	padding: 1rem;
	display: flex;
	justify-content: center;
	font-weight: bold;
}

.footer {
	padding: 1rem;
	display: flex;
	justify-content: center;
	align-items: center;
	font-weight: bold;
	flex-direction: column;
}

.footer * {
	text-align: center;
}

.footer div {
	background-color: var(--background-color-strong);
	border-radius: 4px;
	padding: 2px 4px 1px 4px;
}

.tag {
	padding: 3px 6px;
	background-color: var(--background-color-strong);
	margin-left: 4px;
	display: inline-block;
	border-radius: 4px;
	font-size: 0.8em;
}

.recent-posts-container {
	margin: 12px 12px;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	gap: 12px;
}

.highlight-card {
	border-radius: 12px;
	display: flex;
	padding: 14px;
	width: 100%;
	justify-content: stretch;
}

.highlight-card-header {
	display: flex;
	flex-wrap: wrap;
	column-gap: 10px;
	justify-content: space-between;
	padding-bottom: 8px;
}

.highlight-card img {
	border-radius: 8px;
	width: 100%;
	height: 8rem;
	object-fit: cover;
	display: inline-block;
	box-shadow: inset 0px 0px 32px 32px #000000;
}

.highlight-card a {
	color: var(--white);
	width: 100%;
	text-decoration: none;
}

.highlight-card-button {
	border-radius: 8px;
	margin: 8px 0px 0px 0px;
	padding: 4px 8px;
	cursor: pointer;
	background-color: var(--accent-color);
	outline: none;
	border: none;
}

.content-type {
	font-family: "Crimson Pro";
	font-weight: bold;
	border-radius: 4px;
	padding: 2px 7px 5px 7px;
	background-color: var(--background-color-strong);
}

/* Light theme */
@media (prefers-color-scheme: light) {
	:root {
		--text-color: #242424;
		--background-color: #f3f3f3;
		--background-color-strong: #ababab;
	}
}

.home main {
	display: flex;
	flex-direction: column;
	max-width: 786px;
}

.home main * {
	max-width: 786px;
}

.attention-box {
	border: 4px solid var(--accent-color);
	border-radius: 6px;
	background-color: rgb(from var(--accent-color) r g b / 0.1);
}