@charset "utf-8";
/* CSS Document */

body {
  background-color: light-dark(var(--green-light), var(--green-dark));
  color: light-dark(var(--neutral-darkest), var(--neutral-ghost));
	max-width: 50em;
	margin: 0 auto;
	padding: 1em;
}

h1 {
	margin-bottom: 2em;
}

h1 img {
	 width: 9em;
	 margin-right: 1em;
	 rotate: -5deg;
}

a {
	color: light-dark(var(--green-dark),var(--green-light));
}
a:hover,
a:focus {
	text-decoration-style: double;
}

.navbar {
  background-color: var(--green-dark);
}

.button-primary {
  background-color: var(--gold);
  color: var(--green-dark);
}

.button-primary:hover {
  background-color: var(--gold-light);
}

section {
	padding: 1em;
	border: thin dotted;
	margin-block-end: 1em
}

.selfhtml {
	
	img {
		float:right;
		margin-left: 1em;
		width: 6em;
	}
}

:root {
	color-scheme: light dark;
  --green-deepest: oklch(0.25 0.12 125);
  --green-dark: oklch(0.44 0.2 125);
  --green-mid: oklch(0.57 0.22 125);
  --green-medium: oklch(0.7 0.25 125);
  --green-light: oklch(0.9 0.06 125);
  --green-ghost: oklch(0.96 0.02 125);

	--gold-deepest: oklch(0.35 0.1 95);
	--gold-dark: oklch(0.6 0.12 95);
	--gold-mid: oklch(0.72 0.16 95);
	--gold-light: oklch(0.82 0.13 95);	
	--gold:  oklch(0.88 0.18 95);
	--gold-ghost: oklch(0.96 0.04 95);

	--neutral-darkest: oklch(0.2 0.02 110);
	--neutral-dark: oklch(0.35 0.03 110);
	--neutral-mid: oklch(0.55 0.02 110);
	--neutral-light: oklch(0.88 0.01 110);
	--neutral-ghost: oklch(0.97 0.005 110);
	
	--color-alert: oklch(0.55 0.22 25); /* firebrick-ish */
	--color-alert-light: oklch(0.93 0.04 25); /* blush ghost */
}