/*
 * Win98 — a Windows 98 style theme for ordinary websites.
 *
 * Plain CSS, no build step. Copy the whole `win98` folder into a site and
 * link this file. All paths below are relative to this file, so the folder
 * can live anywhere. See README.md for the markup and the settings you can
 * change.
 */

/* ------------------------------------------------------------------ */
/* Fonts                                                               */
/* ------------------------------------------------------------------ */

@font-face {
	font-family: "Win98 Sans";
	src: url("fonts/win98-sans.woff2") format("woff2");
	font-weight: normal;
	font-display: swap;
}

@font-face {
	font-family: "Win98 Sans";
	src: url("fonts/win98-sans-bold.woff2") format("woff2");
	font-weight: bold;
	font-display: swap;
}

@font-face {
	font-family: "Crimson Pro";
	src: url("fonts/CrimsonPro.woff2") format("woff2");
	font-weight: 200 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: "Crimson Pro";
	src: url("fonts/CrimsonPro-Italic.woff2") format("woff2");
	font-weight: 200 900;
	font-style: italic;
	font-display: swap;
}

@font-face {
	font-family: "Cinzel";
	src: url("fonts/Cinzel.woff2") format("woff2");
	font-display: swap;
}

@font-face {
	font-family: "Courier Prime";
	src: url("fonts/CourierPrime-Regular.woff2") format("woff2");
	font-weight: normal;
	font-display: swap;
}

@font-face {
	font-family: "Courier Prime";
	src: url("fonts/CourierPrime-Bold.woff2") format("woff2");
	font-weight: bold;
	font-display: swap;
}

@font-face {
	font-family: "Rediviva";
	src: url("fonts/Rediviva.woff2") format("woff2");
	font-display: swap;
}

/* ------------------------------------------------------------------ */
/* Settings — override any of these in your own stylesheet (see       */
/* README.md). The dark-mode rules use :where() so that an override  */
/* in a plain `:root { }` block wins in both light and dark mode.     */
/* ------------------------------------------------------------------ */

:root {
	/* Accent colours: title bar gradient, links, heading rules */
	--win98-accent: #a9270a;
	--win98-accent-2: #ed9d24;
	--win98-link: var(--win98-accent);
	--win98-dropcap: darkred;

	/* Surfaces */
	--win98-desktop: #ac9a8b91;
	--win98-desktop-image: url("background.png");
	--win98-face: #d4d0c8; /* buttons, bars, window frame */
	--win98-paper: #ece8df; /* the main reading area */
	--win98-field: #ffffff; /* text boxes, image wells */
	--win98-text: #000000;
	--win98-text-muted: #555555;
	--win98-title-text: #ffffff;
	--win98-inactive-1: #808080;
	--win98-inactive-2: #c0c0c0;

	/* Bevel colours */
	--win98-highlight: #ffffff;
	--win98-light: #dfdfdf;
	--win98-shadow: #808080;
	--win98-dark: #0a0a0a;

	/* Type */
	--win98-font-body: "Crimson Pro", Georgia, serif;
	--win98-font-heading: "Cinzel", "Crimson Pro", Georgia, serif;
	--win98-font-ui: "Win98 Sans", Tahoma, Verdana, sans-serif;
	--win98-font-mono: "Courier Prime", "Courier New", monospace;
	--win98-font-dropcap: "Rediviva", var(--win98-font-heading);
	--win98-font-size: 19px;

	/* Layout */
	--win98-max-width: 1000px;

	color-scheme: light;
}

@media (prefers-color-scheme: dark) {
	:root:where(:not([data-theme="light"])) {
		--win98-accent: #ae4e26;
		--win98-accent-2: #dba047;
		--win98-link: #dba047;
		--win98-dropcap: goldenrod;

		--win98-desktop: #313131;
		--win98-face: #2d2d2d;
		--win98-paper: #262525;
		--win98-field: #1c1c1c;
		--win98-text: #f2f2f2;
		--win98-text-muted: #b0b0b0;
		--win98-inactive-1: #3a3a3a;
		--win98-inactive-2: #5a5a5a;

		--win98-highlight: #555555;
		--win98-light: #444444;
		--win98-shadow: #1b1b1b;
		--win98-dark: #000000;

		color-scheme: dark;
	}
}

