:root {
	--main-color-light: #f1f0e5;
	--main-color-dark: black;
	--background-color-light: #f1f0e5;
	--code-background-light:white;
	--code-background-dark:#393939;
	--background-color-dark:black;
	--highlight-color-light: #8a3a3a;
	--highlight-color-dark: #f0d0f0;
	--link-color-light:#8a3a3a;
	--link-color-dark:#f0d0f0;
	--link-hover-color-light:#603030;
	--link-hover-color-dark:;
	--text-color-light:#443;
	--text-color-dark:#f0f0f0;
	--body-text-color-light:#443;
	--body-text-color-dark:lightgrey;
	--serif: Martel, serif;
	--sans: cantarell, sans;
	--mono: Fira Code, monospace;
	--logo-brown: #decd87;
	--logo-yellow: #ffd42a;
	--logo-blue: #b7c8c4;
}

@media (prefers-color-scheme: dark) {
	:root {
		--main-color: var(--main-color-dark);
		--background-color: var(--background-color-dark);
		--highlight-color: var(--highlight-color-dark);
		--link-color: var(--link-color-dark);
		--link-hover-color: var(--link-hover-color-dark);
		--text-color: var(--text-color-dark);
		--body-text-color: var(--body-text-color-dark);
		--code-background: var(--code-background-dark);
	}
	
}

.dark {
	--main-color: var(--main-color-dark);
	--background-color: var(--background-color-dark);
	--highlight-color: var(--highlight-color-dark);
	--link-color: var(--link-color-dark);
	--link-hover-color: var(--link-hover-color-dark);
	--text-color: var(--text-color-dark);
	--body-text-color: var(--body-text-color-dark);
	--code-background: var(--code-background-dark);
}

@media (prefers-color-scheme: light) {
	:root {
		--main-color: var(--main-color-light);
		--background-color: var(--background-color-light);
		--highlight-color: var(--highlight-color-light);
		--link-color: var(--link-color-light);
		--link-hover-color: var(--link-hover-color-light);
		--text-color: var(--text-color-light);
		--body-text-color: var(--body-text-color-light);
		--code-background: var(--code-background-light);
		--button-text-color: var(--text-color);
		--button-border-color: var(--logo-yellow);
		--button-bg-color: var(--logo-brown);
		--button-drop-color: var(--logo-blue);
		--button-bg-hover-color: var(--logo-blue);
		--button-text-hover-color: var(--background-color);
		--button-drop-hover-color: var(--logo-brown);
	}
}

.light {
	--main-color: var(--main-color-light);
	--background-color: var(--background-color-light);
	--highlight-color: var(--highlight-color-light);
	--link-color: var(--link-color-light);
	--link-hover-color: var(--link-hover-color-light);
	--text-color: var(--text-color-light);
	--body-text-color: var(--body-text-color-light);
	--code-background: var(--code-background-light);
	--button-text-color: var(--text-color);
	--button-border-color: var(--logo-yellow);
	--button-bg-color: var(--logo-brown);
	--button-drop-color: var(--logo-blue);
	--button-bg-hover-color: var(--logo-blue);
	--button-text-hover-color: var(--background-color);
	--button-drop-hover-color: var(--logo-brown);
}
html {
	background-color:  var(--background-color);
	background-image: url("data:image/svg+xml,%3Csvg width='12' height='16' viewBox='0 0 12 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4 .99C4 .445 4.444 0 5 0c.552 0 1 .45 1 .99v4.02C6 5.555 5.556 6 5 6c-.552 0-1-.45-1-.99V.99zm6 8c0-.546.444-.99 1-.99.552 0 1 .45 1 .99v4.02c0 .546-.444.99-1 .99-.552 0-1-.45-1-.99V8.99z' fill='%239C92AC' fill-opacity='0.4' fill-rule='evenodd'/%3E%3C/svg%3E");
}

h1, h2, h3, h4, h5 {
	font-family: var(--sans);
	margin-left: 10px;
	margin-right: 10px;
	margin-top: 10px;
	margin-bottom: 10px;
}

