/*COMIC 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 {
  margin: 0;
  background-image: url("../img/bgtexture.png");
  background-repeat: repeat;
  background-size: 5%;
  background-color: #0B0B0C;
  background-attachment: fixed;
  font-family: Garamond;
}

/*enter page*/
.enter {
	height: 100%;
	width: 100%;
}

.enter img:active {
  background-image: url("../img/bgtexture2.png");
  background-repeat: no-repeat;
  background-size: 40%;
  background-position: center;
}

/* header image */
header img {
  width: 650px;
  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 {
  font-family: Cinzel;
  color: #DFE4F5;
  
}

h2, h3, h4, h5 {
  font-family: Cinzel;
  color: #0B0B0C;
  
}

/* body font */
.subPage p, footer, #authorNotes {
  font-family: Garamond;
  font-size: 18px;
  font-weight: normal;
}

.archiveTable {
  font-family: Garamond;
  font-size: 12px;
}

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

/*general*/

.home img {
	  border: 5px groove #6B3C85;
}

.subPage {
  width: 1000px;
  max-width: 98%;
  background-color: #DFE4F5;
  border: 5px groove #6B3C85;
  margin: auto;
  margin-bottom: 10px;
  padding: 0px 12px 12px;
}

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

/* for pictures displayed to the right */
.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 -- Blotted out for now while I test out the super cool new table idea */
/*
.charTable, .charTable td { 
  width: 100%;
}

.charTable img {
	margin: 20px;
	border: 5px groove #6B3C85;
	width: 250px;
	max-width: 20%;
}
*/

.charTable table {
	border: 5px groove #6B3C85;
}

.charTable th {
	border: 5px groove #6B3C85;
}

.charTable td {
	border: 5px groove #6B3C85;
}

.pxxxx {
	border: 0px !important;
}

.charTable img, h4 {
	margin: 2px;
	margin-bottom: 2px;

}

.thinHeader {
	margin: 2px;
	margin-bottom: 2px;
}

.makeOsseasNameFit {
	font-size: 15px;
}

/* link colors */
a {
      color: #0B0B0C;
    }

a:hover {
      color: #6B3C85;
    }
	
/*For the Gallery page, mainly the images*/

.gallery img {
		border: 5px groove #6B3C85;
}

.gallery img:hover {
		border: 5px groove #FFBA03;
}

/* HEADER */

/*NAV MENU credit: https://codeconvey.com/drop-down-navigation-menu-html/*/

    nav {
    	background-color: #DFE4F5;
		border: 5px groove #6B3C85;
		width: 90%;
		max-width: 700px;
    }
     
    nav ul {
    	padding: 0;
        margin: 0;
    	list-style: none;
    	position: relative;
    	}
    	
    nav ul li {
    	display:inline-block;
    	background-color: #DFE4F5;
    	}
     /*GOLD!: FFCB00*/
    nav a {
    	display:block;
    	padding:0 10px;	
    	color:#0B0B0C;
    	font-size:20px;
    	line-height: 60px;
    	text-decoration:none;
    }
     
    nav a:hover { 
    	background-color: #6B3C85;
		color: #DFE4F5;
    }
	
	/* Fisrt level Dropdown */
nav ul ul li {
	max-width:250px;
	float:none;
	display:list-item;
	position: relative;
	
}
 
/* Second, Third and more levels	*/
nav ul ul ul li {
	position: relative;
	top:-60px; 
	left:170px;
}

/*    li > a:after { content:  ' +'; }*/
    li > a:only-child:after { content: ''; }
	
    /* Hide Dropdowns by Default */
    nav ul ul {
    	display: none;
    	position: absolute; 
    	top: 60px; /* the height of the main nav */
    }
    	
    /* Display Dropdowns on Hover */
    nav ul li:hover > ul {
    	display:inherit;
    }

/* HOMEPAGE */

/* style nav button images */
.comicNav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  padding: 10px 0px;
  border: 5px groove #6B3C85;
  background-color: #DFE4F5;
  max-width: 600px;
}
.comicNav img {
  width: 80px;
  max-width: 98%;
  padding-right: 30px;
}

/* style comic page image */
.comicPage img {
  max-height: 100vh;
  max-width: 98%;
  
}

/* style author notes */
#authorNotes {
  background-color:#DFE4F5;
  border: 5px groove #6B3C85;
  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: 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;
}
.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: #6B3C85;
  color: #DFE4F5;
  cursor: pointer;
}

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

footer p {
  margin: auto;
}

footer a {
  color: #DFE4F5;
}

footer a:hover {
  color: #6B3C85;
}

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

/*SECRET FULL COMIC PAGE*/
.secretfullcomic img {
  margin: 15px;
}