/** {
	margin: 0;
	padding: 0;
}*/

/* Cleaning up some color redundancy */
:root {
	--main-copy: oklch(32.11% 0 0);
	--primary-highlight: oklch(47.89% 0.1748 25.83);
	--link-highlight: oklch(0% 0 0);
	--content-bg-color: oklch(100% 0 0 / 65%);
	--content-bg-highlight: oklch(100% 0 0 / 65%);
	--spinner-color: oklch(32.11% 0 0);
	--popover-bg-color: oklch(100% 0 0 / 90%);


	/**
	* Color mode toggle 
	* This all needs to be cleaned up at some point. 
	*/
	--color-mode: 'light';
	/* https://twitter.com/Una/status/1129401554732277760 */
	--icon-sun: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"> <path d="M18 12c0-0.811-0.161-1.587-0.455-2.295-0.304-0.735-0.75-1.395-1.303-1.948-0.552-0.552-1.213-0.998-1.948-1.303-0.707-0.293-1.483-0.454-2.294-0.454s-1.587 0.161-2.295 0.455c-0.735 0.304-1.395 0.75-1.948 1.302s-0.998 1.213-1.302 1.948c-0.294 0.708-0.455 1.484-0.455 2.295s0.161 1.587 0.455 2.295c0.304 0.735 0.75 1.395 1.303 1.948 0.552 0.552 1.213 0.998 1.948 1.303 0.707 0.293 1.483 0.454 2.294 0.454s1.587-0.161 2.295-0.455c0.735-0.304 1.395-0.75 1.948-1.303s0.998-1.213 1.303-1.948c0.293-0.707 0.454-1.483 0.454-2.294zM16 12c0 0.544-0.108 1.060-0.303 1.529-0.202 0.489-0.5 0.929-0.869 1.299s-0.81 0.667-1.299 0.869c-0.469 0.195-0.985 0.303-1.529 0.303s-1.060-0.108-1.529-0.303c-0.489-0.202-0.929-0.5-1.299-0.869s-0.667-0.81-0.869-1.299c-0.195-0.469-0.303-0.985-0.303-1.529s0.108-1.060 0.303-1.529c0.202-0.489 0.5-0.929 0.869-1.299s0.81-0.667 1.299-0.869c0.469-0.195 0.985-0.303 1.529-0.303s1.060 0.108 1.529 0.303c0.489 0.202 0.929 0.5 1.299 0.869s0.667 0.81 0.869 1.299c0.195 0.469 0.303 0.985 0.303 1.529zM11 1v2c0 0.552 0.448 1 1 1s1-0.448 1-1v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1zM11 21v2c0 0.552 0.448 1 1 1s1-0.448 1-1v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1zM3.513 4.927l1.42 1.42c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-1.42-1.42c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM17.653 19.067l1.42 1.42c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-1.42-1.42c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM1 13h2c0.552 0 1-0.448 1-1s-0.448-1-1-1h-2c-0.552 0-1 0.448-1 1s0.448 1 1 1zM21 13h2c0.552 0 1-0.448 1-1s-0.448-1-1-1h-2c-0.552 0-1 0.448-1 1s0.448 1 1 1zM4.927 20.487l1.42-1.42c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-1.42 1.42c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0zM19.067 6.347l1.42-1.42c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-1.42 1.42c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z"></path></svg>');
	
	/* https://css-tricks.com/the-many-ways-to-change-an-svg-fill-on-hover-and-when-to-use-them/ */
	--icon-sun-filter: invert(0.61) sepia(0.8) saturate(5) hue-rotate(0deg) brightness(0.92);
	
	--icon-moon: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"> <path d="M21.996 12.882c0.022-0.233-0.038-0.476-0.188-0.681-0.325-0.446-0.951-0.544-1.397-0.219-0.95 0.693-2.059 1.086-3.188 1.162-0.696 0.047-1.399-0.027-2.077-0.226-0.656-0.192-1.29-0.501-1.874-0.932-0.655-0.484-1.181-1.074-1.575-1.729-0.409-0.68-0.676-1.432-0.792-2.206s-0.082-1.571 0.11-2.342c0.184-0.741 0.514-1.46 0.999-2.115 0.142-0.191 0.216-0.435 0.191-0.691-0.053-0.55-0.542-0.952-1.092-0.898-1.117 0.109-2.186 0.399-3.172 0.843-1.005 0.452-1.925 1.065-2.723 1.808-0.883 0.82-1.618 1.801-2.159 2.901-0.523 1.064-0.863 2.238-0.978 3.485-0.125 1.347 0.024 2.658 0.402 3.878 0.392 1.266 1.031 2.431 1.863 3.433s1.86 1.843 3.033 2.461c1.13 0.595 2.392 0.982 3.739 1.106s2.659-0.025 3.878-0.403c1.266-0.392 2.431-1.031 3.433-1.863s1.843-1.86 2.461-3.033c0.595-1.13 0.982-2.392 1.106-3.739zM19.567 14.674c-0.126 0.351-0.276 0.689-0.447 1.014-0.493 0.937-1.166 1.76-1.969 2.427s-1.735 1.178-2.747 1.491c-0.973 0.302-2.021 0.421-3.102 0.321s-2.089-0.41-2.99-0.884c-0.937-0.493-1.76-1.166-2.427-1.969s-1.178-1.735-1.491-2.747c-0.302-0.973-0.421-2.021-0.321-3.102 0.092-1 0.365-1.938 0.782-2.786 0.43-0.878 1.018-1.661 1.725-2.319 0.64-0.595 1.377-1.086 2.183-1.449 0.179-0.081 0.362-0.155 0.548-0.223-0.092 0.257-0.171 0.516-0.236 0.778-0.256 1.029-0.302 2.091-0.147 3.121s0.51 2.032 1.056 2.941c0.527 0.875 1.23 1.663 2.1 2.306 0.775 0.573 1.622 0.986 2.5 1.243 0.907 0.266 1.846 0.364 2.772 0.302 0.752-0.050 1.496-0.207 2.21-0.465z"></path> </svg>');
	--icon-moon-filter: invert(0.75);

	--icon-github: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="M5 2h4v2H7v2H5V2Zm0 10H3V6h2v6Zm2 2H5v-2h2v2Zm2 2v-2H7v2H3v-2H1v2h2v2h4v4h2v-4h2v-2H9Zm0 0v2H7v-2h2Zm6-12v2H9V4h6Zm4 2h-2V4h-2V2h4v4Zm0 6V6h2v6h-2Zm-2 2v-2h2v2h-2Zm-2 2v-2h2v2h-2Zm0 2h-2v-2h2v2Zm0 0h2v4h-2v-4Z"/></svg>');

	--icon-flickr-pink: oklch(0.32 0 0);

	--color-dark: #141414;
	--color-dark-alpha: rgba(0, 0, 0, 0.1);
	--color-light: #efefef;
	--color-light-alpha: rgba(255, 255, 255, 0.9);
	--button-icon: var(--icon-moon);
	--button-icon-filter: var(--icon-moon-filter);
	--button-background: var(--color-dark);
	--button-color: var(--color-light);

	--theme--color-fill-theme-chooser: var(--primary-highlight);
	--theme-chooser-bg-color: var(--content-bg-highlight);
	--theme-chooser-default-theme: 'auto';
}

