*, *:before, *:after {
  margin: 0;
  box-sizing: border-box;
}

::selection {
  background: wheat;
}

body {
  background: url(background.avif) no-repeat center center fixed;
  background-size: cover;
  min-width: 360px; 
}

@font-face {
  font-family: "Lombardic";
  src: 
	local('Lombardic'),
	url(Lombardic.woff2) format("woff2");
}

main {
  position: relative;
  container-type: inline-size; 
  visibility: visible;  
  height: auto; 
  margin: 0 auto;
  width: 100%;
  max-width: 1600px;
  font-size: 18px;     /* controls font size scalable base between 1280px and 1600px width */  
}
	
#wrapper {
  display: flex;
  flex-flow: row wrap; 
}

#contain {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 70%;
  height: auto;
  margin: 0 auto;
  padding: 4em 0 2em 4em;
  float: left;
}

#containfront {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 85%;
  height: auto;
  margin: 0 auto;
  padding: 4em 0 2em 6em;
  float: left;
}

.subcontain {
  width: 82%;
}

.col {
  max-width: 50vmin;
  min-width: 12vmax;  
}

	#navup {
	  position: absolute;
	  display: flex;
	  top: 5em;
	  height: 4cqh;
	  right: 9%;
	  z-index: 1;
	  align-items: center;
	}

	#navarrow {
	  height: 2.3em;
	  padding: 1cqh 1cqw 0 0;
	}
	
	#navarrow img {
	  width: 2em;
	}

	#navtext {
	  height: 2.6em;
	  padding: 1cqh 2cqw 0 .4cqw;
	}

	#navtext a {
	  font-family: 'Lombardic', Arial; 
	  font-weight: 700;
  	  font-size: 130%;
	  text-decoration: none;
	}
	
	#navtext a:hover {
	  color: yellow;
	 -webkit-text-stroke-width: 0px;
	  animation: animation .65s ease-in-out infinite alternate;
	}	

	#navmain {
	  padding: .4cqh 0 0 0;
	}		
	
	#navmain a {
	  font-family: 'Lombardic', Arial; 
	  color: #6b4721;
	  text-decoration: none;
	 -webkit-text-stroke-width: .2px;
	 -webkit-text-stroke-color: black;		
	  font-size: 250%;
	  font-weight: 300;	   
	}
	
	#navmain a:hover {
	  color: yellow;
	  text-shadow: 
		0px 0px 4px #FFFFFF,
		2px 2px 9px #DDD6C3; 
	  animation: animation .65s ease-in-out infinite alternate;
	}	

	#mode {
	  padding-left: 2cqw;
	}
	
	#mode img {
	  width: 1.5em;
	  filter: drop-shadow(1px 1px 5px white);
	}
	
	#mode img:hover {	
      filter: drop-shadow(5px 5px 5px white)
		drop-shadow(-5px 5px 5px white)
		drop-shadow(5px -5px 5px white)
		drop-shadow(-5px -5px 5px white);
	}	
	
