:root {
    --sidebar-color:#797960;
}

h1 { text-align:center; font-size:2rem; font-family:IrvinHeadingPro,serif; }

section { display:flex; flex-direction:column; }

div.sidebar { color:var(--sidebar-color); border-top:solid gray 1px; display:flex; flex-direction:column; }
div.sidebar p { font-size:1em; margin:8px 0; }
div.sidebar h3 { margin-bottom:0; }
div.data p:first-child { text-align:center; }
div.content { margin:2vh 2vw; }
div.info { display: none; }
img.img-beacon { display:none; }
div.table-div { width:100%; overflow-x:scroll; }
table { border-collapse:collapse;}
table.widetable { width:150%; }
th { padding: 0 4vw; }
tr:nth-child(even) { background-color:lightgray; }
p#rating { text-align:center; }
p#rating span { color:transparent; text-shadow:0 0 0 gray;}

#toc { display:flex; margin-bottom: 5vh; }
#toc div { width:50%; cursor:pointer; text-align:center; }

#subnav { margin-top:3vh; width:100%; display:flex; justify-content:space-around;}

div.sidebar img { width:50%; }
p, ul, ol, table { font-family:Georgia, 'Times New Roman', Times, serif; font-size:1.3rem; line-height:1.5em; }
p.small { font-size:small; }
p.quote { font-style:italic;  margin:0 3vw; position: relative; color: var(--sidebar-color); }
p.quote::before { content:open-quote; position:absolute; left:-3.5rem; top:2rem; font-size:8rem; color:lightgray; }

div.image { display:flex; justify-content:center; }
div.image img { width:50%; }
div.image img.small { height:50vh; width:auto; }

a { text-decoration:none; }
a:hover { text-decoration:underline; }

img {box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; }


#see-also { font-family:Calibri,Verdana,sans-serif; margin-bottom:3vh; }
ul.books { display:flex; overflow-x:scroll; overflow-y:hidden; justify-content:space-evenly;
    list-style-type:none; font-family:inherit; padding-inline-start:0; }
#see-also h2 { text-align:center;}
#see-also li { margin:1vh 2vw; text-align:center; }
#see-also li div.cover { width:90px; height:140px; overflow:hidden; }
#see-also li img { width:90px; height:145px; }
#see-also li p { margin-top:5px; font-family:inherit; font-size:smaller; line-height:90%; width:120px; }

@media only screen and (min-width: 768px) {
    section { flex-direction:row; }
    div.sidebar { width:25vw; position:fixed; right:5vw; border-top:none; }
    div.content { width:60vw; margin-left:5vw; text-align:justify; }
    #toc { margin-bottom:0; }
    #see-also { margin-left:5vw; width:60vw; }
    div.info { display:flex; justify-content:space-evenly; font-size:0.5rem;}
    div.info p { font-size:.8rem; color:gray; }
    table.widetable { width:100%; }
    div.image img { max-height:50vh;width:auto; }
}