/* Backup for non-oklch capable browsers */
@supports not (color: oklch(0% 0 0)) {
	:root {
		--main-copy: rgb(51, 51, 51);
		--primary-highlight: rgb(170, 30, 34);
		--link-highlight: rgb(0, 0, 0);
		--content-bg-color: rgba(255, 255, 255, 65%);
		--content-bg-highlight: rgba(255, 255, 255, 65%);
		--spinner-color: rgb(51, 51, 51);
		--popover-bg-color: rgba(255, 255, 255, 90%);

		--icon-flickr-pink: rgb(51, 51, 51);
	}
}


/*
:root {
	--color-mode: 'light';
	--color-dark: #141414;
	--color-dark-alpha: rgba(0, 0, 0, 0.1);
	--color-light: #efefef;
	--color-light-alpha: rgba(255, 255, 255, 0.9);
	

	--icon-sun: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"> <path d="M18 12c0-0.811-0.161-1.587-0.455-2.295-0.304-0.735-0.75-1.395-1.303-1.948-0.552-0.552-1.213-0.998-1.948-1.303-0.707-0.293-1.483-0.454-2.294-0.454s-1.587 0.161-2.295 0.455c-0.735 0.304-1.395 0.75-1.948 1.302s-0.998 1.213-1.302 1.948c-0.294 0.708-0.455 1.484-0.455 2.295s0.161 1.587 0.455 2.295c0.304 0.735 0.75 1.395 1.303 1.948 0.552 0.552 1.213 0.998 1.948 1.303 0.707 0.293 1.483 0.454 2.294 0.454s1.587-0.161 2.295-0.455c0.735-0.304 1.395-0.75 1.948-1.303s0.998-1.213 1.303-1.948c0.293-0.707 0.454-1.483 0.454-2.294zM16 12c0 0.544-0.108 1.060-0.303 1.529-0.202 0.489-0.5 0.929-0.869 1.299s-0.81 0.667-1.299 0.869c-0.469 0.195-0.985 0.303-1.529 0.303s-1.060-0.108-1.529-0.303c-0.489-0.202-0.929-0.5-1.299-0.869s-0.667-0.81-0.869-1.299c-0.195-0.469-0.303-0.985-0.303-1.529s0.108-1.060 0.303-1.529c0.202-0.489 0.5-0.929 0.869-1.299s0.81-0.667 1.299-0.869c0.469-0.195 0.985-0.303 1.529-0.303s1.060 0.108 1.529 0.303c0.489 0.202 0.929 0.5 1.299 0.869s0.667 0.81 0.869 1.299c0.195 0.469 0.303 0.985 0.303 1.529zM11 1v2c0 0.552 0.448 1 1 1s1-0.448 1-1v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1zM11 21v2c0 0.552 0.448 1 1 1s1-0.448 1-1v-2c0-0.552-0.448-1-1-1s-1 0.448-1 1zM3.513 4.927l1.42 1.42c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-1.42-1.42c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM17.653 19.067l1.42 1.42c0.391 0.391 1.024 0.391 1.414 0s0.391-1.024 0-1.414l-1.42-1.42c-0.391-0.391-1.024-0.391-1.414 0s-0.391 1.024 0 1.414zM1 13h2c0.552 0 1-0.448 1-1s-0.448-1-1-1h-2c-0.552 0-1 0.448-1 1s0.448 1 1 1zM21 13h2c0.552 0 1-0.448 1-1s-0.448-1-1-1h-2c-0.552 0-1 0.448-1 1s0.448 1 1 1zM4.927 20.487l1.42-1.42c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-1.42 1.42c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0zM19.067 6.347l1.42-1.42c0.391-0.391 0.391-1.024 0-1.414s-1.024-0.391-1.414 0l-1.42 1.42c-0.391 0.391-0.391 1.024 0 1.414s1.024 0.391 1.414 0z"></path></svg>');
	

	--icon-sun-filter: invert(0.61) sepia(0.8) saturate(5) hue-rotate(0deg) brightness(0.92);
	
	--icon-moon: url('data:image/svg+xml,<svg version="1.1" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24"> <path d="M21.996 12.882c0.022-0.233-0.038-0.476-0.188-0.681-0.325-0.446-0.951-0.544-1.397-0.219-0.95 0.693-2.059 1.086-3.188 1.162-0.696 0.047-1.399-0.027-2.077-0.226-0.656-0.192-1.29-0.501-1.874-0.932-0.655-0.484-1.181-1.074-1.575-1.729-0.409-0.68-0.676-1.432-0.792-2.206s-0.082-1.571 0.11-2.342c0.184-0.741 0.514-1.46 0.999-2.115 0.142-0.191 0.216-0.435 0.191-0.691-0.053-0.55-0.542-0.952-1.092-0.898-1.117 0.109-2.186 0.399-3.172 0.843-1.005 0.452-1.925 1.065-2.723 1.808-0.883 0.82-1.618 1.801-2.159 2.901-0.523 1.064-0.863 2.238-0.978 3.485-0.125 1.347 0.024 2.658 0.402 3.878 0.392 1.266 1.031 2.431 1.863 3.433s1.86 1.843 3.033 2.461c1.13 0.595 2.392 0.982 3.739 1.106s2.659-0.025 3.878-0.403c1.266-0.392 2.431-1.031 3.433-1.863s1.843-1.86 2.461-3.033c0.595-1.13 0.982-2.392 1.106-3.739zM19.567 14.674c-0.126 0.351-0.276 0.689-0.447 1.014-0.493 0.937-1.166 1.76-1.969 2.427s-1.735 1.178-2.747 1.491c-0.973 0.302-2.021 0.421-3.102 0.321s-2.089-0.41-2.99-0.884c-0.937-0.493-1.76-1.166-2.427-1.969s-1.178-1.735-1.491-2.747c-0.302-0.973-0.421-2.021-0.321-3.102 0.092-1 0.365-1.938 0.782-2.786 0.43-0.878 1.018-1.661 1.725-2.319 0.64-0.595 1.377-1.086 2.183-1.449 0.179-0.081 0.362-0.155 0.548-0.223-0.092 0.257-0.171 0.516-0.236 0.778-0.256 1.029-0.302 2.091-0.147 3.121s0.51 2.032 1.056 2.941c0.527 0.875 1.23 1.663 2.1 2.306 0.775 0.573 1.622 0.986 2.5 1.243 0.907 0.266 1.846 0.364 2.772 0.302 0.752-0.050 1.496-0.207 2.21-0.465z"></path> </svg>');
	--icon-moon-filter: invert(0.75);
	
	--background: #efefef;
	--text-color: #141414;
	--button-icon: var(--icon-moon);
	--button-icon-filter: var(--icon-moon-filter);
	--button-background: var(--color-dark);
	--button-color: var(--color-light);
	--border-color: var(--color-dark-alpha);
  }
*/

