/* static/style.css */

@import url('reset.css');
@import url('colors.css');

:root {
	/* color-scheme: light dark; */

	--spacer-sm: 0.25rem;
	--spacer-md: 0.5rem;
	--spacer-lg: 1rem;

	--color-canvas: #f5a3cd;
	--color-canvas-text: #ff1a8c;

	--color-link-text: #0a66c2;
	--color-visited-text: #8f39ac;

	--color-surface: #ffcce6;

	--color-button-border: color-mix(in oklab, var(--color-canvas) 50%, var(--color-canvas-text));
}

html {
	padding: var(--spacer-lg);

	font-family: 'Times New Roman', 'Georgia Pro', Georgia, serif;
	font-variant-ligatures: common-ligatures discretionary-ligatures contextual;
	font-variant-numeric: oldstyle-nums proportional-nums slashed-zero;

	width: 100dvw;
	height: 100dvh;
}

body {
	display: grid;
	grid-template: "header header" auto
	"sidebar content" auto
	"footer footer" auto/ auto 1fr;
	align-items: start;
	place-content: start;
	height: 100%;
	width: 100%;
	max-width: 640px;
	overflow: hidden;
	margin: auto;
	gap: var(--spacer-lg);
}

main {
	grid-area: content;
	display: flex;
	flex-direction: column;
	gap: var(--spacer-lg);
	max-height: 100%;
	overflow-y: auto;
	border-radius: var(--spacer-md);
}

header,
footer {
	text-align: center;
}

header {
	grid-area: header;
}

footer {
	grid-area: footer;
}

h1 {
	font-style: italic;
	font-variant-caps: small-caps;
	font-feature-settings: 'cswh', 'swsh';
	font-size: 3em;
}

h2 {
	font-size: 2em;
}

h3 {
	font-size: 1em;
	text-transform: uppercase;
	/* font-variant-caps: titling-caps; */
}

article, #rss-feed{
	background: var(--color-surface);
	padding: var(--spacer-md);
	border-radius: var(--spacer-md);
}

#rss-feed {
	display: flex;
	flex-direction: column;
	gap: var(--spacer-md);
	> div {
		border-top: 1px solid var(--color-button-border);
	}
}