html, body			{ margin: 0; }
body				{ color: #111;
				  background-color: #fcfcfc; }
h1				{ font-weight: inherit;
				  font-size: 150%;
				  margin-bottom: 8pt;
				  color: #e6e6e6; }
h1 span				{ display: inline-block; 
				  border: 4px solid rgba(255, 255, 255, 0.3);
				  border-radius: 1.0em;
				  text-shadow: none;
				  text-align: center;
				  line-height: 1.0em;
				  color: #fff;
				  height: 1.0em;
				  background-color: rgba(0, 0, 0, 0.1);
				  margin-right: 2pt;
				  width: 1.0em; }
#subtitle			{ font-variant: small-caps;
				  font-weight: 500;
				  line-height: 1em;
				  padding: calc(1pt + 3px) 0;
				  color: #ccc; }
header > div > div		{ display: flex;
				  align-items: flex-end; }
header > div > div > :last-child{ flex: 1; }
header				{ background-color: #3d3d3d;
				  color: #ccc;
				  text-shadow: 0 0 1px #000;
				  padding: 2rem 0 1rem 0; }
a				{ color: red;
				  text-decoration: none; }
article				{ padding: 2rem 0; }
footer				{ font-size: smaller; 
				  opacity: 0.8;
				  padding-bottom: 2rem;
				  color: #666;
				  text-align: center; }
footer span			{ color: #000; }
section > div			{ display: grid;
				  padding: 0.5rem;
				  border-left: 2px solid #f6f6f6;
				  border-top-left-radius: 10px;
				  border-top: 2px solid #f6f6f6;
				  line-height: 1.2em;
				  grid-template-columns: 50% 50%; }
section > h3			{ font-weight: 500;
				  font-size: smaller;
				  margin-top: 1.5rem;
				  padding-left: calc(0.5rem + 2px);
				  padding-bottom: 0;
				  line-height: 1.2em;
				  margin-bottom: 0.2rem;
				  font-variant: small-caps;
				  color: #666; }
article nav			{ padding: 0.5rem 0; }
#minci				{ text-align: right; 
				  text-shadow: none; }
#minci > a			{ display: inline-block; 
				  background-color: rgba(255, 255, 255, 0.7);
				  white-space: nowrap;
				  padding: 1pt 6pt;
				  transition: background-color linear 0.2s, border linear 0.2s;
				  font-size: smaller;
				  border-radius: 4pt;
				  border: 2px solid rgba(255, 0, 0, 0.5); }
#minci > a:hover		{ background-color: rgba(255, 255, 255, 0.8);
				  border: 2px solid rgba(255, 0, 0, 0.8); }
.inactive			{ opacity: 0.5; }

@media (min-width: 60rem) {
  h1				{ font-size: 300%; }
  section > div			{ grid-template-columns: 33% 33% 33%;
				  margin: 0 0.5rem; }
  section > h3			{ padding-left: calc(1rem + 2px); }
  header			{ padding: 6rem 0 1rem 0; }
  article			{ padding: 4rem 0; }
  #minci > a			{ padding: 1pt 12pt; }
}

@media (prefers-color-scheme: dark) {
  body				{ background-color: #5d5d5d;
	  			  color: #fff; }
  a				{ color: yellow; }				   
  section > h3			{ color: #ccc; }
  section > div			{ border-left: 2px solid #4d4d4d;
	  			  border-top: 2px solid #4d4d4d; }
  footer			{ color: #ccc; }
  footer span			{ color: #fff; }
  #minci > a 			{ border: 2px solid rgba(255, 255, 50, 0.5);
	  			  background-color: rgba(255, 255, 255, 0.1); }
  #minci > a:hover		{ border: 2px solid rgba(255, 255, 50, 0.8);
	  			  background-color: rgba(255, 255, 255, 0.3);
}