html {
	position: relative;
	margin: 0;
	padding: 0;
}

body {
	color: var(--main-copy);
	font-size: 62.5%;
	font-family: Constantia, "Book Antiqua", Palatino, Georgia, Times, "Times New Roman", serif;
	margin: 0;
	padding: 0;
}

h1 {
	margin: 0;
	padding: 0;
	font-size: 2.6em;
	line-height: 2.2em;
	font-family: metapro-book, metaot-book, "Myriad Pro", Myriad, "lucida grande", verdana, helvetica, arial, sans-serif;
	font-weight: normal;

	color: var(--primary-highlight);
}

h2 {
	margin: .2em 0 .3em;
	font-size: 2em;

	font-family: metapro-book, metaot-book, "Myriad Pro", Myriad, "lucida grande", verdana, helvetica, arial, sans-serif;
}

h3 {
	font-weight:  normal;
	font-size: 1.8em;
	
}

p {
	font-size: 1.6em;
	line-height: 1.8em;
	/*margin: .3em 0 0;*/
}

a:link, a:visited {
	text-decoration: none;
	color: var(--link-highlight);
	border-bottom: 1px dotted var(--primary-highlight);
}

a:hover {
	color: var(--primary-highlight);
}

#block1, #block2 {
	background-color: var(--content-bg-color);
	color: var(--main-copy);
	position: relative;
	padding: 1.5em;
	/*margin: 0 0 3em 0;*/
	margin: 3em 1.25em;

	border-radius: .75rem .75rem .25rem .25rem;
}