article p {
	margin-left: 1rem;
	margin-right: 1rem;
}

section {
	border-top: solid 1px color-mix(in srgb, var(--highlight-color) 70%, transparent);
	margin-top: 15px;
	padding-top: 10px;
}

.copyright{
	align-self: stretch;
	align-items: center;
	margin-right: 50px;
	margin-left: auto;
	justify-content: center;
}

main a {
	text-decoration: inherit;
	color: var(--link-color);
	font-family: var(--sans);
	display: inline-block;
}

main a::before {content: " ";}
main a::after {content: " ";}

#title {
	display: none;
}

main a:hover {
	text-decoration: inherit;
	background-color: var(--link-color);
	color: var(--main-color);
	border:none;
	border-radius: 1em;
}

figure img {
  display: block;
}

figure {
	margin: 0;
	padding: 0;
	height: fit-content;
}

#tag-cloud {
	text-align:center;
	padding-left: 15%;
	padding-right: 15%;
	padding-bottom: 2em;
}

#tag-cloud  a {
	margin: 0.5em;
	font-size: 0.8em;
	color: var(--link-color);
	text-decoration:inherit;
}

#tag-cloud a:hover {
	background-color: var(--link-color);
	color: var(--main-color);
	border-radius: 10%;
}

code a::after, code a:hover::after{
	content: "";
}
code {
	font-family: var(--mono)
}

.sourceCode {
	margin: 1rem;
	overflow: scroll;
	max-width: 95%;
	max-height: 30em;
	display: block;
	padding: 1rem 1rem 1rem 0.5rem;
	border: solid var(--highlight-color) 1px;
	background-color: var(--code-background);
}

img {
	max-width: 100%;
}

.document {
	color: var(--text-color);
	max-width: 70rem;
	margin-left: auto;
	margin-right: auto;
	margin-top: 1rem;
	font-family: var(--serif);
	font-size: 1.2rem;
	line-height: 2.2rem;
	
}

#content {
	background-color: var(--main-color);
	width: 100%;
	margin-top: 20px;
	padding-bottom: 20px;
}

nav ul{
	list-style: none;
	padding-left: 0;
}

nav[class~="flex"] {

}

.subtle-links a {
	color: var(--text-color);
	text-decoration: inherit;
}

.subtle-links a:hover {
	text-decoration: inherit;
	background-color: var(--link-color);
	color: var(--main-color);
	border:none;
	border-radius: 10%;
	
}

#logo-button {
	display: block;
	height:110px;
	margin: 0;
}

#logo-button:hover {
	background-color: var(--background-color);
}

.interstitial {
	width: 100%;
	text-align: center;
	padding-top: 100px;
	padding-bottom: 100px;
	border-radius: 100px;
}

footer {
	background-color: var(--background-color);
	color: var(--text-color);
	min-height: 100px;
	min-width: 50px;
	max-width: 1250px;
	width: 100%;
	display: flex;
	font-size: 1rem;
	margin-bottom: 150px;
	font-size: 0.8rem;
}

header {
	width: 70%;
	max-width: 1600px;
	margin-right: auto;
	margin-left: auto;
	padding-top: 5px;
}

footer nav, header nav {
	display: flex;
	flex-flow:row wrap;
	width: 100%;
	font-family: var(--sans);
}

.nav-element h2 {
	margin-bottom: 0px;
	margin-top: 4px;
	font-size: 1rem;
	width: 100px;
}

.nav-element {
	display: inline-flex;
	flex-flow: column wrap;
}

@supports (-moz-appearance: none) {
	.nav-element {width: 200px;}
}

.nav-element ul {
	display: inline-flex;
	flex-flow: column wrap;
	
}

header .nav-element{
	max-height: 65px;
}

header nav > *:last-child{
	margin-left: auto;
	margin-right: auto;
	padding-left: 10px;
	padding-right: 10px;
}

