@font-face {
    font-family: 'novelabold';
    src: url('webfonts/novela-bold-webfont.eot');
    src: url('webfonts/novela-bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfonts/novela-bold-webfont.woff2') format('woff2'),
         url('webfonts/novela-bold-webfont.woff') format('woff'),
         url('webfonts/novela-bold-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'novelabold_italic';
    src: url('webfonts/novela-bolditalic-webfont.eot');
    src: url('webfonts/novela-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfonts/novela-bolditalic-webfont.woff2') format('woff2'),
         url('webfonts/novela-bolditalic-webfont.woff') format('woff'),
         url('webfonts/novela-bolditalic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'novelaregular';
    src: url('webfonts/novela-regular-webfont.eot');
    src: url('webfonts/novela-regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfonts/novela-regular-webfont.woff2') format('woff2'),
         url('webfonts/novela-regular-webfont.woff') format('woff'),
         url('webfonts/novela-regular-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'novelaregular_italic';
    src: url('webfonts/novela-regularitalic-webfont.eot');
    src: url('webfonts/novela-regularitalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('webfonts/novela-regularitalic-webfont.woff2') format('woff2'),
         url('webfonts/novela-regularitalic-webfont.woff') format('woff'),
         url('webfonts/novela-regularitalic-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;

}

* { margin: 0; padding: 0}
body { font: 100% "novelaregular", "Times New Roman", serif; background: #eee; color: #333; margin: 0 auto; }

#wrapper { margin: 20px; padding: 20px; }
#inhalt { width: 80%; min-width: 600px; margin: 20px auto 0 auto;}

h2 { font: 48px "novelaregular", "Times New Roman", serif; color: #333; margin: 0 0 0.5em 0; padding: 0 0 0.25em; letter-spacing: 0.1em; display: inline-block; border-bottom: 3px solid #999; }
h3 { color: #333; font-weight: normal; font-size: 22px; margin: 0 0 1em 0; }

ul { list-style-type: none; margin: 0 0 40px 0; }
ul li { font-size: 14px; line-height: 1.5em; padding: 0.1em 1em; margin: 0.25em 0.2em; background: #fff; border-radius: 10px; display: inline-block; min-width: 40% }
ul li:hover { background: #fbfbfb;}
li span.ss-icon { padding: 0 7px 0 0; color: #ccc; }

li div.bookrating { float: left; padding: 0 1em 0 0.5em; margin: 0.7em 0; line-height: 3em;}
li div.bookinfo {  margin: 0.7em 0; display: inline-block; }

li span.title { font: 100% "novelabold", "Times New Roman", serif; }
li span.author { font: 100% "novelaregular_italic", "Times New Roman", serif; color: #999; }

li a:link, li a:visited, li a:active { color: #444; text-decoration: none;  }
li a:hover { color: #000; }

span.ss-icon { font-size: 16px; }
span.fav, li:hover span.fav  { color: #f47c77; }
span.like, li:hover span.like { color: #7b9f23; }
span.okay, li:hover span.okay, span.repeat, li:hover span.repeat { color: #999; }
span.dislike, li:hover span.dislike { color: #9f2323; }

p { font-size: 16px; line-height: 1.5em; margin: 0 0 1em;  }

p.stats { color: #999; }

p.legende { opacity: 0.4; }
p.legende:hover { opacity: 1; }

p.legende { font-size: 13px; line-height: 16px; color: #999; }
p.legende span { padding: 0 5px 0 10px; }
p.legende span:first-child { padding: 0 5px 0 0; }

p.footer { font-size: 13px; color: #999; }
p.footer a { color: #999; }

@media (max-width: 1024px) {	
  #inhalt { width: 99%; min-width: 95%; }
  ul { margin: 0 0 20px 0;}
  ul li { display: block; margin: 0.25em 0 }
  
  li div.bookinfo { display: block; }
}

@media (prefers-color-scheme: dark) {
 
 	body { background: #222; color: #999; }
 	h2, h3 { color: #eee; }
 	
 	ul li { background: #333; }
 	ul li:hover { background: #3b3b3b; }
 	
 	li a:link, li a:visited, li a:active, a:link { color: #ccc; }
 	li a:hover, a:hover { color: #eee; }
 	 	  
 }