#block1, footer {
	width: calc(100% - 5.5em);
	/*float: left;*/
}

/*#block2 {
	width: 60em;
	top: 55px;
	left: 125px;
	max-width: 900px;*/
	/*width: 60em;
	max-width: 60em;
}*/

footer {
	position: relative;
	padding: .5em 1.5em;
	margin: 3em 1.25em;

	background-color: var(--content-bg-color);
	color: var(--main-copy);

	border-radius: .25rem;
}

footer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1em 1em;
	grid-auto-flow: row;
	grid-template-areas:
		"footer theme-toggle";
}

.theme-toggle {
	grid-area: theme-toggle;
}

	.colophon-popover {
		display: none;
		padding: 1rem;

		opacity: 0;
		transition: opacity 1s, display 1s, overlay 1s;
		transition-behavior: allow-discrete;

		background-color: var(--popover-bg-color);
		color: var(--main-copy);
		border: none;
		border-radius: .25rem;

		& > * {
			padding: 0.5rem;
		}

		/*&::backdrop {
			background-color: var(--content-bg-color);
			opacity: 1;
			transition: opacity .5s;
		}*/

		/* Popover from Kevin Powell video/codepen. grid makes height huge with `grid`. Should investigate more later. */
		&:popover-open {
			display: grid;
			display: block;
			opacity: 1;

			@starting-style {
				display: grid;
				display: block;
				opacity: 0;
			}
		}
	}

	@supports (position-anchor: --my-anchor) {
		.colophon-popover {
			/* anchoring to the button */
			position: absolute;
			position-anchor: --colophon-button;
			margin: 0;
			inset: auto;
			bottom: anchor(bottom);
			left: anchor(right);

			position-try-fallbacks: --left;

			margin: 0 0.5rem 0 .5rem;
		}
	}

	.colophon-popover h3, .colophon-popover p {
		margin: 0;
	}

	.colophon-popover h3 {
		font-family: metapro-book, metaot-book, "Myriad Pro", Myriad, "lucida grande", verdana, helvetica, arial, sans-serif;
	}

	.colophon-popover p {
		margin-block-start: .25lh;
	}

	footer .pop-button {
		color: var(--main-copy);
		background: none;
		border: none;
		cursor: pointer;
		padding-inline: 0;

		anchor-name: --colophon-button;
	}

	p.copyright, p.colophon {
		line-height: 1lh;
		margin-block: .75rem;
	}
	
	footer .colophon {
		display: inline-block;
		margin-right: .5rem;
	}

	footer p.colophon a {
		border-bottom: 0;
	}

	footer p.colophon svg {
		height: 1.25rem;
		width: 1.25rem;
		vertical-align: -.25rem;
	}

	@position-try --left {
		inset: auto;
		top: anchor(bottom);
		right: anchor(right);
	}

	.copyright {
		font-size: 1.4em;
		display: inline-block
	}

:is(button, .button) {
    cursor: pointer;
	/*display: inline-flex;*/
    
    text-decoration: none;
    /*padding: 1rem 2rem;
    font-weight: 500;*/
    /*background-color: var(--btn-surface, var(--btn-default-surface));
    color: white;*/
    border: 0;
    /*border-radius: 1rem;*/
    transition: scale 0.125s;
  }

  :is(button, .button):is(:hover, :focus-visible) {
	color: var(--theme--color-fill-theme-chooser);
  }

  :is(button, .button):active {
    scale: 0.95;
  }

