@import url('https://fonts.googleapis.com/css2?family=Amarante&display=swap');

H1 {
    font-family: Amarante, Georgia, Times, serif;
    font-size: 36pt;
    color: darkred;
}
H2 {
    font-family: Amarante, Georgia, Times, serif;
    font-size: 18pt;
    color: darkred;
}
H3 {
    font-family: Amarante, Georgia, Times, serif;
    font-size: 18pt;
    font-weight: normal;
    color: darkred;
}
H4 {
    font-family: Georgia, Times, serif;
    font-size: 12pt;
}
H5 {
    font-family: Georgia, Times, serif;
    font-size: 10pt;
}
H6 {
    font-family: Georgia, Times, serif;
    font-size: 8pt;
}

#container { }
#footer { background-color: #eeeeee; padding: 10px; clear: both; max-width: 500px; }
.col { float: left; width: 100%; padding: 10px; }
img.sidebar { opacity: 0.35; }

.book-title { font-size: 16px; font-weight: bold; }

BODY { font-family: Georgia, Times, serif; font-size: 13pt; background: url("img/xoth_sign.png") no-repeat bottom right fixed; }
TD { font-family: Georgia, Times, serif; font-size: 13pt; }
INPUT { font-family: Georgia, Times, serif; font-size: 13pt; }
PRE { font-size: 11pt; }
TEXTAREA { font-family: Georgia, Times, serif; font-size: 13pt; }

UL { list-style: square; }

P.pagefooter { font-size: 9pt; color: black; font-weight: bold; font-style: italic; }

P.navbar {
    font-family: Georgia, Times, serif;
    font-size: 10pt;
    font-weight: bold;
    font-style: italic;
}

P.quote { font-style: italic; padding-left: 3%; padding-right: 3%;}
P.quotesmall { font-size: 9pt; font-style: italic; padding-left: 3%; padding-right: 3%;}
P.quickstats { text-indent: -3%; padding-left: 3%; }
P.details { font-size: 9pt; }

DIV.gamestats {
	background-color: #EAEAC1;
}

DIV.docinfo {
    font-family: Georgia, Times, serif;
    font-size: 9pt;
    font-style: italic;
    color: black;
    background-color: white;
	border: 1pt solid Black;
}

TR.header { background-color: black; color: white; font-weight: bold }
TR.odd { background-color: #FFF8DC; }
TR.even { background-color: #EEE8AA; }

TD.sidebar { width: 100px; }
TD.main { width: 600px; }

@media only screen and (max-width: 640px) {
  body > table { width: 100% !important; padding: 10px; }
  TD.sidebar { display: none; }
  TD.main { width: 100%; }
  img.hero { width: 100%; }
}