/* critical.css is made available under an MIT open source license () by Adrian S. Wisnicki. It was developed by Adrian S. Wisnicki and partly adapted from One More Voice (https://onemorevoice.org) which is released under a Creative Commons Attribution-NonCommercial 4.0 International (CC BY-NC 4.0) license (https://creativecommons.org/licenses/by-nc/4.0/). */

/* critical.css only really need for anything that appears above the fold on page load */
/* Ideally this file should be minified using https://duckduckgo.com/?t=ffsb&q=css+minifier&atb=v71-1&ia=answer or similar once the file is in a stable/finalized state */
/* See style.css for full, annotated CSS. Any changes made to this file should also be made in the corresponding place in style.css */

:root{
  font-family: 'Source Sans Pro', sans-serif;
  font-weight: normal;
  line-height: 1.875rem;
}
*,
*:after,
*:before{
  outline: none;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
button{
  all: unset;
  -webkit-appearance: button;
}
html{
  -ms-text-size-adjust: 100%;
  -webkit-text-size-adjust: 100%;
  overflow-x: hidden;
  overflow-y: scroll;
}
body{
  font-size: 1rem;
  background-image: url("../images/blue-ornate-vector-pattern.jpg");
  background-repeat: repeat;
  margin: 0 auto;
  padding: 0;
  max-width: 100%;
  -moz-osx-font-smoothing: auto;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
@media only screen and(min-width:768px){
  body{
      font-size: 1.1rem;
  }
}
@media only screen and (min-width: 1200px){
  body{
      max-width: 1366px;
  }
}
aside,
header,
main{
  background: white;
}
nav{
  background: #14485C;
  border: 1px solid #14485C;
  border-bottom: none;
}
@media only screen and(min-width:768px){
  aside,
  footer,
  header,
  main,
  nav{
      margin: 0 auto;
      max-width: 900px;
  }
}
main{
  padding: 1rem 1rem 2rem;
}
article{
  padding: 0;
}
@media only screen and(min-width:768px){
  article{
      padding: 0 0 1rem;
  }
}
section > section:first-of-type,
section+section{
  margin-top: 2.5rem;
}
section > h3 + section:first-of-type{
  margin-top: 1.5rem;
}
h3{
  font-size: 1.3rem;
  font-family: 'Lora',serif;
  font-weight: 600;
  text-align: center;
}
article > section > h3{
  margin: 0 auto;
  padding-top: 1rem;
}
section section h3{
  margin-top: 0;
}
h4{
  font-size: 1.125rem;
  font-family: 'Lora', serif;
  text-align: left;
  margin: 0.75rem 0 0.5rem;
  align-self: flex-start;
}
section h4:first-child+section{
  margin-top: 0;
}
section > h4 + section:first-of-type{
  margin-top: 1rem;
}
ol,
ul{
  text-align: left;
  margin: 0;
  padding: 0 0 0 1.4rem;
  display: inline-block;
}
@media only screen and(min-width:768px){
  ol,
  ul{
      margin: 0 0 0 1.5rem;
  }
}
a,
a:visited{
  color: #14485C;
}
img{
  max-width: 100%;
  height: auto;
  display: block;
}
.break{
  height: 0;
  flex-basis: 100%;
}
.center{
  text-align: center;
}
header{
  text-align: center;
  padding: 1rem;
  display: -webkit-flex;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1rem;
}
@media only screen and(min-width:768px){
  header{
      padding: 1rem 2rem;
      flex-wrap: nowrap;
  }
}
header img{
  border: 3px solid #212119;
  -webkit-border-radius: 50%;
  -moz-border-radius: 50%;
  border-radius: 50%;
  margin: 0;
  width: 125px;
  height: 125px;
  flex-basis: 125px;
}
@media only screen and(min-width:480px){
  header img{
      width: 140px;
      height: 140px;
      flex-basis: 140px;
  }
}
@media only screen and(min-width:624px){
  header img{
      width: 150px;
      height: 150px;
      flex-basis: 150px;
  }
}
@media only screen and(min-width:768px){
  header img{
      width: 160px;
      height: 160px;
      flex-basis: 160px;
  }
}
header span{
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex-basis: calc(100%-125px-3rem);
}
@media only screen and(min-width:480px){
  header span{
      width: calc(100%-140px-2rem);
      align-items: center;
      gap: 0.5rem;
  }
}
@media only screen and(min-width:624px){
  header span{
      width: calc(100%-150px-2rem);
  }
}
@media only screen and(min-width:768px){
  header span{
      padding-left: 1rem;
      width: calc(100%-160px-2rem);
  }
}
@media only screen and(min-width:992px){
  header span{
      padding-left: inherit;
      gap: 0;
  }
}
header h1{
  font-size: 2.3rem;
  font-family: 'MonteCarlo',serif;
  text-align: left;
  line-height: 1.2em;
  margin: 0;
}
@media only screen and(min-width:480px){
  header h1{
      font-size: 2.8rem;
      width: 100%;
  }
}
@media only screen and(min-width:624px){
  header h1{
      font-size: 3.6rem;
      width: 100%;
  }
}
@media only screen and(min-width:768px){
  header h1{
      font-size: 3.9rem;
  }
}
@media only screen and(min-width:992px){
  header h1{
      font-size: 4.3rem;
  }
}
header h1 a,
header h1 a:visited{
  text-decoration: none;
  color: #14485C;
}
header h2{
  font-size: 1.05rem;
  line-height: 1.5em;
  margin: 0;
}
@media only screen and(min-width:480px){
  header h2{
      text-align: left;
  }
}
@media only screen and(min-width:624px){
  header h2{
      font-size: 1.2rem;
  }
}
@media only screen and(min-width:992px){
  header h2{
      font-size: 1.3rem;
  }
}
.subtitle{
  display: none;
  visibility: hidden;
}
@media only screen and(min-width:480px){
  .subtitle{
      margin: 0;
      width: 100%;
      display: block;
      visibility: visible;
  }
  .alt-subtitle{
      display: none;
      visibility: hidden;
  }
}
@media only screen and(min-width:992px){
  .subtitle{
      margin: 1rem 0 0;
  }
}
nav{
  padding: 0 1rem;
}
@media only screen and(min-width:480px){
  nav{
      clear: both;
      margin: 0 auto;
      display: -webkit-flex;
      display: flex;
      justify-content: center;
      flex-basis: 100%;
  }
}
nav ul{
  font-size: 0.95rem;
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
nav li{
  background: white;
  border: 1px solid #14485C;
  margin-top: -1px;
  margin-left: -1px;
  padding: 2px 16px;
}
nav li a,
nav li a:visited{
  font-weight: 600;
  text-decoration: none;
  color: #212119;
  width: 100%;
  height: 100%;
  display: block;
}
#byline p{
  text-align: center;
  margin: 0;
  padding: 1rem 0 0.75rem;
}
#index-columns section > section:first-of-type,
#stats-columns section > section:first-of-type{
  margin-top: 0;
}
#index-columns,
#stats-columns{
  margin-top: 0;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
}
@media only screen and(min-width:768px){
  #stats-columns{
      flex-direction: row;
      gap: 2rem;
  }
  #stats-columns > section{
      margin-top: 1.5rem;
      width: calc(50%-3rem);
  }
}
@media only screen and(min-width:992px){
  #index-columns{
      flex-direction: row;
      gap: 2rem;
  }
}
@media only screen and (min-width: 768px){
  #index-columns .linked-columns{
      display: -webkit-flex;
      display: flex;
      flex-wrap: wrap;
      justify-content: space-around;
      align-items: flex-start;
      gap: 2rem;
  }
  #linked-2{
      margin-bottom: 2rem;
  }
  #linked-1 > section,
  #linked-2 > section{
      width: calc(50% - 3rem);
  }
}
@media only screen and (min-width: 992px){
  #index-columns .linked-columns{
      display: inherit;
      flex-wrap: inherit;
      justify-content: inherit;
      gap: inherit;
  }
  #linked-1{
      margin-top: inherit;
  }
  #linked-2{
      margin-bottom: inherit;
  }
  #linked-1 > section,
  #linked-2 > section{
      width: inherit;
  }
}
#index-columns > section:first-child,
#stats-columns > section:first-child{
  margin-top: 1.5rem;
}
@media only screen and (min-width: 992px){
	#index-columns > section:last-child{
		margin-top: 1rem;
	}	
}
/* elements in two-column layout */
#index-columns section{
	margin-top: 0;
}
#index-columns .linked-columns h4{
	margin-top: 0;
}
#index-columns #authors,
#index-columns #titles,
#index-columns #related,
#index-columns #twitter-feed,
#index-columns #updates{
	margin-top: 2.5rem;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}