.spinner {
	width: 3em;
	position: absolute;
	top: 3em;
	right: 1.5em;
	
	opacity: 0;
	transition: opacity 0.5s;
}

.spinner.show {
	opacity: 1;
	transition: opacity 0.5s;
}

.pixel-corners {
	clip-path: polygon(
	  0px calc(100% - 12px),
	  3px calc(100% - 12px),
	  3px calc(100% - 6px),
	  6px calc(100% - 6px),
	  6px calc(100% - 3px),
	  12px calc(100% - 3px),
	  12px 100%,
	  calc(100% - 12px) 100%,
	  calc(100% - 12px) calc(100% - 3px),
	  calc(100% - 6px) calc(100% - 3px),
	  calc(100% - 6px) calc(100% - 6px),
	  calc(100% - 3px) calc(100% - 6px),
	  calc(100% - 3px) calc(100% - 12px),
	  100% calc(100% - 12px),
	  100% 12px,
	  calc(100% - 3px) 12px,
	  calc(100% - 3px) 6px,
	  calc(100% - 6px) 6px,
	  calc(100% - 6px) 3px,
	  calc(100% - 12px) 3px,
	  calc(100% - 12px) 0px,
	  12px 0px,
	  12px 3px,
	  6px 3px,
	  6px 6px,
	  3px 6px,
	  3px 12px,
	  0px 12px
	);
  }

dl#contact {
	width: 18em;
	font-size: 1.4em;
	margin: 0 0 2em;
	padding: 0;
}
	
	dl#contact dt {
		text-transform: lowercase;
		font-variant: small-caps;
		float:left;
		clear:left;

		width:4.5em;
		margin-bottom:0.3em;
		font-weight:normal;
		position:relative /*IEWin hack*/
	}
	
	dl#contact dd {
		clear:right;
		margin-bottom:0.3em;
		font-size:100%;
		font-style:normal;
		padding-left:0.5em;
	}
	

ul#site_list {
	width: 22.5em;
	margin: 0;
	padding: 0;
}

	li {
		list-style: none;
		padding: .5em 0 1em;
		position: relative;
	}
	
	ul#site_list p {
		margin: 0;
		padding: 0;
	}
	
		li p.last_update {
			position: absolute;
			top: .2em;
			right: 0;
			font-size: 1.4em; 
		}
	
	ul#site_list h3 {
		margin: 0;
		padding: 0;
	}
	
		ul#site_list h3 a {
			display: block;
		}

		ul#site_list h3 svg {
			height: 1.25rem;
			width: 1.25rem;
			vertical-align: -.25rem;
		}

			ul#site_list h3 a svg .flickrPink {
				fill: var(--icon-flickr-pink);
			}

			ul#site_list h3 a:hover svg .flickrPink {
				fill: currentColor;
			}

		/*ul#site_list h3.github a::before {
			content: var(--icon-github);
			position: absolute;
			top: 0;
			left: 0;
			color: inherit;
			width: 24px;
		}*/

a.rain {
	font-family: metapro-book, metaot-book;
}

a.rain em {
	font-variant: small-caps;
	font-style: normal;
}

.sr-only:not(:focus):not(:active) {
	clip:rect(0 0 0 0);
	clip-path:inset(100%);
	height:1px;
	overflow:hidden;
	position:absolute;
	white-space:nowrap;
	width:1px
  }

.reset {
	clear: both; 
	font-size: 1px; 
	height: 1px; 
	line-height: 1px; 
	margin: 0;
}

/*@media (prefers-color-scheme: light) {

	 Copied from light stylesheet, but some redundant styles removed 
	h1 {
		color: var(--primary-highlight);
	}
	
	#block1, #block2 {
		background-color: var(--content-bg-color);
		color: var(--main-copy);
	}
	
	.hresume .resume_block {
		border-top: .1em dotted var(--main-copy);
	}
	
	.hresume hr {
		display: block;
		margin: 1em 0 .5em 0;
		visibility: hidden;
		color: var(--main-copy);
	}
	
	/* Navigation Type 1 
	ul#main_nav {
		background-color: var(--content-bg-color);
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
		ul#main_nav li a:hover {
			color: var(--primary-highlight);
		}
		
		ul#main_nav li.current {
			background-color: var(--content-bg-highlight);
			color: var(--primary-highlight);
		}
	/* end Navigation Type 1 
	

}*/
  
