@font-face {
	font-family: 'Departure Mono';
	src:  url('DepartureMono-Regular.woff2') format('woff2'),
		  url('DepartureMono-Regular.woff') format('woff');
  }

/** Font Calcs for Departure Mono 
	11px = 0.6875rem
	22px = 1.375rem
	33px = 2.0625rem
	44px = 2.75rem
	55px = 3.4375rem
	66px = 4.125rem
	**/


/* Some light colors for variables : https://coolors.co/d1dec0-663399-dfc3e8-a71d31-000000 */
:root {
    --bg-body: oklch(0.88 0.0419 126);
	--bg-body: oklch(0.79 0.0182 153.48);
    --bg-card: oklch(1 0 0 / 0.75);

    --main-copy: oklch(0.18 0 0);
	--primary-highlight: oklch(56.36% 0.2312 29.23);
    --link-main: oklch(0.44 0.1603 303.37);
	--link-highlight: oklch(0.34 0.1071 138.87);
  
    --shadow-color: oklch(0 0 0 / 50%);
  
    --shadow-distance: .2rem .2rem;
    --shadow-blur: 0px;
    --shadow-offset: 0px;



    /*** Color mode toggle ***/
	--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);

	--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 {
        --bg-body: rgb(209, 222, 192);
		--bg-body: rgb(178, 190, 181);
		--bg-card: rgba(250, 250, 250, 0.75);

        --main-copy: rgb(17, 17, 17);
		--primary-highlight: rgb(221, 0, 0);
        --link-main: rgb(102, 51, 153);
		--link-highlight: rgb(21, 69, 1);
      
        --shadow-color: rgba(0, 0, 0, 0.5);

    }
}

.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
  }

html, body {
    background-color: var(--bg-body, rgb(240, 240, 240));
	/*background: linear-gradient(
    to right, 
    oklch(0.88 0.0419 126),
    oklch(0.88 0.0419 126) 50%,
	black 50%,
	black 51%,
    oklch(0.79 0.0182 153.48) 51%,
    oklch(0.79 0.0182 153.48)
  );*/
}

body {
    color: var(--main-copy, #111);

    display: flex;
    
    justify-content: center;
	align-items: center;
    flex-direction: column;

    height: 100vh;
    margin: 0;
    font-family: Arial, sans-serif;
}

a:link, a:visited {
    text-decoration: none;
    color: var(--link-main);
    border-bottom: 1px solid var(--main-copy);
}

a:hover {
    color: var(--link-highlight);
    border-bottom: 1px solid var(--link-highlight);
}

main, footer {
    /*display: flex;
    gap: 1rem;*/

    max-width: 65ch;
}

.card {
    width: 16rem;
    padding: 2rem;
  
    border: 1px solid var(--main-copy, #111);
    border-radius: 0 0 .75rem .75rem;
  
    background-color: var(--bg-card, rgb(250, 250, 250));
  
    box-shadow: var(--shadow-distance) var(--shadow-blur) var(--shadow-offset) var(--shadow-color, rgba(0, 0, 0, 0.9));
}

h1 {
    /*color: #333;*/
	font-family: "Departure Mono", monospace;
	font-size: 2.0625rem; /* 33px */
	font-weight: 400;
}




/* From Vagari.dev 
    Adjust as needed later...
*/
/* Dark mode */
@media (prefers-color-scheme: dark) {

	:root {
        /*--bg-body: oklch(0.62 0.0419 126);*/
		--bg-body: oklch(0.46 0.0196 177.5);

		--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);

		--wrapper-bg-color: oklch(0% 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 {
			--gb-body: rgb(77, 92, 88);

			--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);

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

	img {
	  opacity: .75;
	  transition: opacity .5s ease-in-out;
	}
	img:hover {
	  opacity: 1;
	}
  
	/* Copied from dark stylesheet */
	/* Dim background, used on vagari.dev for images. */
	/*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-main);
		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);
	}
	
	/* 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);

	--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);
  }

  	[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;
	}
*/

/* 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.4rem;
  }*/

  .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 {
	color: var(--theme--color-fill-theme-chooser);
  }
  .modes-list label {
	transition: color .2s;
  }

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