/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
  HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* declares custom font for use */
@font-face {
  font-family: 'TF48 Style 4'; /* set name */
  src: url('../fonts/TF48Style4.woff') format('woff'),
  url('../fonts/TF48Style4.woff2') format('woff2'),
  url('../fonts/TF48Style4.ttf')  format('truetype'); /* url of the font */
  font-weight: normal;
  font-style: normal;
}

body, div, main, section, article {
  box-sizing: border-box; 
}

/* universal background color */
body {
  background-color: #ffffff; 
}

/* header image */
header img {
  width: 450px;
  max-width: 98%;
  opacity: 1;
}

header img:hover {opacity: 0.6} 

/* clearfix hack to prevent image overflow. check out the W3Schools page on it. */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/*FONTS*/

/* header font */
#showComic, header, h1, h2, h3, h4, h5 {
  font-family: 'TF48 Style 4';
    font-weight: normal;
    font-style: normal;
}

/* body font */
.subPage p, footer, #authorNotes, .archiveTable {
  font-family: 'calibri', sans-serif;
  font-size: medium;
}

@media only screen and (max-width: 767px) {
  #showComic, header, h1, h2, h3, h4, h5 {
  font-family: 'TF48 Style 4';
    font-weight: normal;
    font-style: normal;
  }
}

/* STYLING FOR SUBPAGES (about, characters, etc) */

/*general*/

.subPage {
  width: 900px;
  max-width: 98%;
  background-color: #ffffff;
  outline: none;
  margin: auto;
  margin-bottom: 10px;
  padding: 12px 200px 12px;
}

@media only screen and (max-width: 767px) {
  .subPage {
  padding: 12px 12px 12px;
  }
}

.subPage:not(.archivePage) {
  text-align: center;
}

.archivePage {
  text-align:center;
}

/* for pictures displayed to the left */
.leftPic {
  clear: left;
  float:right;
  margin-left:20px;
}

/* for pictures displayed to the left */
.rightPic {
  clear: right;
  float:left;
  margin-left:20px;
}

/* specific to Characters */
.charTable, .charTable td { 
  width: 100%;
}

/* link colors */
a {
      color: #FF8C71;
      text-decoration: none;
    }

a:hover {
      color: #D0A8FF;
      cursor: crosshair;
      text-decoration: underline;
    }

/* HEADER */
header #nav {
  background-color: transparent;
  outline: none;
  text-transform: lowercase;
  font-size: 36px;
  font-weight: normal;
  font-style: normal;
  width: 98%;
  margin: auto;
}

@media only screen and (max-width: 767px) {
header #nav {
  background-color: transparent;
  outline: none;
  text-transform: lowercase;
  font-size: 26px;
  font-weight: bold;
  font-style: normal;
  width: 98%;
  margin: auto;
  }
}

header #nav a:link {
  color: #000;
  text-decoration: none;
}

header #nav a:visited {
  color: #000;
}

header #nav a:hover {
  color: #D0A8FF;
  text-decoration: underline;
  
}

/* HOMEPAGE */

/* style nav button images */
.comicNav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  padding: 10px 0px;
}
.comicNav img {
  width: 50px;
  max-width: 98%;
  padding-right: 0px;
  opacity: 1;
  transition: 0.3s;
}

.comicNav img:hover {opacity: 0.6}

@media only screen and (max-width: 767px) {
.comicNav img {
  width: 40px;
  max-width: 98%;
  padding-right: 0px;
  opacity: 1;
  transition: 0.3s;
  }
}

/* style comic page image */
.comicPage img {
  width: 750px;
  max-width: 98%;
}

/* style author notes */
#authorNotes {
  background-color:transparent;
  color: #000;
  font-size: medium;
  margin: auto;
  padding: 3px;
  padding-top: 0px;
  width: 550px;
  max-width: 98%;
}

/* ARCHIVE PAGE */

/* centering the main title */
.archivePage h1 {
  text-align:center;
}

/* adding a border below each chapter */
.chapter {
  border-bottom:1px dotted grey;
}

.chapter:has(.active) { 
  padding-bottom:20px;
}

/* chapter titles */
.chapter .inactive::before {
  content:"↳ ";
}

.chapter .active::before {
  content:"↓ ";
}
/* style table in which archive is displayed */
.archiveTable {
  width: 90%;
  border-collapse:collapse;
  display:block;
  max-height: 0px;
  overflow: hidden;
  transition: max-height 0.5s ease-out;
}

/* style archive table cells */
.archiveTable td {
  padding: 3px;
  vertical-align: central;
  
}

/* style table cell in which page title is displayed */
.archiveCellTitle:not(.leftAlignTableText) {
  max-width: 300px;
  text-align: center;
}

.archiveCellDate {
  text-align: right;
  min-width: 120px;
}

.archiveCellNum {
  text-align: center;
  min-width: 30px;
}

/* style the thumbnails on the archive page */
.archiveCellThumb {
    width: 500px;
    max-width: 60px;
}
.archiveCellThumb img{
    max-width: 100%;
  }

/* for left aligning the text in a table cell */
.leftAlignTableText td {
  text-align: left;
}

/* highlight a table row and make pointer into hand when moused over */
.archiveRow:hover {
  color: #fff;
  background-color: #000;
  cursor: crosshair;
}

hr.solid {
  border-top: 1px solid #5D5D5D;
  width: 25%;
}

/* FOOTER */
footer {
  color: #000;
  margin-top: 12px;
  margin-bottom: 15px;
  float: left;
  width: 100%;
  font-size: 12px;
}

footer p {
  margin: auto;
}

footer a {
  color: #c8d32b
}

footer a:hover {
  color: #868d26
}

/* take away margins from the edges of the screen */
html, body {
  margin: 0;
}