@media (prefers-color-scheme: dark) {

	:root {
		--main-copy: oklch(94.91% 0 0);
		--primary-highlight: oklch(56.36% 0.2312 29.23);
		--link-highlight: oklch(100% 0 0);
		--content-bg-color: oklch(0% 0 0 / 60%);
		--content-bg-highlight: oklch(100% 0 0 / 10%);
		--spinner-color: oklch(94.91% 0 0);
		--popover-bg-color: oklch(0% 0 0 / 90%);

		--wrapper-bg-color: oklch(0% 0 0);

		--icon-flickr-pink: oklch(0.85 0 0);

		--color-mode: 'dark';

		:root:not([data-user-color-scheme]) {
			--background: var(--color-dark);
			--text-color: var(--color-light);
			--button-icon: var(--icon-sun);
			--button-icon-filter: var(--icon-sun-filter);
			--button-background: var(--color-light);
			--button-color: var(--color-dark);
			--border-color: var(--color-light-alpha);
		  }
	}

	/* Backup for non-oklch capable browsers */
	@supports not (color: oklch(0% 0 0)) {
		:root {
			--main-copy: rgb(238, 238, 238);
			--primary-highlight: rgb(221, 0, 0);
			--link-highlight: rgb(255, 255, 255);
			--content-bg-color: rgba(0, 0, 0, 60%);
			--content-bg-highlight: rgba(255, 255, 255, 10%);
			--spinner-color: rgb(238, 238, 238);
			--popover-bg-color: rgba(0, 0, 0, 90%);

			--wrapper-bg-color: rgb(0, 0, 0);

			--icon-flickr-pink: rgb(205, 205, 205);
		}
	}

	[data-user-color-scheme="light"]:root {
		--main-copy: oklch(32.11% 0 0);
		--primary-highlight: oklch(47.89% 0.1748 25.83);
		--link-highlight: oklch(0% 0 0);
		--content-bg-color: oklch(100% 0 0 / 65%);
		--content-bg-highlight: oklch(100% 0 0 / 65%);
		--spinner-color: oklch(32.11% 0 0);
		--popover-bg-color: oklch(100% 0 0 / 90%);

		--icon-flickr-pink: oklch(0.32 0 0);
	}

		@supports not (color: oklch(0% 0 0)) {
			[data-user-color-scheme="light"]:root {
				--main-copy: rgb(51, 51, 51);
				--primary-highlight: rgb(170, 30, 34);
				--link-highlight: rgb(0, 0, 0);
				--content-bg-color: rgba(255, 255, 255, 65%);
				--content-bg-highlight: rgba(255, 255, 255, 65%);
				--spinner-color: rgb(51, 51, 51);
				--popover-bg-color: rgba(255, 255, 255, 90%);
		
				--icon-flickr-pink: rgb(51, 51, 51);
			}
		}

		[data-user-color-scheme="light"] body::before {
			content: none;
			position: fixed;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
			z-index: 1;
			background-color: inherit;
			opacity: 0.4;
		}

	img {
	  opacity: .75;
	  transition: opacity .5s ease-in-out;
	}
	img:hover {
	  opacity: 1;
	}
  
	/* Copied from dark stylesheet */
	body {
		color: var(--main-copy);
	}

	body::before {
		content: "";
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1;
		background-color: var(--wrapper-bg-color);
		opacity: 0.4;
	}

	body > * {
		z-index: 2;
	}
	
	h1 {
		color: var(--primary-highlight);
	}
	
	a:link, a:visited {
		text-decoration: none;
		color: var(--link-highlight);
		border-bottom: 1px dotted var(--primary-highlight);
	}
	
	a:hover {
		color: var(--primary-highlight);
	}
	
	#block1, #block2 {
		background-color: var(--content-bg-color);
		color: var(--main-copy);
	}
	
	.hresume .resume_block {
		border-top: .1em dotted var(--main-copy);
	}
	
	.hresume hr {
		display: block;
		margin: 1em 0 .5em 0;
		visibility: hidden;
		color: var(--main-copy);
	}
	
	/* Navigation Type 1 */
	ul#main_nav {
		background-color: var(--content-bg-color);
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		margin: 0;
		padding: 0;
		list-style: none;
	}
	
		ul#main_nav li a:hover {
			color: var(--primary-highlight);
		}
		
		ul#main_nav li.current {
			background-color: var(--content-bg-highlight);
			color: var(--primary-highlight);
		}
	/* end Navigation Type 1 */

}