/* Force a scheme with <html data-theme="dark"> (or "light") */
:root:where([data-theme="dark"]) {
	--win98-accent: #ae4e26;
	--win98-accent-2: #dba047;
	--win98-link: #dba047;
	--win98-dropcap: goldenrod;

	--win98-desktop: #313131;
	--win98-face: #2d2d2d;
	--win98-paper: #262525;
	--win98-field: #1c1c1c;
	--win98-text: #f2f2f2;
	--win98-text-muted: #b0b0b0;
	--win98-inactive-1: #3a3a3a;
	--win98-inactive-2: #5a5a5a;

	--win98-highlight: #555555;
	--win98-light: #444444;
	--win98-shadow: #1b1b1b;
	--win98-dark: #000000;

	color-scheme: dark;
}

/* ------------------------------------------------------------------ */
/* Bevels                                                              */
/* ------------------------------------------------------------------ */

.win98-window,
.win98-button,
.win98-controls button,
.win98-menu a,
.win98-content details,
.win98-content code {
	box-shadow:
		inset -1px -1px var(--win98-dark),
		inset 1px 1px var(--win98-highlight),
		inset -2px -2px var(--win98-shadow),
		inset 2px 2px var(--win98-light);
}

.win98-button:hover,
.win98-button:active,
.win98-button[aria-current],
.win98-controls button:active,
.win98-menu a:hover,
.win98-menu a:active,
.win98-menu a[aria-current],
.win98-content details[open] {
	box-shadow:
		inset 1px 1px var(--win98-dark),
		inset -1px -1px var(--win98-highlight),
		inset 2px 2px var(--win98-shadow),
		inset -2px -2px var(--win98-light);
}

.win98-content,
.win98-statusbar,
.win98-content blockquote {
	box-shadow:
		inset 1px 1px var(--win98-shadow),
		inset -1px -1px var(--win98-highlight);
}

.win98-field,
.win98-window-body,
.win98-picture img {
	border-top: 2px solid var(--win98-shadow);
	border-left: 2px solid var(--win98-shadow);
	border-right: 2px solid var(--win98-highlight);
	border-bottom: 2px solid var(--win98-highlight);
}

/* ------------------------------------------------------------------ */
/* Page                                                                */
/* ------------------------------------------------------------------ */

*,
*::before,
*::after {
	box-sizing: border-box;
}

body.win98-desktop {
	margin: 0;
	padding: 10px;
	min-height: 100vh;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	background-color: var(--win98-desktop);
	background-image: var(--win98-desktop-image);
	color: var(--win98-text);
	font-family: var(--win98-font-body);
	font-size: var(--win98-font-size);
	font-feature-settings: "dlig";
}

/* ------------------------------------------------------------------ */
/* Window                                                              */
/* ------------------------------------------------------------------ */

.win98-window {
	background: var(--win98-face);
	color: var(--win98-text);
	width: 100%;
	max-width: var(--win98-max-width);
	padding: 3px;
}

.win98-titlebar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 6px;
	padding: 3px 4px;
	margin-bottom: 3px;
	background:
		radial-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, var(--win98-accent), var(--win98-accent-2));
	background-size:
		3px 3px,
		100% 100%;
	color: var(--win98-title-text);
	font-family: var(--win98-font-ui);
	font-size: 0.9rem;
	font-weight: bold;
}

.win98-titlebar.is-inactive {
	background:
		radial-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px),
		linear-gradient(90deg, var(--win98-inactive-1), var(--win98-inactive-2));
	background-size:
		3px 3px,
		100% 100%;
}

