body {background: linear-gradient(to top, #333 0%, #444 50%, #555 75%, #666 100%); margin-bottom: 1em;}

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

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

#wrapper {margin: auto; width: 60%}

#content {margin-top: .5em; padding: 1em; font: normal normal normal 1.3em/1.4em "custom", tahoma, arial; text-shadow: 3px 3px 6px #cacaca; color: #050505; background-color: #fff; border: 6px solid #0e1317; border-top-left-radius: 1.3em; border-top-right-radius: 1.3em;}

#footer{font: normal normal normal .9em arial; padding: .6em; text-align: center; display: block; background-color: #0e1317; color: #5c5c5c; border-bottom-left-radius: 1.2em; border-bottom-right-radius: 1.2em; padding-bottom: 1em}
#footer a, a:hover, a:active, a:link, a:visited {color: #ff0062; text-decoration: none}

a, a:active, a:link {color: #0074d2; border-radius: .2em}
a:hover {color: #050505} 
a:visited {color: #003f73}

a.black, a.black:active, a.black:link, a.black:link, a.black:visited, a.black:hover {color: #050505; text-decoration: none}

a.top, a.top:active, a.top:link, a.top:visited {font: normal small-caps bold .8em arial; color: #d5001c; text-decoration: none}
a.top:hover {color:#b9742b}

h1 {color: #0f75a5; font-family: tahoma, arial; font-size: 1.6em; text-transform: uppercase; padding-top: .6em}
h2,h3 {color: #0f62a5; font-family: tahoma, arial; font-size: 1.3em; text-transform: uppercase; padding-top: 1.6em}

mark {color: #00f00b; background-color: #222; border-radius: .2em; padding-left: 5px; padding-right: 5px; text-shadow: none}
.marker {color: #000; background-color: #c9c9c9; border-radius: .2em; padding-left: 5px; padding-right: 5px; text-shadow: none}
strong, b {color: #801200; font-weight: normal} 
em, i {font-style: normal}

.quote {margin: auto; width: 800px; color: #111; background-color: #ffeccf; border-radius: 1.2em; font: normal normal normal 1em tahoma, arial; padding: 1em}
.tags {font-family: tahoma, arial; font-size: .7em; color: gray}
.oversize {font-size: 1.5em; color: #050505}
.spoiler {color: white; text-shadow: none}
.center {text-align: center}
.spoiler:hover {color: #050505; text-shadow: 3px 3px 6px #cacaca}
.bold {color: #000; font-weight: bold} .brown {color: #801200}
.black {color: #050505; text-decoration: none} .gray {color: #888} .red {color: #e3001e} 
.yellow {color: #ac9a00} .blue {color: blue} 
.green, .green:hover, .green:visited, .green:link {color: #00f00b; text-decoration: none}

ol {list-style: none}
li:before {content: "▪ "; color: #050505}
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: ""}

img {max-width: 100%; height: auto; display: block; margin: auto; border-radius: 1em;}
img:hover {filter: grayscale(100%); transition: all .6s ease-in-out;}
.blurred {filter: blur(4px)} .blurred:hover {filter: none}

/* START STORIES STYLE */
#storyBox {margin: auto; width: 52%}
#storyIndex {margin: auto; width: 60%}
#storyContent {margin-top: 1em; padding: 2em; font: normal normal normal 1.3em/1.4em "custom", tahoma, arial; color: #50d500; background-color: #0e1317; border: 6px solid #0e1317; border-bottom: none; border-top-left-radius: 1.3em; border-top-right-radius: 1.3em;}
#storyContent h1 {color: #e1e1e1; font: normal normal normal 1.4em "custom", tahoma, arial}
#filler {height: 300px}
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 {color: #000; background-color: #ffc000; border-radius: .3em; padding: .2em}
a.tanya, a.tanya:active, a.tanya:link, a.tanya:hover, a.tanya:visited {color: #ff3c00}

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