[data-user-color-scheme="dark"] {
	--main-copy: oklch(94.91% 0 0);
	--primary-highlight: oklch(56.36% 0.2312 29.23);
	--link-highlight: oklch(100% 0 0);
	--content-bg-color: oklch(0% 0 0 / 60%);
	--content-bg-highlight: oklch(100% 0 0 / 10%);
	--spinner-color: oklch(94.91% 0 0);
	--popover-bg-color: oklch(0% 0 0 / 90%);

	--wrapper-bg-color: oklch(0% 0 0);

	--icon-flickr-pink: oklch(0.85 0 0);

	--background: var(--color-dark);
	--text-color: var(--color-light);
	--button-icon: var(--icon-sun);
	--button-icon-filter: var(--icon-sun-filter);
	--button-background: var(--color-light-alpha);
	--button-color: var(--color-dark);
	--border-color: var(--color-light-alpha);
  }

  	@supports not (color: oklch(0% 0 0)) {
		[data-user-color-scheme="dark"] {
			--main-copy: rgb(238, 238, 238);
			--primary-highlight: rgb(221, 0, 0);
			--link-highlight: rgb(255, 255, 255);
			--content-bg-color: rgba(0, 0, 0, 60%);
			--content-bg-highlight: rgba(255, 255, 255, 10%);
			--spinner-color: rgb(238, 238, 238);
			--popover-bg-color: rgba(0, 0, 0, 90%);

			--wrapper-bg-color: rgb(0, 0, 0);

			--icon-flickr-pink: rgb(205, 205, 205);
		}
	}

  	[data-user-color-scheme="dark"] body {
		color: var(--main-copy);
	}

	[data-user-color-scheme="dark"] body::before {
		content: "";
		position: fixed;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 1;
		background-color: var(--wrapper-bg-color);
		opacity: 0.4;
	}

	[data-user-color-scheme="dark"] body > * {
		z-index: 2;
	}


/* Maybe for later */
[data-user-color-scheme="retro"] {
	--main-copy: oklch(94.91% 0 0);
	--primary-highlight: oklch(56.36% 0.2312 29.23);
	--link-highlight: oklch(100% 0 0);
	--content-bg-color: oklch(0% 0 0 / 60%);
	--content-bg-highlight: oklch(100% 0 0 / 10%);
	--spinner-color: oklch(94.91% 0 0);
	--popover-bg-color: oklch(0% 0 0 / 90%);

	--wrapper-bg-color: oklch(0% 0 0);



	--background: var(--color-dark);
	--text-color: var(--color-light);
	--button-icon: var(--icon-sun);
	--button-icon-filter: var(--icon-sun-filter);
	--button-background: var(--color-light-alpha);
	--button-color: var(--color-dark);
	--border-color: var(--color-light-alpha);
	}

/* If there’s no JS, there’s no need for the user toggle component to show */
.no-js .user-toggle {
	display: none;
  }

  .theme-toggle:not([hidden]) {
	display: inline-flex;
  }
  .theme-toggle {
	align-items: center;
	flex: 0 0 auto;
	gap: .5rem;
	justify-content: flex-end;
	line-height: 1;
	margin-top: -0.25rem;
	margin-bottom: -0.25rem;
  }

  .theme-toggle span {
	font-size: 1.4em;
  }

  .modes-list[class] {
	background: var(--theme-chooser-bg-color);
	border-radius: 1rem;
	display: inline-flex;
	gap: 1rem;
	list-style: none;
	padding: .5rem .75rem;
  }

  .modes-list li {
	position: relative;
	padding: 0;
  }

  input[name="theme-chooser"] {
	cursor: pointer;
	height: 100%;
	opacity: 0;
	position: absolute;
	width: 100%;
  }

  input[name="theme-chooser"]:checked + label,
  input[name="theme-chooser"]:hover + label {
	color: var(--theme--color-fill-theme-chooser);
  }
  .modes-list label {
	transition: color .2s;
  }

  .modes-list svg {
	height: 1rem;
	width: 1rem;
  }
  

/* Grid */

@media screen and (min-width: 34em) { /*  and (orientation: landscape) */

	#block1, #block2 {
		position: relative;
	}

	/*#block2 {
		margin: 105px 125px;
		width: 60em;
	}*/

	#block1 {  
		display: grid;
		grid-template-columns: 1fr 1fr;
		grid-template-rows: 1fr 5fr;
		gap: 1em 1em;
		grid-auto-flow: row;
		grid-template-areas:
		  "header header"
		  "col1 col2";
	  }
	  
	  .header { grid-area: header; }
	  
	  .col1 { grid-area: col1; }
	  
	  .col2 { grid-area: col2; }

	
	dl#contact {
		width: 18em;
		/*float: right;*/
		font-size: 1.4em;
		margin: 0;
		padding: 0;
	}
		
		dl#contact dt {
			text-transform: lowercase;
			font-variant: small-caps;
			float:left;
			clear:left;
			width:4.5em;
			margin-bottom:0.8em;
			text-align:right;
			font-weight:normal;
			position:relative /*IEWin hack*/
		}
		
		dl#contact dd {
			clear:right;
			margin-left:5.5em;
			margin-bottom:0.8em;
			font-size:100%;
			font-style:normal;
			padding-left:0.5em;
		}

	/*footer {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1em 1em;
		grid-auto-flow: row;
		grid-template-areas:
		  "footer theme-toggle";
	}

	.theme-toggle {
		grid-area: theme-toggle;
	}*/

}