footer .nav-element {
	height: 100px;
	padding-left: 10px;
}

.nav-element p {
	padding-top: 0px;
	padding-bottom: 0px;
	margin-block-start: 4px;
	margin-block-end: 0px;
	padding-right: 10px;
}

figcaption {
	display: none;;
	height: 0px;
}

.imgwrap {
	--major-axis: 180deg;
	--minor-axis-1: 270deg;
	--minor-axis-2: 90deg;
}

.button-link {
  font-size:1.1em;
  font-family: var(--sans);
  width:fit-content;
  height:fit-content;
  border-width:1px;
  color: var(--button-text-color);
  border-color: var(--button-border-color);
  border-radius:28px;
  background: var(--button-bg-color);
  padding: 15px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: auto;
  margin-left: auto;
}
.button-link:hover {
	background: var(--button-bg-hover-color);
	color: var(--button-text-hover-color);
	text-shadow: 1px 1px 0px var(--button-drop-hover-color);
	border-radius:28px;
}


#new-domain-list {
	position: relative;
	margin-right: auto;
	margin-left: auto;
	padding-bottom: 50px;
}

#new-domain-list > ol {
	display: block;
	position: absolute;
	top: 0px;
	left: 0px;
	height: 100%;
	width: 100%;
	margin: 0;
	padding: 0;
/*	list-style: none;*/
}

#new-domain-list figure:nth-child(1){
	margin:0;
	display: none;
}

#new-domain-list figure:nth-child(2){
	margin:0;
}

#new-domain-list li {
	position: absolute;
	display: block;
	height: fit-content;
	font-size: 0.8rem;
	line-height: 1rem;
}

#new-domain-list a {
	max-width: 9em;
	font-family: var(--sans);
	font-weight: bold;
	padding: 3px;
	border: solid 2px var(--highlight-color);
	border-radius: 1em;
	display: block;
	text-align: center;
}

#new-domain-list li:nth-child(1) {left: 20px; top: 37px;}
#new-domain-list li:nth-child(2) {left: 163px; top: 149px;}
#new-domain-list li:nth-child(3) {left: 9px; top: 232px;}
#new-domain-list li:nth-child(4) {left: 173px; top: 350px;}
#new-domain-list li:nth-child(5) {left: 60px; top: 390px;}
#new-domain-list li:nth-child(6) {left: -10px; top: 360px;}
#new-domain-list li a::after {content: "↗"}
#new-domain-list li:nth-child(1) a::before {content: "1. "}
#new-domain-list li:nth-child(2) a::before {content: "2. "}
#new-domain-list li:nth-child(3) a::before {content: "3. "}
#new-domain-list li:nth-child(4) a::before {content: "4. "}
#new-domain-list li:nth-child(5) a::before {content: "5. "}
#new-domain-list li:nth-child(6) a::before {content: "6. "}


#domain-list {
	margin-top: 25px;
	margin-bottop: 25px;
}

#domain-list > ul {
	list-style: none;
	padding-left: 0;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	flex: 160px;
}

#domain-list li {
	position: relative;
	display: block;
	border-radius: 10%;
	width: 160px;
	height: 100px;
	margin: 2px;
}

#domain-list li > * {
	position: absolute;
	width: 100%;
	border-radius: 10%;
	height: 100%
}

#domain-list li > a {
	display: flex;
	width: 100%;
	height: 100%;
	align-items: center;
	justify-content: center;
	text-align: center;
	background-color: color-mix(in srgb, var(--background-color) 75%, transparent);
	color: var(--text-color);
	font-weight: bold;
	inset: 0;
	font-family: var(--sans);
	
}

#domain-list {
	line-height: 1.2rem;
	font-size: 1rem;
	margin-right: auto;
	margin-left: auto;
}

#domain-list li > a:hover {
	background-color: color-mix(in srgb, var(--link-color) 50%, transparent);
	border-radius: 10%;
	color: var(--main-color);
}