.win98-title {
	display: flex;
	align-items: center;
	gap: 6px;
	min-width: 0;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.win98-title img {
	width: 16px;
	height: 16px;
	flex-shrink: 0;
	image-rendering: pixelated;
}

.win98-controls {
	display: flex;
	gap: 2px;
	flex-shrink: 0;
}

.win98-controls button {
	width: 20px;
	height: 18px;
	padding: 0;
	border: none;
	border-radius: 0;
	background: var(--win98-face);
	color: var(--win98-text);
	font-family: var(--win98-font-ui);
	font-size: 10px;
	line-height: 1;
	cursor: pointer;
}

.win98-controls button:last-child {
	margin-left: 2px;
}

/* ------------------------------------------------------------------ */
/* Toolbars: menu, separators, address bar                             */
/* ------------------------------------------------------------------ */

.win98-toolbar {
	position: relative;
	padding: 4px 4px 4px 14px;
	margin-bottom: 3px;
}

/* The little grip at the left edge of every toolbar */
.win98-toolbar::before {
	content: "";
	position: absolute;
	top: 4px;
	bottom: 4px;
	left: 4px;
	width: 4px;
	border-left: 1px solid var(--win98-highlight);
	border-top: 1px solid var(--win98-highlight);
	border-right: 1px solid var(--win98-shadow);
	border-bottom: 1px solid var(--win98-shadow);
}

.win98-separator {
	height: 2px;
	margin: 0 3px 3px;
	border: none;
	border-top: 1px solid var(--win98-shadow);
	border-bottom: 1px solid var(--win98-highlight);
}

.win98-menu {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.win98-menu li {
	display: contents;
}

.win98-menu a {
	flex: 1 1 140px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 10px;
	background: var(--win98-face);
	color: var(--win98-text);
	font-family: var(--win98-font-ui);
	font-size: 0.9rem;
	text-decoration: none;
	white-space: nowrap;
}

.win98-menu a img {
	width: 16px;
	height: 16px;
	image-rendering: pixelated;
}

.win98-menu a:focus-visible,
.win98-button:focus-visible {
	outline: 1px dotted var(--win98-text);
	outline-offset: -5px;
}

.win98-addressbar {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--win98-font-ui);
	font-size: 0.9rem;
}

.win98-addressbar label {
	font-family: inherit;
}

.win98-addressbar .win98-field {
	flex: 1 1 0;
	min-width: 0;
}

.win98-field {
	display: block;
	padding: 3px 4px;
	background: var(--win98-field);
	color: var(--win98-text);
	font-family: var(--win98-font-ui);
	font-size: 0.85rem;
	border-radius: 0;
	outline: none;
}

/* The decorative drop-down arrow at the end of the address field */
.win98-addressbar .win98-dropdown {
	position: relative;
	align-self: stretch;
	width: 18px;
	margin-left: -8px;
	border: 2px solid var(--win98-field);
	border-left: none;
	background: var(--win98-face);
	box-shadow:
		inset -1px -1px var(--win98-dark),
		inset 1px 1px var(--win98-highlight),
		inset -2px -2px var(--win98-shadow);
}

.win98-addressbar .win98-dropdown::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -25%);
	border: 4px solid transparent;
	border-top-color: var(--win98-text);
}

.win98-brand {
	height: 1.6rem;
	width: auto;
	margin-left: 4px;
}

/* ------------------------------------------------------------------ */
/* Content area                                                        */
/* ------------------------------------------------------------------ */

.win98-content {
	margin: 0 3px;
	padding: 1em 1.5em;
	min-height: 400px;
	background: var(--win98-paper);
	color: var(--win98-text);
	line-height: 1.45;
	overflow-wrap: break-word;
}

.win98-content > :first-child {
	margin-top: 0;
}

.win98-content h1,
.win98-content h2,
.win98-content h3,
.win98-content h4 {
	font-family: var(--win98-font-heading);
	font-weight: normal;
	line-height: 1.25;
	padding: 0.3rem 0;
	clear: both;
}

.win98-content h1 {
	text-align: center;
	border-top: 5px double var(--win98-accent-2);
	border-bottom: 5px double var(--win98-accent-2);
}

.win98-content h2 {
	border-bottom: 5px solid var(--win98-accent-2);
}

.win98-content h3 {
	border-bottom: 1px solid var(--win98-accent-2);
}

.win98-content p {
	text-align: justify;
	hyphens: auto;
}

.win98-content a {
	color: var(--win98-link);
}

.win98-content a:hover {
	text-decoration: none;
}

.win98-content img {
	max-width: 100%;
}

.win98-content ul {
	list-style-type: "› ";
	padding-left: 1.5em;
}

.win98-content hr {
	border: none;
	border-top: 1px solid var(--win98-accent);
}

.win98-content dt {
	font-weight: bold;
}

.win98-content dd {
	margin: 0;
	padding: 0 0 0.5em;
}

.win98-content dd::before {
	content: "↪ ";
}

.win98-content blockquote {
	position: relative;
	margin: 1em 0;
	padding: 14px 14px 14px 40px;
	background: var(--win98-face);
	font-style: italic;
}

.win98-content blockquote::before {
	content: "“";
	position: absolute;
	left: 8px;
	top: -8px;
	font-size: 3em;
	font-style: normal;
}

.win98-content blockquote p {
	margin: 0;
}

.win98-content code {
	padding: 1px 6px;
	background: var(--win98-face);
	font-family: var(--win98-font-mono);
	font-size: 0.85em;
	hyphens: none;
}

.win98-content pre {
	padding: 10px;
	overflow-x: auto;
	background: var(--win98-field);
	border-top: 2px solid var(--win98-shadow);
	border-left: 2px solid var(--win98-shadow);
	border-right: 2px solid var(--win98-highlight);
	border-bottom: 2px solid var(--win98-highlight);
	font-family: var(--win98-font-mono);
	font-size: 0.85em;
}

