:root {
  color-scheme: light dark;
  --bgRough: hsl(30,0%,93%);
  --bgFairway: hsl(113, 10%, 100%);
  --text-color: hsl(30, 50%, 14%);
  --link-color: hsl(200, 50%, 44%);
  --link-color: hsl(206, 62%, 48%);
}

/* Inspired by https://perma-web.net */

@media (prefers-color-scheme: dark) {
  :root {
    --bgRough: #111;
    --bgFairway: #111;
    --text-color: hsl(30, 35%, 59%);
  }
}

html {
  background: var(--bgRough);
  color: var(--text-color);
  font-family: Optima, Candara, Calibri, Arial, sans-serif;
  line-height: 1.5;
  font-size: 14pt;
}
body {
  background: var(--bgFairway);
  margin: auto;
  max-width: 90ex;
  padding: 1ex;
}
button, .btn, a:any-link {
  color: var(--link-color);
	border-bottom: 0.2ex dotted var(--link-color);
  text-decoration: none;
}
#footer {
  margin-top: 2.5ex;
}
img {max-width: 100%;}

@media only screen and (max-width: 615px) {
  body {

  }
  
}

/*
#perma-web {
  background: #080;
  border: .25ex solid hsl(30, 100%, 85%);
  float: right;
  font-family: monospace;
  font-size: 11pt;
  height: 4ex;
  margin: 1em;
  margin-right: -5em;
  outline: .25ex solid #080;
  overflow: hidden;
  padding-right: -5em;
  position: absolute;
  right: -0em;
  text-align: center;
  top: 3em;
  transform: rotate(45deg);
  width: 20em;
}
#perma-web a {
  color: hsl(30, 100%, 85%);
}
#perma-web a::before {
  content: "🌻 ";
  font-size: 150%;
  transform: translateY(-.5ex);
  vertical-align: middle;
}
#perma-web a::after {
  content: " 🌍";
  font-size: 150%;
  transform: translateY(-.5ex);
  vertical-align: middle;
}
*/
/* Inspired by https://www.debian.org/doc/manuals/debian-handbook/index.en.html
 * see also https://www.1-9-9-1.com/ */
 
/* 
#perma-web {
  height: 160px;
  margin: 0;
  overflow: hidden;
  padding: 0;
  position: absolute;
  right: 0;
  top: 0;
  width: 160px;
  z-index: 2;
}
#perma-web a {
  background: #080;
  color: hsl(30, 100%, 85%);
  display: block;
  font-family: monospace;
  font-size: 11pt;
  left: 10px;
  padding: 1px 25px 1px 25px;
  position: relative;
  text-align: center;
  text-decoration: none;
  top: -52px;
  transform-origin: 0 0;
  transform: rotate(45deg);
  width: 230px;
}
#perma-web a span {
  border: 2px solid hsl(30, 100%, 85%);
  display: block;
  padding: 2px 0;
}
#perma-web span::before {
  content: "🌻 ";
  font-size: 150%;
  vertical-align: middle;
}
#perma-web span::after {
  content: " 🌍";
  font-size: 150%;
  vertical-align: middle;
}
*/