body { background-image:url('imgs/background-small.png'); background-attachment:fixed; font-family:Trebuchet MS,Lucida Grande,Lucida Sans Unicode,Lucida Sans,Tahoma,sans-serif; }
#main { padding:2vh 3vw;}
header { margin-top:10vh; text-align:center; }
section, p, li { font-size:1.1rem; line-height:1.8rem; }
h1 { text-align:center; font-size:2rem; }
h2 { font-size:1.3rem;}
h3 { font-size:1rem; margin-bottom:0; }
p.first { margin-top: 0; }
section h1 { text-align:left; margin-bottom:0; }
table { width:100%; border-collapse:collapse; }
td, th { padding:2vh 0; border-bottom:solid blue 1px; vertical-align:top; }
tr.header { border-bottom:double blue; }
div.center, p.center { display:flex; justify-content:space-evenly; }
div.aside, p.aside { background-color:lightblue; font-size:smaller; padding:1em; margin:1em; line-height:18px; border:gray; }

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

/* div.sidebar { display:none; } */
td.extra, th.extra { display:none; }

table.truth-table {
    width:50%;
    margin:auto;
}

table.truth-table td { text-align:center; padding:1vh 0; }

#overview {
    position:fixed;
    bottom:5vh;
    right:2vw;
    width:50%;
    padding:2vh 2vw;
    background-color:#ccc;
    border:solid gray 1px;
    opacity:0.9;
    font-size:larger;
    display:none;
    z-index:8;
}

#hamburger {
    position:fixed;
    z-index:9;
    left:85vw;
    top:90vh;
    width:10vw;
    cursor:pointer;
}

#hamburger img { width:100%; cursor:pointer; }

#toc {
    position:fixed;
    top:2px;
    background-color:white;
    width:100vw;
    left:0;
    overflow-y:scroll;
}

#toc h1 { display:none; }
#toc ol { display:flex; list-style-type:none; justify-content:flex-start; align-items:flex-start; padding-left:0; }
#toc ol>li { padding:0 2vw; }

#rubrics { display:flex; }
#rubrics td { padding:2vw 2vh; }
#rubrics th { vertical-align:middle; }


pre.code { font-size:.8rem; line-height:1rem; width:80%; margin:auto; }
tt { background-color:lightgray;}

@media (min-width:600px) {
    #overview { width:10vw; position:fixed; top:10vh; left:2vw; display:block; padding:0; background-color:transparent; font-size:1rem; z-index:0; border:none; }
    #overview ul { padding-inline-start:0; }
    #hamburger { display:none; }
    #toc { width:10vw; position:fixed; top:10vh; left:80vw; padding:0; background-color:transparent;}
    #toc h1 { display:block; }
    #toc ol { display:block; padding-left:0; }
    #toc ol>li { margin:1vw 0; }

    #main { width:60vw; margin-left:15vw; }
    
    div.sidebar { display:block; }
    td.extra, th.extra { display:table-cell; }
    div.sidebar h1 { font-size:1.2rem; }
    div.sidebar ul { list-style-type:none;}
    div.sidebar li { padding:4px 0; }
}

/* parts for the modal window of the images */
/* from https://www.w3schools.com/howto/howto_css_modal_images.asp */
img { width:20vw; cursor:pointer; }
img.small { width:10vw; }
img:hover { opacity:.7; }
video { width:20vw; }

#modal-image { cursor:default; opacity:1;}
.modal{display:none;position:fixed;z-index:1;padding-top:100px;left:0;top:0;width:100vw;height:100vh;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.9)}
.modal-content{margin:auto;display:block;width:80%;max-width:700px}
#caption{margin:auto;display:block;width:80%;max-width:700px;text-align:center;color:#ccc;padding:10px 0;height:150px}
#caption,.modal-content{animation-name:zoom;animation-duration:0.3s}