:root {
	--a-colour: blue;
	--bg-colour: rgb(248, 248, 255);
	--text-colour: #334;
	--h1-colour: #001;
	--bg-gradient: rgba(248, 248, 255, 0.92);
	--pre-colour: #888;
	--pre-hilite-colour: #000;
	--footer-colour: #666;
}

@media (prefers-color-scheme: dark) {
  :root {
	--a-colour: rgb(170, 170, 255);
	--bg-colour: rgb(48, 48, 55);
	--h1-colour: #eef;
	--text-colour: #dde;
	--bg-gradient: rgba(48, 48, 55, 0.92);
	--pre-colour: #fff;
	--pre-hilite-colour: #dd0;
	--footer-colour: #aaa;
  }
}

html, body				{ margin: 0; }
body					{ font-family: "Alegreya Sans", sans-serif; 
					  background-color: var(--bg-colour);
					  font-weight: 400;
					  color: var(--text-colour);
					  font-size: 14pt; }
article					{ padding: 2rem 0; }
footer,
#tophead,
article > *				{ width: 66rem;
					  max-width: 96%;
					  margin-left: auto;
					  margin-right: auto; }
article > header			{ padding: 2rem 0; }
article > header p			{ font-variant: small-caps; 
					  margin-top: 0;
					  opacity: 0.7;
					  text-align: center; }
article > header h3			{ text-align: center; 
				  	  font-size: 150%;
					  margin-bottom: 0;
					  font-weight: 400; }
.paired					{ display: flex; 
					  display: -webkit-flex;
					  align-items: center; 
					  -webkit-align-items: center; }
.paired > :first-child			{ padding-right: 1rem; }
.paired > :last-child			{ padding-left: 1rem; }
p, li					{ line-height: 140%; }
a					{ color: var(--a-colour); 
					  text-decoration: none; 
					  border-bottom: thin solid transparent; }
a:hover					{ border-bottom: thin solid var(--a-colour); }
code, pre				{ font-size: 75%;
					  font-family: monospace; }

#tophead				{ display: flex;
					  display: -webkit-flex;
					  padding-top: 4rem;
					  padding-bottom: 0.2rem;
					  color: #bbd;
					  flex-direction: row;
					  align-items: flex-end;
					  -webkit-align-items: flex-end;
					  -webkit-flex-direction: row; }
#tophead nav				{ flex: 1; 
					  -webkit-flex: 1;
					  font-size: 80%;
					  text-align: right; }
#tophead nav span + span		{ border-left: thin solid #666; 
					  margin-left: 0.5ex;
					  padding-left: 1ex; }
#tophead h1				{ color: var(--h1-colour); 
					  font-size: 140%;
					  line-height: 90%;
					  font-weight: normal;
					  font-variant: small-caps;
					  margin: 0;  }

#top					{ padding-top: 15rem;
					  padding-bottom: 4rem;
					  background: linear-gradient(to bottom, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.85) 100%), 
						      url(background.jpg);
					  background-position: 50% 50%;
					  background-repeat: no-repeat;
					  background-color: #000;
					  color: #fff; }
#top #logo img				{ width: 90px; }
#top a					{ color: #ff0; 
					  text-shadow: 1px 1px 0 #444; }
#top a:hover				{ border-bottom: thin solid rgba(255, 255, 0, 0.4); }
#top h2					{ font-size: 175%; 
					  margin-top: 0;
					  margin-bottom: 0;
					  text-shadow: 1px 1px 0 #000;
					  font-weight: normal; }

#start					{ background: linear-gradient(to bottom, var(--bg-gradient) 0%, var(--bg-gradient) 100%), 
						      url(background-white.jpg); 
					  background-position: 50% 50%;
					  background-color: #fff;
					  background-repeat: repeat-y; }
#start .exemplar 			{ color: var(--pre-colour); }
#start .exemplar span			{ color: var(--pre-hilite-colour); }
#start nav				{ margin: 1.1em 0; 
					  font-size: 80%;
					  opacity: 0.8; }
#start > section			{ padding: 2rem 0; }
#start img				{ max-width: 100%; }
#start p				{ line-height: 140%; }
#start figure				{ margin: 0;
					  text-align: center; }
#start h4				{ font-weight: 400;
					  margin: 0;
					  font-size: 130%; }

.interstice				{ background-color: #000;
					  text-shadow: 0 0 0 #444;
					  color: #aac;
					  font-weight: 500; }
.interstice .main			{ font-size: 150%; 
					  color: #ddf;
					  line-height: 150%; }

.interstice2				{ border-top: thin solid #ccc;
					  text-align: left; }
.interstice2 dt,
.interstice2 dd				{ margin: auto 0; }
.interstice2 dd				{ margin-bottom: 2rem; }
.interstice2 dt				{ font-weight: 500; }
#news					{ background: linear-gradient(to bottom, var(--bg-gradient) 0%, var(--bg-gradient) 100%), 
						      url(background-white.jpg); 
					  background-color: #fff;
					  background-position: 50% 50%;
					  padding-bottom: 6rem;
					  background-repeat: repeat-y; }
#news ul				{ list-style-type: none; 
					  padding: 0; }
#news ul li				{ display: flex;
					  display: -webkit-flex; }
#news ul li > :first-child		{ flex: 1; 
					  -webkit-flex: 1; }
#news ul li .src			{ opacity: 0.5; }

footer					{ padding-bottom: 2rem; 
					  padding-top: 2rem;
					  text-align: center;
					  font-size: 80%;
					  color: var(--footer-colour); }
footer p				{ margin: 0.1em 0; }

@media only screen and (max-width: 768px), only screen and (max-device-width: 768px) {
  pre					{ overflow: hidden; }
  #tophead h1				{ font-size: 140%; }
  #tophead				{ padding-top: 2rem; }
  #top					{ padding-top: 6rem; }					   
  #top #logo 				{ text-align: center; }
  .paired				{ display: block; }
  .paired > :first-child		{ padding-right: 0; }
  .paired > :last-child			{ padding-left: 0; }
  #start nav				{ font-size: 100%; }
  #start img				{ display: none; }

  #news ul li 				{ display: block; }
  #news ul li > *			{ display: block; }
  #news ul li + li			{ margin-top: 0.5em; }
  #news ul li .src			{ line-height: 100%;
  				  	  font-size: smaller; }
  h2					{ text-align: center; }
}