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

/* universal background color */
body {
 font-family: 'Trebuchet MS', sans-serif; color: 	#007399;
	background: #080100;
	font-size: 1.4rem;
	background-image: url("data:image/svg+xml,<svg id='patternId' width='100%' height='100%' xmlns='http://www.w3.org/2000/svg'><defs><pattern id='a' patternUnits='userSpaceOnUse' width='40' height='59.428' patternTransform='scale(2) rotate(10)'><rect x='0' y='0' width='100%' height='100%' fill='hsla(353, 65%, 92%, 0)'/><g transform='translate(0,0)' stroke-linejoin='round' stroke-linecap='round' stroke-width='0.5' stroke='hsla(187, 100%, 42%, 0.13)' fill='none'><path d='M0 70.975V47.881m20-1.692L8.535 52.808v13.239L20 72.667l11.465-6.62V52.808zm0-32.95l11.465-6.62V-6.619L20-13.24 8.535-6.619V6.619L20 13.24m8.535 4.927v13.238L40 38.024l11.465-6.62V18.166L40 11.546zM20 36.333L0 47.88m0 0v23.094m0 0l20 11.548 20-11.548V47.88m0 0L20 36.333m0 0l20 11.549M0 11.547l-11.465 6.619v13.239L0 38.025l11.465-6.62v-13.24L0 11.548v-23.094l20-11.547 20 11.547v23.094M20 36.333V13.24'/></g></pattern></defs><rect width='100%' height='100%' fill='url(%23a)'/></svg>");
		
	
	-webkit-user-select: none;  /* Chrome all / Safari all */
-moz-user-select: none;     /* Firefox all */
-ms-user-select: none;      /* IE 10+ */
-o-user-select: none;
user-select: none;

  
  

}

.wrapper {
    
    max-width: 800px;

}

/*fanart modals*/

.modalDialog {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0,0,0,0.8);
        z-index: 99999;
        opacity:0;
        -webkit-transition: opacity 400ms ease-in;
        -moz-transition: opacity 400ms ease-in;
        transition: opacity 400ms ease-in;
        pointer-events: none;
    }

    .modalDialog:target {
        opacity:1;
        pointer-events: auto;
    }

    .modalDialog > div {
        width: auto;
        max-width: 900px;
        height: auto;
        overflow: auto;
        position: relative;
        margin: 10% auto;
        padding: 5px 20px 13px 20px;
        border-radius: 10px;
        background: #fff;
        background: -moz-linear-gradient(#fff, #999);
        background: -webkit-linear-gradient(#fff, #999);
        background: -o-linear-gradient(#fff, #999);
    }

   
    .close {
        background: #606061;
        color: #FFFFFF;
        line-height: 25px;
        position: absolute;
        right: 30px;
        text-align: center;
        top: 10px;
        width: 24px;
        text-decoration: none;
        font-weight: bold;
        -webkit-border-radius: 12px;
        -moz-border-radius: 12px;
        border-radius: 12px;
        -moz-box-shadow: 1px 1px 3px #000;
        -webkit-box-shadow: 1px 1px 3px #000;
        box-shadow: 1px 1px 3px #000;
    }

    .close:hover { background: #00d9ff; }
   
/* Modal Header */
.modal-header {
  padding: 2px 16px;
  background-color: #041a26;
  color: white;
}

/* Modal Body */
.modal-body {padding: 2px 16px;}

/* Modal Footer */
.modal-footer {
  padding: 2px 16px;
  background-color: #041a26;
  color: white;
}   

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

img {
  border-radius: 2%;
  box-shadow: 0 8px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  padding: 6px;
  max-width: 100%;
  height: auto;
}

img:hover {
  box-shadow: 0 0 4px 1px rgba(0, 140, 186, 1);
}

table td, table td * {
    vertical-align: top;
}

/* 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: 'Orelega One', cursive;
}

p {font-size: 110%; float:center;
	font-family: 'Orelega One', cursive;
}

h2 {font-size: 80%; float:center;
font-family: 'Rubik Mono One', sans-serif;}

h3 {font-size: 90%; float:center;
font-family: 'Orelega One', cursive;
}

h4 {font-size: 200%; float:center;
font-family: 'Rubik Mono One', sans-serif;
color:#007399;
text-shadow: 
1px 0px 1px #00cccc, 0px 1px 1px #eee, 
2px 1px 1px #00cccc, 1px 2px 1px #eee,
3px 2px 1px #00cccc, 2px 3px 1px #eee,
4px 3px 1px #00ace6, 3px 4px 1px #eee,
5px 4px 1px #00ace6, 4px 5px 1px #eee,
6px 5px 1px #0086b3, 5px 6px 1px #eee,
7px 6px 1px #0086b3;
        margin: auto;    
                
}

h6 {
	
	font-size: 100%; float:center;
font-family: 'Rubik Mono One', sans-serif;
	color: #DA5437;
	padding: 1px;
}

h7 {font-size: 120%; float:center;
font-family: 'Rubik Mono One', sans-serif;}

.vkwidget {
	float:center;
}

.floatright {
	
	float: right;
	
}
.floatleft {
	
	float: left;
	
}

/* body font */
.subPage p, footer, #authorNotes, .archiveTable {
  font-family: 'Orelega One', cursive;
  font-size: large;
}

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

/*general*/

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

.subPage:not(.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;
  margin-right:20px;
}

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


/* link colors #007399;*/
a {
      color: 	#009EC1;
	  text-decoration: none;
    }

a:hover {
      color: #40E0D0;
    }

/* HEADER */
header #nav {
  background-color: #ffffff;
  outline: 1px solid #000000;
  font-size: 20px;
  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;
}

/* 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: 3px;
  padding-top: 0px;
  width: 900px;
  max-width: 98%;
}

/* 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="top"
  
}

/* 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 {
  background-color: #DA5437;
  cursor: pointer;
}

/* FOOTER */
footer {
  color: #007399;
  margin-top: 12px;
  margin-bottom: 15px;
  float: center;
  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;
}