/* #content */

	.itemTitle {
	  font-family: Merriweather Sans, Arial, sans-serif;	
	  font-size: 170%;
	  line-height: 2em;
	  margin-bottom: 6px;		
	  font-style: italic;
	  text-align: left;
	  word-spacing: .2em;
	  color: #6a4621;

	  animation: glow 2s linear 1s;	
	  animation-delay: .5s;
	  animation-duration: 2s;
	  animation-fill-mode: backwards;
	  animation-timing-function: ease-in-out;
	  
	  text-shadow: 
		  1px 3px 5px rgba(0,0,0,0.3), 
          0px -2px 10px rgba(255,255,255,0.3),
		  0px 0px 4px #FFFFFF,
		  18px -8px 30px #ca9052,
		 -18px 8px 30px #b67938,
		 -14px 3px 30px #ca9052,
		  14px -3px 30px #ca9052,
		  16px 8px 30px #8e5e2c, 
		 -18px -8px 30px #6b4721,
		 -16px -4px 30px #ca9052;		 
	}
	
	@keyframes glow {
		0% {
			color: #fead00;
			text-shadow: 0 0 2px #fead00, 0 0 5px #fead00, 0 0 10px #fead00, 0 0 20px #fead00, 0 0 40px #fead00;
		}
		20% {
			text-shadow: 0 0 2px #f39209, 0 0 5px #f39209, 0 0 10px #f39209, 0 0 20px #f39209, 0 0 40px #f39209;
		}			
		50% {
			color: #904d1c;
			text-shadow: 0 0 2px #f0680e, 0 0 5px #f0680e, 0 0 10px #f0680e, 0 0 20px #f0680e, 0 0 40px #f0680e;
		}		
		100% {
			text-shadow: 
		  1px 3px 5px rgba(0,0,0,0.3), 
          0px -2px 10px rgba(255,255,255,0.3),
		  0px 0px 4px #FFFFFF,
		  18px -8px 30px #ca9052,
		 -18px 8px 30px #b67938,
		 -14px 3px 30px #ca9052,
		  14px -3px 30px #ca9052,
		  16px 8px 30px #8e5e2c, 
		 -18px -8px 30px #6b4721,
		 -16px -4px 30px #ca9052;
		}
	}

	.fadein {
		display: inline-block;
		opacity: 0;
		filter: blur(4px);
		animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
	}

	@keyframes fade-in {
		100% {
		  opacity: 1;
		  filter: blur(0);
		}
	}	
	
	.itemTitleCode {
	  font-size: 75%;
	  word-spacing: 0em;
	  padding-left: 30px;
	  opacity: .7;
	  text-shadow: 0px 0px 1px #000;
	}	  

	p {
	  line-height: 1.5em;
	  margin-top: .75em;
	  text-align: left;
	  font-size: 100%;
	}

	.opaque {
	  opacity: .7;
	  font-size: 95%;
	  padding-left: .3cqw;	  
	}
	
	.credit {
	  opacity: .7;
	  font-style: italic;
	  font-size: 95%;
	  padding-left: .3cqw;	  
	}

	.credit a {
	  font-weight: 300;
	}	
	
	.printTitle, .dateTitle {
	  font-size: 105%;
	  font-weight: bold;
	  font-style: italic;
      font-family: Italianno, serif;	  
	 }	 

	.indent {
	  margin: 1em 0 .3em 0;
	  padding-left: 2em;
	}

	.indent p {
	  font-size: 100%;
	  font-weight: bold;
	  margin: .15em 0 .15em 0;
	}

	.indentprint {
	  margin: 1em 0 0 0;
	  padding-left: 4em;
	  text-indent: -2em;
	}
	
	.indentprint p {
	  font-size: 100%;
	  margin: .13em 0 1em 0;
	}
	
	.indentprint p::before {
	  content: "\25CF";
	  margin-right: .8cqw;
	}
	
	.indentprint2 {
	  margin: 1em 0 0 0;
	  padding-left: 2em;
	  text-indent: -2em;
	}
	
	.indentprint2 p {
	  font-size: 100%;
	  margin: .13em 0 1em 0;
	}
	
	.indentprint2 p::before {
	  content: "\25CF";
	  margin-right: .8cqw;
	}
	
	.bullet {
		margin: -10px 10px 22px 26px;
		line-height: 1.5em;
	}
	
	.bullet::before {
	  content: "\2B29";
	  margin-right: 10px;		
	}
		
	.section  {
	  font-family: 'Lombardic', Arial; 
	  font-weight: 700;	
	  font-size: 150%;
	  padding: 0.75em 0 0.75em 0;
	  color: #000;
	}

	.expdesc {
	  padding: 1.2em 0 .6em 0;
	}

	.expdesc a {
	  font-family: 'Lombardic', Arial; 
	  font-weight: 700;		
	  font-size: 150%;
	  text-decoration: none;
	}
	
	.expdesc a:hover {
	  color: yellow;
	 -webkit-text-stroke-width: 0px;
	  animation: animation .65s ease-in-out infinite alternate;
	}		
			
	img.divider {
		width: 90%;
		margin: 1em 0;
		content: url(sectiondivider.png);
	}
	
	img.gradingdivider {
		margin: 0; 
		width: 110%;
		content: url(sectiondivider.png);
	}	

#scans {
  position: relative; 
  width: 30%;
  height: auto;
  margin: 0 auto 2em auto;
  padding: 9.5em 7.5em 2em 1em;
}

	.scanSubtitle {
	  opacity: .7;
	}

	#scanwide {
	  width: 20%; 
	  float: left; 
	  margin: 1.5em 0 .5em 0;
	}
	
	#scanwide img {
	  height: 15cqw;
	  margin: 0 auto .7em auto;
	}	

	#scans p {
	  font-size: 84%;	
	  line-height: 1.4em;
	  margin-top: 0; 
	}
	
	#scanwide p {
	  font-size: 84%;	
	  line-height: 1.4em;
	  text-align: center;
	  margin-top: 0; 
	}	
	
	.scan {
	  width: auto;
	  margin-bottom: 14px;
	}
	
	.scan2nd {
	  width: auto;
	  margin: 34px 0 14px 0;
	}	
	
	.fancybox {
	  display: flex;
	  flex-direction: column;
	  min-width: 100px !important;
	  max-width: 200px !important;
	  margin: 0 auto;
    }

