/* 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." */


body, div, main, section, article {
  box-sizing: border-box; 
}
body{
background-image: url(https://littlerivercomics.neocities.org/img/background.jpg);
background-size: 100%;
}

/* header image */
header img {
  width: 500px;
  max-width: 98%;
}

/* 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 .bellefair-regular {
  font-family: "Bellefair", serif;
  font-weight: 400;
  font-style: normal;
}

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

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

/*general*/

.subPage {
  width: 1000px;
  max-width: 98%;
  background-color: #ffffff;
  outline: 3px solid #000000;
  margin: auto;
  margin-bottom: 20px;
  padding: 0px 20px 20px;
}

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

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

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

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

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

a:hover {
  color: #0892d0;
}
#showComic {
  color: #ffffff;
  background-color: #1a1a2e; /* matches your nav color so it feels connected */
  width: 900px;
  max-width: 98%;
  margin: 0 auto 20px auto; /* top margin is 0 — flush to nav */
  padding: 20px;
  outline: 1px solid #000000;
}


#showComic .writePageTitle h1 {
  padding-top: 20px;
  padding-bottom: 20px;
}

#showComic a:hover {
  color: #0892d0;
}

/* HEADER */
header #nav {
  background-color: #1a1a2e;
  outline: 3px solid #000000;
  font-size: 25px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  height: auto;
  min-height: 50px;
  width: 100%;
  max-width: 100%;
  margin: auto;
  gap: 30px;
  overflow: hidden;
}
@media (max-width: 768px) {
  header #nav {
    font-size: 13px !important;
    gap: 8px !important;
    padding: 8px 5px !important;
  }

  header #nav a {
    padding: 4px 5px !important;
    letter-spacing: 0px !important;
  }
}

header #nav a {
  color: #ffffff;
  padding: 10px 15px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

header #nav a:hover {
  color: #0892d0;
}

/* HOMEPAGE */

/* style nav button images */
.comicNav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  padding: 20px 20px;
}
.comicNav img {
  width: 150px;
  max-width: 98%;
  padding-right: 50px;
}

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

/* style author notes */
#authorNotes {
  background-color:#ffffff;
  outline: 3px solid #000000;
  margin: auto;
  padding: 30px;
  padding-top: 30px;
  width: 900px;
  max-width: 98%;
}

/* Mailchimp form */
#mc_embed_shell {
  width: 900px;
  max-width: 98%;
  margin: auto;
}

#mc_embed_signup {
  width: 100% !important;
}

/* style comment box */
#HCB_comment_box{border: 3px solid #000000; border-radius: 0px; padding: 10px; color:#000000; background: #ffffff; width: 900px; max-width: 98%; margin: auto; margin-bottom: 20px;}
.hcb-mod b{color:#0088AF;}
#HCB_comment_box textarea,#HCB_comment_box input.text{border-top:1px solid #e4e4e4;border-left:1px solid #e4e4e4;border-bottom:1px solid #eaeaea;border-right:1px solid #eaeaea;background-color:#f8f8f8;}
#HCB_comment_box .hcb-wrapper-half{display:block;width:50%;float:left;}
#HCB_comment_box .hcb-wrapper{clear:both;}
#HCB_comment_box input.text{display:block;width:95%;}
#HCB_comment_box input.submit{border-top:1px solid #FCB1A2;border-left:1px solid #FCB1A2;border-bottom:1px solid #BB2B0F;border-right:1px solid #BB2B0F;background-color:#F26646;color:#000;font-weight:bold;cursor:pointer;}
#HCB_comment_box div.comment{color:#000000; background: #f8f8f8; border:3px double #000000; margin:5px; padding:2px;}
#HCB_comment_box .comment .likes{color: #00AA00;}
#HCB_comment_box .hcb-link{color:#0088AF;text-decoration:none;}

/* ARCHIVE PAGE */
.archiveGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  justify-content: center;
  padding: 10px 0;
}

.archiveCard {
  width: 120px;
  cursor: pointer;
  text-align: center;
  border: 2px solid transparent;
  border-radius: 4px;
  padding: 5px;
  transition: border-color 0.2s;
}

.archiveCard:hover {
  border-color: #DA5437;
  background-color: #f9f9f9;
}

.archiveCard img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  display: block;
}

.archiveCardInfo {
  padding: 4px 0;
  font-size: 12px;
}

.archiveCardNum {
  display: block;
  font-weight: bold;
  color: #DA5437;
}

.archiveCardTitle {
  display: block;
  font-weight: bold;
}

.archiveCardDate {
  display: block;
  color: #888;
  font-size: 11px;
}

/* FOOTER */
footer {
  color: #ffffff;
  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;
}