.punchline > ul {
	display: flex;
	flex-flow: row wrap;
	margin-right: auto;
	margin-left: auto;
	margin-top: 0px;
	margin-bottom: 0px;
	width: 100%;
	justify-content: center;
	padding-left: 0;
	list-style: none;
	font-size: 1.5rem;
	font-family: var(--sans);
}

.punchline > ul > li {
	display: block;
	margin: 10px;
	max-width: 30%;
	min-width: 200px;
	text-align: center;
}

@media(width >= 800px) {
	header nav > *:last-child{
		margin-right: 0;
	}
	#new-domain-list figure:nth-child(1){
		margin:0;
		display: block;
	}
	#new-domain-list figure:nth-child(2){
		margin:0;
		display: none;
	}
	#new-domain-list {
		padding: 0;
		padding-right: 100px;
	}
	#new-domain-list li:nth-child(1) {left: 20px; top: 170px;}
	#new-domain-list li:nth-child(2) {left: 75px; top: 16px;}
	#new-domain-list li:nth-child(3) {left: 230px; top: 214px;}
	#new-domain-list li:nth-child(4) {left: 307px; top: 75px;}
	#new-domain-list li:nth-child(5) {left: 370px; top: 228px;}
	#new-domain-list li:nth-child(6) {left: 374px; top: 151px;}
}


@media(width >= 1150px) {
	#content {
		width: 90%;
		max-width: 120rem;
		margin-left: auto;
		margin-right: auto;
		border-radius: 40px;
		
	}
}

@media(width >= 1024px) {
	.imgwrap.right {
		--major-axis: 270deg;
		--minor-axis-1: 0deg;
		--minor-axis-2: 180deg;
	}

	.imgwrap.left {
		--major-axis: 90deg;
		--minor-axis-1: 0deg;
		--minor-axis-2: 180deg;
	}
	
	.imgwrap.left > * {
		grid-column-start: 2;
	}
	
	.imgwrap.left > *:last-child {
		grid-column-start: 1;
		grid-row: 1/10;
	}
	
	.imgwrap.right > * {
		grid-column-start: 1;
	}
	
	.imgwrap.right > *:last-child {
		grid-column-start: 2;
		grid-row: 1/10;
	}
	
	.imgwrap {
		display: grid;
		grid-template-columns: 1fr 1fr;
	}

	.imgwrap.thirds.left {
		grid-template-columns: 1fr 2fr;
	}
	.imgwrap.thirds.right {
		grid-template-columns: 2fr 1fr;
	}
	
	#domain-list {
		max-width: 80%;
	}
	footer {
		width: 70%;
		margin-top: 50px;
		margin-right: auto;
		margin-left: auto;
		border-radius: 50px;
	}
	.imgwrap.inset > *:last-child {
	margin-left: 10px;
	margin-right: 10px;
	margin-top:auto;
	margin-bottom: auto;
}
}


.imgwrap > *:last-child {
	position: relative;
	display: block;
	width: fit-content;
	height: fit-content;
	margin-left: auto;
	margin-right: auto;
}

.imgwrap.feather > *:last-child::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
    background-image: radial-gradient(
		ellipse,
		color-mix(
			in srgb,
			var(--background-color) 0%,
			transparent
		) 60%,
		var(--background-color) 100%
	), linear-gradient(
		var(--major-axis),
		color-mix(
			in srgb,
			var(--background-color) 0%,
			transparent
		) 60%,
		var(--background-color) 100%
	), linear-gradient(
		var(--minor-axis-1),
		color-mix(
			in srgb,
			var(--background-color) 0%,
			transparent
		) 80%,
		var(--background-color) 98%
	), linear-gradient(
		var(--minor-axis-2),
		color-mix(
			in srgb,
			var(--background-color) 0%,
			transparent
		) 80%,
		var(--background-color) 98%
	);
}
.imgwrap.feather-light > *:last-child::after {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
    background-image: radial-gradient(
		ellipse,
		color-mix(
			in srgb,
			var(--background-color) 0%,
			transparent
		) 80%,
		var(--background-color) 100%
	), linear-gradient(
		var(--major-axis),
		color-mix(
			in srgb,
			var(--background-color) 0%,
			transparent
		) 80%,
		var(--background-color) 100%
	), linear-gradient(
		var(--minor-axis-1),
		color-mix(
			in srgb,
			var(--background-color) 0%,
			transparent
		) 95%,
		var(--background-color) 98%
	), linear-gradient(
		var(--minor-axis-2),
		color-mix(
			in srgb,
			var(--background-color) 0%,
			transparent
		) 95%,
		var(--background-color) 98%
	);
}

