/* Style for test3.html */
body {
   background-image: url("../images/stonetile.jpg");
   font-family: sans-serif;
   }
img.thumb {
   border-style: solid;
   border-color: black;
   border-width: 2px;
   }
h1 {
   text-align: center;
   }
.thumb {
   width: 160px;
   align-self: center;
   }

/* For small screens like phones */
@media screen and (max-width: 641px) {
   .content-div {
      background-image: url("/images/parchtile.jpg");
      border-style: solid;
      border-width: 3px;
      border-color: #121212 #525252 #d0d0d0 #aeaeae;
      width: 265px; margin: auto;
      text-align: center;
      }
   .narrow-list-container {
      display: grid;
      grid-template-columns: 20px 225px 20px;
      }
   .narrow-list {
      grid-row: 1;
      grid-column: 2;
      display: inline-grid;
      grid-template-columns: 10px 215px;
      text-align: left;
      }
   /* Left list, right thumb */
   .toc-left-container {
      display: none;
      }
   .toc-right-thumb-class {
      display: none;
      }
   /* Right list; left thumb */
   .toc-right-container {
      display: none;
      }
   .toc-left-thumb-class {
      display: none;
      }
   }
/* For larger tablets, laptops, and desktops */
@media not screen and (max-width: 641px) {
   .content-div {
      background-image: url("/images/parchtile.jpg");
      border-style: solid;
      border-width: 3px;
      border-color: #121212 #525252 #d0d0d0 #aeaeae;
      width: 636px; margin: auto;
      text-align: center;
      }
   /* Left list, right thumb */
   .toc-left-container {
      display: grid;
      grid-template-columns: 30px 412px 164px;
      align-items: center;
      }
   .toc-left-list-class {
      grid-row: 1;
      grid-column: 2;
      text-align: left;
      display: inline;
      }
   .toc-right-thumb-class {
      grid-row: 1;
      grid-column: 3;
      display: inline;
      }
   /* Right list; left thumb */
   .toc-right-container {
      display: grid;
      grid-template-columns: 30px 164px 412px;
      align-items: center;
      }
   .toc-right-list-class {
      grid-row: 1;
      grid-column: 3;
      text-align: right;
      display: inline;
      }
   .toc-left-thumb-class {
      grid-row: 1;
      grid-column: 2;
      display: inline;
      }
   .narrow-list-container {
      display: none;
      }
   }

/* vvvvv Navbar Styles vvvvv */
/* For small screens like phones */
@media screen and (max-width: 641px) {
   .wide-navbar {
      display: none;
      }
   .narrow-navbar {
      display: inline;
      }
   }
/* For larger tablets, laptops, and desktops */
@media not screen and (max-width: 641px) {
   .narrow-navbar {
      display: none;
      }
   .wide-navbar {
      display: grid;
      }
   .nav1 {
      grid-row: 1;
      grid-column: 1;
      }
   .nav2 {
      grid-row: 1;
      grid-column: 2;
      }
   .nav3 {
      grid-row: 1;
      grid-column: 3;
      }
   .nav4 {
      grid-row: 1;
      grid-column: 4;
      }
   .nav5 {
      grid-row: 1;
      grid-column: 5;
      }
   }
/* ^^^^^ Navbar Styles ^^^^^ */
/* vvvvv Epilog Styles vvvvv */
/* For small screens like phones */
@media screen and (max-width: 641px) {
   .epilog {
      background-color: #909090;
      border-style: solid;
      border-width: 3px;
      border-color: #121212 #525252 #d0d0d0 #aeaeae;
      width: 175px; margin: auto;
      text-align: center;
      padding-top: 10px; padding-bottom: 10px;
      font-family: serif; font-size: 10pt;
      }
   }
/* For larger tablets, laptops, and desktops */
@media not screen and (max-width: 641px) {
   .epilog {
      background-color: #909090;
      border-style: solid;
      border-width: 3px;
      border-color: #121212 #525252 #d0d0d0 #aeaeae;
      width: 270px; margin: auto;
      text-align: center;
      padding-top: 10px; padding-bottom: 10px;
      font-family: serif; font-size: 10pt;
      }
   }
/* ^^^^^ Epilog Styles ^^^^^ */