body {padding: .6em; line-height: 1.8em; background-color: #0e1317}

@font-face {
  font-family: "custom";
  font-style: normal; 
  font-weight: 400;
  src: url('fonts/custom.ttf');
  src: local(''),
       url('fonts/custom.ttf') format('truetype');
}

img {max-width: 100%; height: auto; display: block; margin: auto; border-radius: 1.4em;}
img a, img a:link, img a:active, img a:visited, img a:hover{border:0}

/* font: style variant weight size/line-height family — the first 3 and line-height are optional */

h1 {color: #0f75a5; font-size: 1.2em; margin-top: 1em}
h2,h3 {color: #0f62a5; font-size: 1em; margin-top: 3em}

#wrapper{margin: auto}
#content{font-family: system-ui, sans-serif, droid serif, droid sans, segoe ui, arial; font-size: 1.4em; text-shadow: 3px 3px 7px #CACACA; color: #080808; background-color: #fff; padding: 1em; border-radius: 1em}

#footer{font-family: sans-serif, arial; font-size: .9em; padding: .6em; text-align: center; display: block;color: #666; padding-top: 2em}
#footer a, a:hover, a:active, a:link, a:visited {color: #ff0062; text-decoration: none}

a, a:hover, a:active, a:link {color: #008DFF}
a:visited {color: #003F73}

a.top, a.top:hover, a.top:active, a.top:link, a.top:visited {font-family: sans-serif, arial; font-weight: bold; font-size: .8em; font-variant: small-caps; color: #D5001C; text-decoration: none;}

mark {color: #000; background-color: #ffea00; border-radius: .3em; padding-left: 5px; padding-right: 5px; text-shadow: none}
.marker {color: #000; background-color: #ffea00; border-radius: .3em; padding-left: 5px; padding-right: 5px; text-shadow: none}
strong, b {color: #893d0f; font-weight: normal} 
em {font-style: normal}

.oversize {font-weight: bold}
.tags {margin-top: 3em; font-family: sans-serif, arial; font-size: .5em}
.spoiler {color: gray}
.center {text-align: center}
.quote {color: #000; background: #ffeccf; border-radius: 1em; padding: 1em}
.bold {color: #080808; font-weight: bold} .brown {color: #801200}
.black {color: #080808; text-decoration: none} .gray {color: #888} .red {color: #e3001e} 
.yellow {color: #ac9a00} .blue {color: #0066ff} 
.green, .green:hover, .green:visited, .green:link {color: #080808; text-decoration: none}

ol {list-style: none}
li:before {content: "▪ "; color: #080808}
li:nth-child(1):before {color: red}
li:nth-child(2):before {color: maroon}
li:nth-child(3):before {color: yellow}
li:nth-child(4):before {color: olive}
li:nth-child(5):before {color: lime}
li:nth-child(6):before {color: green}
li:nth-child(7):before {color: aqua}
li:nth-child(8):before {color: teal}
li:nth-child(9):before {color: blue}
li:nth-child(10):before {color: navy}
li:nth-child(11):before {color: fuchsia}
li:nth-child(12):before {color: purple}
li:nth-child(13):before {color: silver}
li:nth-child(14):before {color: gray}

ol.numbers {list-style: numbers} 
ol.numbers li:before {content: ""}

/* START STORIES STYLE */
#storyBox {margin: auto}
#storyIndex {margin: auto}
#storyContent {margin-top: 1em; font: normal normal normal 1.2em/1.4em "custom", tahoma, arial; color: #50d500; border: 6px solid #0e1317; border-radius: 1.3em}
#storyContent h1 {color: #e1e1e1; font: normal normal normal 1.3em "custom", tahoma, arial}
a.story, a.story:active, a.story:link, a.story:visited {color: #50d500; text-decoration: none}
a.story:hover {color: #071d00; background-color: #45d800}
a.next, a.next:active, a.next:link, a.next:visited {color: #50d500; text-decoration: none; animation: blink-animation 1s steps(2, start) infinite}
a.next:hover {color: #071d00; background-color: #45d800}
.storyO {color: #e88800} 		.storyC {color: #328500}
.storyM {color: #071d00; background-color: #45d800; border-radius: .2em; text-decoration:none; padding-left: .2em; padding-right: .2em}
.storyT {font-size: .9em}

@keyframes blink-animation {
  50% {
    opacity: 0;
  }
}