#scholarship{
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
@media only screen and (min-width: 992px){
	#index-columns #twitter{
		margin-top: 0;
	}
}
#twitter-feed{
	margin-bottom: 0;	
}
#updates + p{
	margin-top: 0;
}
.credits{
  text-align: left;
}
.credits h4{
  text-align: left;
}
.credits ul{
  text-align: left;
  list-style: none;
  margin: 0;
  padding: 0;
}
section[aria-labelledby="documentation"],
section[aria-labelledby="documentation"] p,
section[aria-labelledby="documentation"] h5{
  text-align: left;
}
section[aria-labelledby="documentation"]table,
section[aria-labelledby="fiction-titles"]table,
section[aria-labelledby="illustrated"]table{
  text-align: left;
  width: 100%;
  display: table;
}
section[aria-labelledby="documentation"]td,
section[aria-labelledby="fiction-titles"]td,
section[aria-labelledby="illustrated"]td{
  vertical-align: top;
  padding: 0.5rem.35rem;
}
section[aria-labelledby="menu"]{
  text-align: center;
  border: 1px solid gray;
  padding: 1rem 2rem;
  display: inline-block;
}
section[aria-labelledby="menu"] h4{
  margin-top: 0;
}
section[aria-labelledby="menu"] ol ol{
  list-style: lower-alpha;
  margin-left: 1.5rem;
  padding: 0;
  display: block;
}
section[aria-labelledby="search"],
section[aria-labelledby="sample"]{
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  align-items: center;
}
form,
form p{
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
section[aria-labelledby="results"],
section[aria-labelledby="random"]{
	align-self: flex-start;
}
section[aria-labelledby="results"] h4,
section[aria-labelledby="random"] h4{
  margin-top: 0;
}
form p{
  font-size: 0.95rem;
  margin: 0;
}
form[action="random.php"] p,
form[action="view_serials.php"] p{
  flex-direction: column;
}
@media only screen and (min-width: 480px){
	form[action="view_serials.php"] p{
		flex-direction: row;
	}
}
@media only screen and (min-width: 624px){
	form[action="random.php"] p{
		flex-direction: row;
		flex-wrap: wrap;
	}
}
@media only screen and(min-width:768px){
  form p{
      flex-direction: row;
      flex-wrap: wrap;
  }
}
p input{
	font-size: 1em;
	font-family: 'Source Sans Pro',sans-serif;
}
p input,
p button{
  margin: 0.75rem;
}
::placeholder{
  font-size: 1.1em;
  font-family: 'Source Sans Pro',sans-serif;
  color: #212119;
  opacity: 1;
}
:-ms-input-placeholder{
  font-size: 1.1em;
  font-family: 'Source Sans Pro',sans-serif;
  color: #212119;
}
::-ms-input-placeholder{
  font-size: 1.1em;
  font-family: 'Source Sans Pro',sans-serif;
  color: #212119;
}
input{
  padding: 0.35rem;
  max-width: 288px;
}
button[type="submit"]{
  font-weight: 600;
  line-height: normal;
  background: white;
  border: 1px solid gray;
  padding: .35rem;
  display: block;
  visibility: visible;
}
.show-page{
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.show-page h3{
  margin-bottom: 1rem;
}
.show-page p{
  margin: 0.5rem 0;
}
.show-page li,
.show-page ol,
.show-page ul{
  margin-bottom: 0;
}
.show-columns,
.view-columns{
  text-align: center;
  column-width: calc(100vw-3rem);
  display: block;
}
@media only screen and(min-width:480px){
  .show-columns,
  .view-columns{
      column-width: calc(50vw-3rem);
  }
}
@media only screen and(min-width:624px){
  .view-columns{
      column-width: calc(33.33vw-5rem);
  }
}
@media only screen and(min-width:768px){
  .show-columns{
      column-width: calc(33.33vw-5rem);
  }
}
@media only screen and(min-width:992px){
  .show-columns,
  .view-columns{
      column-width: 260px;
  }
}
.show-columns span,
.view-columns span{
  text-align: left;
  line-height: 1.6em;
  margin: 0 auto;
  padding: 0.5rem 0;
  page-break-inside: avoid;
  break-inside: avoid-column;
  display: block;
}
@media only screen and(min-width:480px){
  .show-columns span,
  .view-columns span{
      padding: 0.5rem 1rem;
  }
}
section[aria-labelledby="snapshots"] ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: -webkit-flex;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#stats-columns ol,
#stats-columns ul{
  margin: 0;
}
#stats-columns h4{
  margin: 0 0 1rem;
}
.abc{
  line-height: 0;
  margin-top: 2rem;
  padding-bottom: 1rem;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
.abc a,
.abc span{
  line-height: 1rem;
  margin: 0.25rem;
  padding: 0.25rem;
}
section[aria-labelledby="author-tags"] h4,
section[aria-labelledby="title-tags"] h4{
  margin-top: 2.5rem;
}