.win98-content pre code {
	padding: 0;
	box-shadow: none;
	background: none;
	font-size: inherit;
}

.win98-content details {
	margin-bottom: 15px;
	padding: 15px;
	background: var(--win98-face);
}

.win98-content summary {
	cursor: pointer;
	font-family: var(--win98-font-ui);
	font-size: 0.9rem;
}

.win98-content details[open] summary {
	margin-bottom: 10px;
}

.win98-content table {
	width: 100%;
	border-collapse: collapse;
	background: var(--win98-field);
}

.win98-content th {
	padding: 4px 8px;
	background: var(--win98-face);
	font-family: var(--win98-font-ui);
	font-size: 0.85rem;
	font-weight: normal;
	text-align: left;
	box-shadow:
		inset -1px -1px var(--win98-shadow),
		inset 1px 1px var(--win98-highlight);
}

.win98-content td {
	padding: 4px 8px;
	border-bottom: 1px solid var(--win98-face);
}

.win98-content figure {
	margin: 1em 0;
}

.win98-content figcaption {
	padding: 5px 0;
	text-align: center;
	font-size: 0.85em;
	color: var(--win98-text-muted);
}

/* Optional: a decorative first letter after each h1/h2.
   Add class="win98-dropcaps" to any wrapper to turn it on. */
.win98-dropcaps h1 + p::first-letter,
.win98-dropcaps h2 + p::first-letter {
	float: left;
	margin-top: -0.05em;
	padding-right: 4px;
	font-family: var(--win98-font-dropcap);
	font-size: 4em;
	font-weight: normal;
	line-height: 0.8;
	color: var(--win98-dropcap);
}

/* Optional: book-style indented paragraphs. */
.win98-indent p + p {
	text-indent: 1.5em;
	margin-top: -0.9em;
}

/* ------------------------------------------------------------------ */
/* Status bar (footer)                                                 */
/* ------------------------------------------------------------------ */

.win98-statusbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 4px 12px;
	margin: 3px 3px 0;
	padding: 4px 8px;
	font-family: var(--win98-font-ui);
	font-size: 0.85rem;
}

.win98-statusbar p {
	margin: 0;
}

.win98-statusbar a {
	color: inherit;
}

.win98-statusbar img {
	image-rendering: pixelated;
}

/* ------------------------------------------------------------------ */
/* Buttons                                                             */
/* ------------------------------------------------------------------ */

.win98-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	min-width: 75px;
	padding: 8px 12px;
	border: none;
	border-radius: 0;
	background: var(--win98-face);
	color: var(--win98-text);
	font-family: var(--win98-font-ui);
	font-size: 0.9rem;
	text-decoration: none;
	cursor: pointer;
}

.win98-content a.win98-button {
	color: var(--win98-text);
}

.win98-button img {
	width: 16px;
	height: 16px;
	image-rendering: pixelated;
}

.win98-button-row {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 1em 0;
}

.win98-button-row .win98-button {
	flex: 1 1 180px;
	padding: 16px 12px;
}

/* ------------------------------------------------------------------ */
/* Small windows inside the page                                       */
/* ------------------------------------------------------------------ */

.win98-window.is-small {
	margin: 1em auto;
	max-width: 100%;
}

.win98-window.is-float {
	width: 220px;
	max-width: 100%;
	margin: 0.3em 0 1em 1.2em;
	float: right;
}

.win98-window.is-float.is-left {
	float: left;
	margin: 0.3em 1.2em 1em 0;
}

@media (max-width: 600px) {
	.win98-window.is-float,
	.win98-window.is-float.is-left {
		float: none;
		width: 100%;
		margin: 1em 0;
	}
}

.win98-window-body {
	padding: 10px;
	background: var(--win98-field);
	color: var(--win98-text);
}

.win98-window-body img {
	display: block;
	max-width: 100%;
	height: auto;
}

.win98-caption {
	padding: 5px 4px 2px;
	font-family: var(--win98-font-ui);
	font-size: 0.8rem;
}

/* A framed picture: put an <img> inside .win98-picture */
.win98-picture img {
	display: block;
	max-width: 100%;
	height: auto;
}

/* ------------------------------------------------------------------ */
/* Small screens                                                       */
/* ------------------------------------------------------------------ */

@media (max-width: 700px) {
	body.win98-desktop {
		padding: 0;
	}

	.win98-content {
		padding: 1em;
	}

	.win98-content p {
		text-align: left;
	}

	.win98-menu a {
		flex-basis: 110px;
		padding: 8px;
	}

	.win98-statusbar {
		flex-direction: column;
		text-align: center;
	}
}