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

/*

colors:
#E8C5D4: light pink
#E72EAE: bright pink

fonts:

body:
font-family: "DM Sans", sans-serif;  

vol 1:
font-family: "Just Me Again Down Here", sans-serif;
font-family: "Love Ya Like A Sister", sans-serif;
font-family: "Schoolbell", sans-serif;
font-family: "Yomogi", sans-serif;
    
vol 2:
font-family: "Google Sans Code", sans-serif;
font-family: "Sigmar", sans-serif;
font-family: "Lacquer", sans-serif;
font-family: "Yomogi", sans-serif;

*/


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

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


.archive1 {
    background-image: url("../img/notebook1.jpg");
    background-size: 100%;
}

.archive2 {
    background-image: url("../img/risopink.png");
    background-size: cover;
}

/*
.neutralPage {
    background-image: url("../img/risoblack.png");
    background-size: cover;
}
*/

/* header image */
header img {
  width: 350px;
  max-width: 85%;
}

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

/*FONTS*/

/* Neutral page fonts */

    /*body*/
body.neutralPage #showComic,
body.neutralPage #authorNotes,
body.neutralPage .subPage p,
body.neutralPage .archiveTable,
body.neutralPage p,
body.neutralPage footer {

    font-family: "DM Sans", sans-serif;
    color: #000000;
    font-weight: 300;
    letter-spacing: .05em;
    
}

    /*headers*/
body.neutralPage h1,
body.neutralPage h2,
body.neutralPage h3,
body.neutralPage h4,
body.neutralPage h5,
body.neutralPage header {
  font-family: "DM Sans", sans-serif;
  color: #000000;
    font-weight: 600;
}

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

body.neutralPage a:hover {
      color: #E72EAE;
    }

/* volume 1 page fonts */

    /*body*/
body.archive1 #showComic,
body.archive1 #authorNotes,
body.archive1 .subPage p,
body.archive1 .archiveTable 
{
  font-family: "Just Me Again Down Here", sans-serif;
  color: #000000;
  font-weight: 100;
  font-size: 1.5rem;
}

body.archive1 footer {
  font-family: "Just Me Again Down Here", sans-serif;
  color: #000000;
  font-weight: 100;
  font-size: 1rem;
}

    /*headers*/
body.archive1 h1,
body.archive1 h2,
body.archive1 h3,
body.archive1 h4,
body.archive1 header,
body.archive1 h5 {
  font-family: "Just Me Again Down Here", sans-serif;
  color: #000000;
  font-weight: 800;
}

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

body.archive1 a:hover {
      color: #E72EAE;
    }

/* volume 2 page fonts */

/*body*/
body.archive2 #showComic,
body.archive2 #authorNotes,
body.archive2 .subPage p,
body.archive2 .archiveTable,
body.archive2 footer
{
  font-family: "Google Sans Code", sans-serif;
  color: #000000;
font-weight: 100;
}

/*headers*/
body.archive2 h1,
body.archive2 h2,
body.archive2 h3,
body.archive2 h4,
body.archive2 h5,
body.archive2 header {
  font-family: "Google Sans Code", sans-serif;
  color: #000000;
    font-weight: 800;
}

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

body.archive2 a:hover {
      color: #ffffff;
    }

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

/*general*/

.subPage {
  width: 1000px;
  max-width: 98%;
  margin: auto;
  margin-bottom: 10px;
  padding: 0px 12px 12px;
}

.subPage:not(.archivePage) {
  text-align: center;
  background-color: #ffffff;
  outline: 0px solid #000000;
}

/* 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%;
}


/* HEADER */
header #nav {
/*  background-color: #000000;*/
/*  outline: 3px solid #000000;*/
  font-size: 30px;
  width: 98%;
  margin: auto;
}

/* HOMEPAGE */

/* style nav button images */
.comicNav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  padding: 10px 0px;
}
.comicNav img {
  width: 80px;
  max-width: 98%;
  padding-right: 30px;
  transition: transform .2s;
  margin: 0 auto;
}


.comicNav img:hover {
  -ms-transform: scale(1.3); /* IE 9 */
  -webkit-transform: scale(1.3); /* Safari 3-8 */
  transform: scale(1.2); 
}

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

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

/* ARCHIVE PAGE */

/* style table in which archive is displayed */
.archiveTable {
  width: 90%;
  border-collapse:collapse;
}

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

/* 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;
}
.archive1 .archiveCellThumb img{
    max-width: 100%;
    position: relative;
    z-index: -10;
  }

.archive2 .archiveCellThumb img{
    max-width: 100%;
    position: static;
    z-index: 1;
  }

/* 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 */
.archive1 .archiveRow:hover {
 background-image: url("../img/highlighter.png");
 background-size: 100%;
 background-repeat: no-repeat;
 color: black;
  cursor: pointer;
}

.archive2 .archiveRow:hover span {
    background-image: url("../img/risoblack.webp");
    color: white;
}


.archive2 .archiveRow:hover .archiveCellThumb {
    -webkit-filter: invert(100%) !important;
}

.archive2 .archiveRow:hover {
  cursor: pointer;
}

.container {
   display: flex; 
   margin-left: 20%;
   margin-right: 5vw;
}

.containerAbout {
   display: flex; 
   margin: 3vw 10vw;
}

.comic {
    width: 80%;
}


.imglink img {
  transition: transform .2s;
  margin: 0 auto;
}

.imglink img:hover {
  -ms-transform: scale(1.3); /* IE 9 */
  -webkit-transform: scale(1.3); /* Safari 3-8 */
  transform: scale(1.2); 
}

    .socials {
    width: 20%;
    padding-left: 5%;
}

/*desktop specific*/
@media screen and (min-width: 601px) {
    .archivePic {
        display: flex;
    }
    
    .socials img {
        width: 7vw;
        padding-bottom: 2vw;
    }
}

/*mobile specific*/
@media screen and (max-width: 600px) {
    .archivePic {
        display: block;
    }
    

    .socials img {
        width: 50px;
        padding-bottom: 2vw;
    }
}

.disqus {
    width: 60%;
    margin: auto;
}

#disqus_thread a { 

color: #E72EAE !important; 

} 


/* FOOTER */
footer {
  color: #421a1a;
  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
}
/*dropdown
Note that to style the contents of a dropdown menu, css can only change background color and font color :(. There are ways to get around this, most saliently using a js add-on of some kind that emulates a dropdown without using html <select>. This complicates the part where we generate the dropdown based on content, and also ensuring browser cross compatibility becomes harder. 
*/
.writeDropdown{
  display: flex;
  justify-content: center;
  align-items: center;
}


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