@media screen and (min-width: 42em) { /*  and (orientation: landscape) */

	#block1, #block2, footer {
		position: relative;
	}

	#block1  {
		margin: 100px 125px;
		width: 50em;
	}

	#block2 {
		margin: 105px 125px;
		width: 60em;
	}

	footer.block1 {
		margin: 0 125px 100px;
		width: 50em;
	}

	footer.block2 {
		margin: 0 125px 100px;
		width: 60em;
	}

}
  

/* hResume */

/*.hresume {
	width: 100%;
	padding: 10px;
}*/

.hresume .resume_block {
	border-top: .1em dotted var(--main-copy);
}

.hresume abbr {
    border: none;
}

.hresume address {
    font-style: normal;
}

.hresume .adr {
	float: left;
	font-size: 1.4em;
	line-height: 1.5em;
	width: 50%;
}

.hresume .type {
    display: none;
}

.hresume dl#phone, .hresume dl#contact {
	clear: right;
}
	
	.hresume dl#contact dt, .hresume dl#contact dd {
		margin-bottom:0.3em;
	}
	
	dl#contact dt, dl#contact dd {
		margin-bottom:0.3em;
	}

.hresume hr {
	display: block;
	margin: 1em 0 .5em 0;
	visibility: hidden;
	color: var(--main-copy);
}

/*.hresume .contact .fn {
	font-weight: bold;
	font-size: 12pt;
}*/

.hresume h3 {
	font-size: 1.6em;
	padding: 0;
	margin: .7em 0 .5em;
	font-weight: bold;
}

.hresume h4 {
	font-size: 1.6em;
	padding: 0;
	margin: .5em 0;
}

.hresume p {
	font-size: 1.4em;
}


/*.hresume .education, .hresume .accreditation {
	margin: 10px 0 10px 20px;
	padding: 1px;
}*/

/*.hresume .experience {
	margin: 10px 0 30px 20px;
	padding: 1px;
}*/

/*.hresume .summary, .hresume .tags {
	margin: 10px 0 20px 20px;
	padding: 1px;
}*/

.hresume .education .htitle, .hresume .experience .htitle {
	margin: .5em 0 0;
	font-size: 1.6em;
	float: left;
}

.hresume .htitle .include {
	display: none;
	width: 0;
	height: 0;
}

.hresume .education .date_duration, .hresume .experience .date_duration {
	float: right;
	margin: .5em 0 .2em;
	font-size: 1.4em;
	/*font-size: smaller;*/
}

.hresume .experience .description p {
	margin: 1em 0;
}

/*.hresume  {
	display: inline;
}*/

.hresume ul.tags {
	list-style: none;
	margin: 0;
	padding: 0;
}

.hresume ul.tags li {
	margin: 0 3% 0 0;
	padding: 0;
	float: left;
	width: 22%;
}

.hresume ul.tags li a {
	display: block;
	padding: 3% 1%;
	margin: 0 0 0 -1%;
	font-size: 1.4em;
}

.hresume p.left {
	float: left;
	margin: 0;
	padding: 0;
	line-height: 1.4em;
}

/* end hResume */

/* Navigation Type 1 */
ul#main_nav, body > header {
	background-color: var(--content-bg-color);
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}

	ul#main_nav li {
		margin: 0;
		padding: .3em 0 .2em;
		list-style: none;
		float: left;
		font-size: 1.4em;
	}
	
	ul#main_nav li:first-child {
		margin-left: 115px;
	}
	
	ul#main_nav li a:link, ul#main_nav li a:visited {
		text-decoration: none;
		border: none;
		padding: .3em 1em .2em;
		text-transform: lowercase;
		font-weight: bold;
		letter-spacing: .1em;
	}

	ul#main_nav li a:hover {
		color: var(--primary-highlight);
	}
	
	ul#main_nav li.current {
		background-color: var(--content-bg-highlight);
		color: var(--primary-highlight);
	}
	

/* end Navigation Type 1 */

/* Navigation Type 2 */
ul#main_nav2 {
	float: left;
	width: 10em;
	position: relative;
	margin: 100px 125px 100px -100px;
	background-color: var(--content-bg-color);
	padding: 0;
	list-style: none;
}

	ul#main_nav2 li {
		margin: 0;
		padding: 0;
		font-size: 1.4em;
	}
	
	
	ul#main_nav2 li a:link, ul#main_nav2 li a:visited {
		display: block;
		text-decoration: none;
		border: none;
		margin: 0;
		padding: .5em 1em;
		font-variant: small-caps;
	}
	
	ul#main_nav2 li a:hover {
		color: var(--primary-highlight);
	}
	
	ul#main_nav2 li.current {
		background-color: var(--content-bg-highlight);
		color: var(--primary-highlight);
	}
	
/* end Navigation Type 2 */