@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url("/fonts/Atkinson-Hyperlegible-Regular-102.ttf") format('truetype');
  font-weight: normal;
  font-style: normal;
  }
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url("/fonts/Atkinson-Hyperlegible-Bold-102.ttf") format('truetype');
  font-weight: bold;
  font-style: normal;
  }  
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url("/fonts/Atkinson-Hyperlegible-Italic-102.ttf") format('truetype');
  font-weight: normal;
  font-style: italic;
  }  
@font-face {
  font-family: 'Atkinson Hyperlegible';
  src: url("/fonts/Atkinson-Hyperlegible-BoldItalic-102.ttf") format('truetype');
  font-weight: bold;
  font-style: italic;
  }

@font-face {
  font-family: 'Open Sans';
  src: local("Open Sans");
  }
  
body {
  /* For some reason the gradient bugs out on Firefox sometimes if the gradient
   * transition between the first and second colors is at exactly 50%???
   */
  background: linear-gradient(#47146e -1%, #26c3be 49%, #79f5a8) fixed;
  color: white;
  font-family: 'Atkinson Hyperlegible', 'PT Sans', sans-serif;
  font-size: 1.025rem;
  letter-spacing: 0.01em;
  margin:0;
  padding:0;
  word-wrap: break-word;
  }
  
a {
  color: #51f0fa;
  }
  
a:hover {
  color: #80fcf7;
  }
  
p, li {
  line-height: 150%;
  }
  
h1 {
  text-align: center;
  }
  
hr {
  border:0;
  background: #fff;
  height:1px;
  }
  
h1, h2, h3, h4, h5 {
  font-family: "Atkinson Hyperlegible", "PT Sans", sans-serif;
  }
  
h3 {
  font-size: 1.2em;
  }

h5 {
  font-size: 0.93em;
  }

code, tt {
  font-size: 0.925em;
  }
  
/*The main set of divs composing the page.*/
  
.wrapper {
  width: 900px;
  margin: 0 auto;
  top: 0;
  padding:0;
  }

.header {
  background: linear-gradient(rgba(3,3,4,0), rgba(23,23,37,0.8)), #121212 url("/img/outta_header_900.jpg") no-repeat;
  background-size: cover;/*
  background-position: center;*/
  padding-top: 225px;
  margin:0;
  }
  
header-title {
  margin:0;
  text-align: right;
  display: block;
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  }

header-title:after {
  content: "firedjinn's junkyard";
  line-height: 150%;
  padding: 0.25em 0.5em;
  text-align: right;
  }

.nav {
  background: #080a0e;
  text-align: left;
  padding-left: 0.75em;
  }

.nav a {
  display: inline-block;
  line-height: 2em;
  padding: 0.1em 0.5em;
  font-size: 1.1em;
  }

.main {
  background: #2e3030; /*2a504f*/
  padding: 0.25em 1.5em 0.75em 1.5em;
  border-bottom: 8px #080a0e solid;
  }

.footer {
  text-align: center;
  font-size: 0.9em;
  padding: 0.5em;
  color: #000;
  }
  
.footer a {
  color: #18146e;
  }
  
.footer-element {
  display: inline-block;
  }
  
.footer-element:after {
  content: " ⬝ ";
  }

.footer-element:last-child:after {
  content: "";
  }
  
  
/*Boxes and other in-page elements.*/

.two-column {
  columns: 2;
  }
  
.column-section {
  display: inline-block;
  width: 100%;
  margin: 0.5em 0em;
  }
  
.box {
  padding: 0.25em 1em 0.5em 1em;
  }
  
.fandom-nav {
  columns: 3;
  margin: 0.5em auto;
  column-gap: 0.25em;
  }
  
.fandom-nav .button a:hover, .chapter-nav a:hover {
  background: rgba(15,20,30,0.85); /*35, 35, 50, 0.75*/
  }
  
.button {
  display: inline-block;
  width: 100%;
  }

.button a {
  text-align: center;
  display: block;
  line-height: 200%;
  padding: 0.1em 0.5em;
  margin: 0.25em;
  text-decoration: none;
  color: #80fcf7;
  }

.box, .button a, .chapter-nav a {
  background: rgba(15,20,30,0.7); /*35, 35, 50, 0.55*/
  }
  
/*Fanfiction archive listings.*/
  
.listing {
  font-size: 0.975em;
  margin: 1em 0;
  }
  
.tags {
  display: inline;
  line-height: 167%;
  margin: 0;
  padding: 0;
  }
  
.tags li {
  list-style-type: none;
  display: inline;
  }
  
.tags li:after {
  content: ",";
  }
  
.tags li:last-child:after {
  content: "";
  }
  
.tag {
  border-bottom: 1px dotted;
  padding: 0.1em;
  }
  
.summary {
  padding: 0.25em 0;
  }
  
.small-details {
  text-align: center;
  padding-bottom: 0.5em;
  }
  
.taller {
  padding: 0.75em 0 0.5em 0;
  }
  
.detail {
  font-size: 0.92em;
  display: inline-block;
  }
  
.detail:after {
  content: " ⬝ ";
  }
  
.detail:last-child:after {
  content: "";
  }
  
  
/*Fic pages.*/

.workskin-toggle {
  float: right;
  }

.summary-block, .notes-block {
  font-size:0.98em;
  padding:0;
  }
  
.end-notes {
  padding-bottom: 0.5em;
  }
  
.fic {
  margin: 0 0.1em;
  }
  
.fic p, .fic li {
  line-height: 175%;
  }
  
.fic hr {
  margin: 1.75em 2.5em;
  }

.fic li {
  padding: 0.5em 0.25em;
  }
  
.toc li {
  margin: 0.5em;
  }
  
.chapter-title {
  text-align: center;
  }
  
.fic blockquote {
  background: rgba(15,20,30,0.6); /*35, 35, 50, 0.45*/
  border-left: 3px solid #111;
  padding: 0.25em 1em;
  margin: 1em;
  }

/* Pesterlog formatting fallback when work skins are removed. */
.generic-pesterlog-wrapper {
  background: rgba(15,20,30,0.6); /*35, 35, 50, 0.45*/
  border-left: 3px solid #111;
  padding: 0.25em 1em;
  }
  
.listing blockquote, .summary-block blockquote {
  border-left: 1px solid;
  padding-left: 1em;
  margin-left: 1.75em;
  }

  
/*Chapter navigation for multi-chapter works.*/
  
.toc-link {
  font-size: 0.9em;
  text-align: center;
  }
  
.chapter-nav {
  display: block;
  text-align: right;
  }
  
.chapter-nav a {
  display: inline-block;
  }
  
.chapter-nav a:first-child {
  float: left;
  }
  
/*So the float:left doesn't break formatting on chapters with only one nav button.*/
.first-chapter a:first-child, .last-chapter a:first-child {
  float: none;
  }
  
.last-chapter {
  text-align: left;
  }


.skip {
  font-size: 0;
  height: 0;
  position: fixed;
  }
  
.skip:focus {
  height: auto;
  font-size: 2rem;
  padding: 0.2em 0.3em;
  font-weight: bold;
  background: #080a0e; /*same as sidebar*/
  
  }

/*For mobile and narrow screens.*/

@media(max-width:975px) {
  .wrapper {
    width: calc(100% - 5em);
    font-size: 0.95em;
    }
  }
  
@media(orientation: portrait) {
  .wrapper {
    width: 95%;
    font-size: 0.915em;
    }
  .header {
    padding-top: 175px;
    padding-top: 22vh;
    }
  .fandom-nav {
    columns: 1;
    }
  .fic p {
    line-height: 150%;
    }
  }