a {
	font-weight: 700;
	text-decoration: none;
}

	a:visited {
		text-decoration: none;
	}
	

.table {
	width: 100%;
	margin-top: 2.5em;
}

.tablegrade {
	min-width: 110%;
	margin-top: 0;
}	

td.gradetext {
	padding-right: 30px;
}

td.leftImage {
	padding: 5px 15px 0 5px;
}

td.rightImage {
	padding: 5px 0 0 0;
}
	
table {
	border: 0;
	border-collapse: collapse;
	margin: 0 auto;
	padding: 0;
	table-layout: fixed;
	min-width: 100%;
}

img.tabledivider {
	width: 70%;
	margin: .2em 0;
	content: url(tabledivider.png);
	float: right;
	padding-bottom: 5px;
}

table.texttable tr {
	height: 60px;
}	

td.element {
	text-align: right;
	font-family: Italianno, serif;
	font-style: italic;
	font-weight: 700;
	font-size: 120%;
	padding-right: 20px;
}	

td.explanation {
	font-family: Italianno;
	font-style: italic;	
	font-size: 110%;
	text-align: left;
	padding-left: 20px;
}

li p {
	padding-left: 10px;
}


/* disable parchment background on Firefox (it's slow) 
@supports (-moz-appearance:none) {
	#parchment {
		display: none;
	}

	#wrapper {
		box-shadow: 2px 3px 20px black, 0 0 80px #8a4d0f inset;
		margin: 3cqw 1cqw 1cqw 2cqw;
		width: 95%;	
		padding: 0em 0em 3em 0em;
	}	
}
*/

/* shift to single-column layout */
@media screen and (max-width: 800px) {
	#contain {
      width: 100%;
	  padding: 4em 5em 4em 6em;
	}

	#scans {
	  width: 100%;
	  padding: 0;
	}
}

/* shift to mobile device layout */
@media screen and (max-width: 580px) {

	main {
	  font-size: 14px;    
	}

	#wrapper {
	  display: flex;
	  flex-flow: row wrap; 
	  margin: 2cqw;
	}
	
	#navup {
	  top: 1.5em;
	}
	
	
	#navarrow img {
	  width: 1.5em;
	}	
	
	#navtext a  {
	  font-size: 85%;
	}	
	
	#navmain a  {
	  font-size: 220%;
	}	

	
	#contain {
	  padding: 2em 1.5em 2em 1.5em;	  
	}
	
	#containfront {
	  width: 100%;
	  padding: 2em 1.5em 2em 1.5em;
	}

	.subcontain {
	  width: 100%;
	}	
	
	.itemTitle {
	  line-height: 1em;
	  font-size: 120%;
	  margin-top: 1.75em;	  
	}
	
	.itemTitleCode {
	  white-space: pre; 
	  position: relative;
	  top: .3em;
	}
	
	.itemTitleCode::before {
	  content: "\a \9";
	}	
	
	.section {
	  font-size: 120%;
	}
	
	.expdesc a {
	  font-size: 120%;
	}
	
	.indent {
	  padding-left: 1em;
	  text-indent: -1em;
	}	

	.indentprint {
	  padding-left: 1em;
	  text-indent: -1em;
	}
	
	.indentprint p::before {
	  all: unset;
	}
	
	.table {
		margin-top: 2.5em;
	}

	table {
		margin: 0 auto;
		padding: 0px;
		table-layout: fixed;
		min-width: 100%;
	}
	
	td.element {
		font-size: 100%;
	}	

	td.explanation {
		font-size: 80%;
		padding-top: 3px;
	}	

	.fancybox {
	  max-width: 80px !important;
    }	

	.tablegrade {
		min-width: 100%;
	}

	img.gradingdivider {
		width: 100%;
	}
	
	td.gradetext {
		vertical-align: top;
	}

	td.leftImage {
		padding: 5px 0 0 0;
		float: left;
	}

	td.rightImage {
		padding: 5px 0 0 0;
		float: left;
	}	
	
	li.ans {
		list-style-type: none;
	}
	
	li.ans p {
		padding-left: 0;
	}	

}

/* Firefox fixes */
@supports (-moz-appearance:none) {
	
	#navup {
	  right: 10%;
	}
	
	/*
	#scans {
		padding: 7.5em 5.5em 2em 1em;
	}
	*/
}