@font-face {
  font-family: 'Roboto Slab';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto Slab Regular'), local('RobotoSlab-Regular') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2212, U+2215;
}

html {
	background-color:#222;
}
body {
	background-color: #eee;
	color: #111;
    border:1px solid #666;
	text-align: justify;
    min-width: 20em;
	max-width: 33em;
	padding:0 8em; 
	margin: 60px auto; 
	line-height:1.4;
	font-family: "Roboto Slab", serif; 
	hyphens:auto;
}

a {
	color: #6C71C4;
	text-decoration: none;
}

a:hover {
	text-decoration:none;
    text-shadow:1px 1px 3px rgba(0,0,0,0.3);
}

h1 {
    border-bottom:1px solid #aaa;
	text-align:center;
	text-transform:uppercase;
	margin-top:3em;
}

h2 { border-bottom:1px dotted #aaa; }
h3 { border:0px;}

h2, h3, h4 {text-align: left;}

.header * {text-align:center; border:0;}
.header {border-bottom:1px solid #222;}

p { margin:1ex auto;  }
p+p {text-indent:2em;} 

blockquote { 
	font-family: cursive; 
	font-size:1.25em;
	color:#222;
	/*
	border-left: 3px solid #ccc;
	border-radius: 75%;
	*/
	margin: auto;
	padding: 2.5em 1em 2.5em 1em;
    quotes: "«\00A0" "\00A0»";
}
blockquote:before, blockquote:after{
	color:#ccc;
	font-size:2.5em;
	line-height:0.1em;
}

blockquote::before {
	content:open-quote;
	vertical-align:+.2em;
}
blockquote::after {
    content: close-quote;
	vertical-align:-.2em;
}

blockquote img {
	margin:0;
	padding:0 1ex 0 0;
    vertical-align:middle;
}

img {display:block; max-width: 100%; padding:1em; margin: auto}
img{
	transition: 1s ease;
}

table {
    border-color:#606060;
    border-style:solid;
    border-width:1px;
}

td, th, tr {
	padding:5px;
    vertical-align:middle;
    border-color:transparent;
    border-style:solid;
    border-width:1px;
}

tr {
	background-color:#ddd;
}

pre, code { 
    font-family: Hack, monospace; 
	color:#CB4B16;
}

code {
	padding:5px;
	font-size:0.9em;
}

pre {
    border-left:3px solid #2AA198;
    padding:1ex;
    padding-left:2ex;
	line-height:1em;
	font-size:0.9em;
    overflow-x:auto;
}

.toc {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size:1em;
	font-family: "Roboto Slab", serif; 
	text-align:left;
    height: 0;
	min-width:43em;
	width:70%;
	background-color:#222;
    color: #eee;
    overflow-y:scroll;
    z-index:+1;
    transition: height 0.5s ease-out;
	border:1px solid #93A1A1;
    box-shadow:2px 2px 6px rgba(0,0,0,0.65);
    transition: all 0.5s ease-out;
}

.toc ul, .toc ol {
    margin: auto;
    padding: 0 ;
    list-style: none;
}

.toc ul ul {font-size:0.94em;}

.toc li {
    padding: 5px 25px;
}

.toc a {
    color: #eee;
    text-decoration: none;
    display:block;
}

.toc a:hover { 
    text-shadow:2px 2px 6px #000;
	color:#6C71C4;
}

#isread {
	position:fixed;
	top:0;
    left: 50%;
    transform: translateX(-50%);
	color:#ddd;
	background-color:rgba(34,34,34,0.85); 
    box-shadow:2px 2px 6px rgba(0,0,0,0.65);
	border:1px solid #93A1A1;
	width:100%;
	max-height:100px;
	text-align:center;
	text-transform:uppercase;
	font-weight:bold;
	font-size:0.89em;
    padding:10px;
    z-index:+2;
}

#isread a {
    color:#ddd;
}

#isread:hover + .toc , .toc:hover{
    height:85%;
    padding-top: 4em;
    transition: all 0.5s ease-out;
}

.tocarrow {
	margin-right:12px;
	float:right;
	transform:rotate(+90deg);
}


#liberapay {
	position:fixed; 
	color:#ddd;
	left:5px;
    transition:all 0.3s ease;
    font-size:11px;
    font-family:sans-serif;
    text-align:center;
}
#liberapay a {
	color:#ddd;
}
#liberapay a:hover {
    color:DeepPink;
}
#liberapay img{
	margin:auto
}

#scroll-bar {
    height: 3px;
    position: fixed;
    top: 0;
    left: 0;
    z-index: +3;
    backface-visibility: hidden
}

#scroll-bar-inner {
    background-color: #6C71C4;
    height: 100%
}

.hiddenimg {
	font-family:serif;
	font-weight:bolder;
	text-align:center;
	border:1px dotted silver;
	cursor:pointer;
}
.slideUp {
    animation-name: slideUp;
    -webkit-animation-name: slideUp;
    animation-duration: 1s;
    -webkit-animation-duration: 1s;
    animation-fill-mode: forwards;
    -webkit-animation-fill-mode: forwards;
}

@keyframes slideUp {
    0% {
	opacity:0;
	bottom:-150px;
    } 
    100% {
	opacity:1;
	bottom:20px;
    }
}


@media screen and (max-width: 940px) {
	#liberapay, #liberapay a {
    	position:fixed;
    	z-index:5;
    	top:15px;
    	left:10px;
    }
}

@media (max-width: 400px) {                  
  #liberapay, .slideUp { 
    display:none;
  }
}

@media print {
    #isread, 
    #liberapay,
    .slideUp,
    .print { visibility : hidden; }

    .toc { 
        position: relative; 
        width:100%;
        border:none;
        box-shadow: none;
        margin-bottom:100px;
        padding-top: 25px;
    }
    .toc li {
        padding: 5px 25px;
    }
    body { 
        border: none ; 
        width:80%;
        max-width:none;
        padding:2em;
        margin: 10px auto; 
    }
    body * {color: #000;}
}