.imgwrap.inset > *:last-child::after {	
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 4px 10px rgba(0,0,0,.35);
  pointer-events: none;
  height: 100%;
  width: 100%;
  border-radius: 2em;
}

.imgwrap.inset > *:last-child *{	
  border-radius: 2em;
}

.contact-form {
  box-sizing: border-box;
  display: grid;
  width: 100%;
  max-width: 44rem;
  margin-block: 1.5rem 3rem;
  margin-left: auto;
  margin-right: auto;
  padding: clamp(1rem, 4vw, 2rem);
  color: var(--body-text-color);
  background: var(--main-color);
  border: 1px solid var(--highlight-color);
  border-radius: 1.25rem;
}

.contact-form p {
	margin: 0;
}

.contact-form *,
.contact-form *::before,
.contact-form *::after {
	box-sizing: inherit;
}

.contact-form__field {
  display: grid;
  gap: 0.5rem;
  min-width: 0;
}

.contact-form label {
  color: var(--text-color);
  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 600;
}

.contact-form input,
.contact-form textarea {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0.8rem 1rem;

  color: var(--body-text-color);
  background: color-mix(
    in srgb,
    var(--main-color) 85%,
    var(--code-background)
  );
  border: 1px solid
    color-mix(in srgb, var(--text-color) 40%, var(--main-color));
  border-radius: 0.65rem;

  box-shadow: inset 0 2px 4px
    color-mix(in srgb, var(--text-color) 12%, transparent);

  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.5;

  transition:
    border-color 150ms ease,
    background-color 150ms ease;
}

.contact-form textarea {
  min-height: 10rem;
  resize: vertical;
  font-family: var(--serif);
}

.contact-form input:focus,
.contact-form textarea:focus {
  background: color-mix(
    in srgb,
    var(--main-color) 65%,
    var(--code-background)
  );
  border-color: var(--highlight-color);
  outline: 2px solid var(--highlight-color);
  outline-offset: 3px;
}

.contact-form small {
  color: var(--body-text-color);
  font-family: var(--sans);
  font-size: 0.9rem;
  line-height: 1.5;
}

.contact-form__actions {
  margin-top: 0.25rem;
}

.contact-form button {
  min-height: 3rem;
  padding: 0.8rem 1.6rem;

  color: var(--button-text-color, var(--text-color-light));
  background: var(--button-bg-color, var(--logo-brown));
  border: 1px solid
    var(--button-border-color, var(--logo-yellow));
  border-radius: 999px;
  box-shadow: 0 3px 0
    var(--button-drop-color, var(--logo-blue));

  font-family: var(--sans);
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.3;

  cursor: pointer;
  transition:
    background-color 150ms ease,
    box-shadow 150ms ease;
}

.contact-form button:hover {
  /* Keep dark text legible against the light blue background. */
  color: var(--text-color-light);
  background: var(--button-bg-hover-color, var(--logo-blue));
  box-shadow: 0 3px 0
    var(--button-drop-hover-color, var(--logo-brown));
}

.contact-form button:focus-visible {
  outline: 2px solid var(--highlight-color);
  outline-offset: 5px;
}

.contact-form button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media (max-width: 36rem) {
  .contact-form button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-form input,
  .contact-form textarea,
  .contact-form button {
    transition: none;
  }
}