@import url(//fonts.googleapis.com/css?family=Denk+One);
@import url(//fonts.googleapis.com/css?family=Lobster);
body
{
 color: white;
 background-color: black;
 margin: 0;
 padding: 0;
 text-align: justify;
}
::selection
{
 background-color: red;
 color: black;
}
::-moz-selection
{
 background-color: red;
 color: black;
}
#box
{
 border-radius: 0.2vmax;
 margin: 1em;
 padding: 0.5em;
 border: 0.2vmax solid red;
 background-image: linear-gradient(to bottom, black, #400000);
 font-size: 2.3vmin;
}
h1
{
 color: black;
 text-align: center;
 font-family: 'Denk One', Chiller, sans-serif;
 font-size: 8vmin;
 margin-top: 0.3em;
 margin-bottom: 0.3em;
 text-shadow: 0px 0px 3vmin #606060;
 animation: H1glow 4.4s infinite;
}
h1::selection
{
 background-color: transparent;
 color: #A00000;
}
h1::-moz-selection
{
 background-color: transparent;
 color: #A00000;
}
@keyframes H1glow
{
 0%
 {
  text-shadow: 0px 0px 3vmin #606060;
 }
 50%
 {
  text-shadow: 0px 0px 3vmin #A0A0A0;
 }
 100%
 {
  text-shadow: 0px 0px 3vmin #606060;
 }
}
.booklist
{
 display: inline-block;
 margin-right: 3em;
 vertical-align: top;
}
.booklist li
{
 white-space: nowrap;
}
.booklist li a
{
 font-size: 2vmin;
}
.booklist li a:visited
{
 color: orange;
}
.title
{
 color: red;
 font-size: 4vmin;
 margin-top: 0.3em;
 margin-bottom: 0.3em;
}
.subtitle
{
 color: yellow;
 font-size: 2.5vmin;
 margin-left: 0.5em;
}
#box > p
{
 text-indent: 1em;
}
.title + p, .subtitle + p, #box > p:first-of-type
{
 text-indent: 0 !important;
}
.title + p:first-letter, .subtitle + p:first-letter, #box > p:first-of-type:first-letter
{
 float: left;
 font-size: 5vmin;
 line-height: 5.2vmin;
 padding-top: 0.2vmin;
 padding-right: 0.3em;
 padding-left: 0.5em;
 font-family: 'Lobster', serif;
 text-shadow: 5px 5px 3px #700000;
}
.quote
{
 font-style: italic;
 margin-left: 2em;
}
.prose
{
 font-style: italic;
 margin-left: 1em;
 padding-left: 1em;
 border-left: 2px dotted white;
}
.small
{
 font-variant: small-caps;
}
.italic
{
 font-style: italic;
}
.quote .italic, .prose .italic
{
 font-style: normal;
}
.return
{
 margin-top: 2em;
 text-align: center;
}
a, a:active, a:visited
{
 color: yellow;
 text-decoration: none;
}
a:hover
{
 text-decoration: underline;
}
a::selection
{
 background-color: yellow;
 color: black;
}
a::-moz-selection
{
 background-color: yellow;
 color: black;
}
.ast
{
 font-size: 1.75vmin;
 vertical-align: top;
 color: red;
 padding-left: 0.5em;
}
hr
{
 border: 1px solid red;
 margin-left: 20%;
 margin-right: 20%;
 box-shadow: 0px 1px 5px red;
 animation: HRglow 1.2s infinite;
}
@keyframes HRglow
{
 0%
 {
  box-shadow: 0px 1px 5px #FF0000;
 }
 50%
 {
  box-shadow: 0px 1px 5px #300000;
 }
 100%
 {
  box-shadow: 0px 1px 5px #FF0000;
 }
}

#pnlTTS
{
 position: fixed;
 transition: all 0.1s ease-out;
 transition-delay: 3s;
 right: -26vmin;
 bottom: 0;
 border: 1px solid white;
 background: black;
 color: white;
 padding: 1vmin;
 box-shadow: 0 0 3px white;
 width: 25vmin;
 min-width: 25vmin;
 text-align: center;
 border-radius: 1vmin 1vmin 0 1vmin;
 opacity: 1;
}
#pnlTTS:hover
{
 right: 0;
 transition-delay: 0s;
 opacity: 1;
}
@media (pointer: none)
{
 #pnlTTS
 {
  right: -28vmin;
 }
 #pnlTTS:focus-within
 {
  right: 0;
  transition-delay: 0s;
  opacity: 1;
 }
 #pnlTTS button:focus
 {
  outline: 1px dotted white;
  border-radius: 3px;
 }
}
@media (pointer: coarse)
{
 #pnlTTS
 {
  right: -18vmin;
  transition-delay: 0s;
  opacity: 0.2;
 }
}
@media (pointer: fine)
{
 #pnlTTS
 {
  right: -26vmin;
 }
}
#pnlTTS select
{
 border: 1px solid white;
 background: black;
 color: white;
 width: 100%;
 margin: 0.25em;
}
#pnlTTS #lblProgress
{
 background: black;
 color: white;
 width: 100%;
 margin: 0.25em;
}
#pnlTTS button
{
 font-size: 3vmin;
 padding: 0;
 line-height: 0;
 border: 0;
 background: black;
 color: white;
 width: 3.5vmin;
 height: 3.5vmin;
}
#pnlTTS #cmdBack
{
 margin-right: 0.5em;
}
#pnlTTS #cmdRead,
#pnlTTS #cmdStop
{
 margin: 0 0.5em;
}
#pnlTTS #cmdNext
{
 margin-left: 0.5em;
}