@font-face {
	font-family: TOOM_Regular;
	src: url(TOOM-Regular.ttf);
	font-display: swap;}
@font-face {
	font-family: Bride_of_TOOM;
	src: url(Bride_of_TOOM.ttf);
	font-display: swap;}
	
body, div, main, section, article {
  box-sizing: border-box; 
}

/* universal background color */
body {
    font-family: TOOM_Regular;
    background: url(/convicts/img/Site_BG.png);
    background-color: #EBE7C5;
    background-size: cover;
}

/* header image */
header img {
  width: 30%;
  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 {
  font-family: TOOM_Regular, cursive;
}

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

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

/*general*/

.subPage {
  width: 1000px;
  max-width: 98%;
  background-color: #EBE7C5;
  outline: 3px solid #2A2A2A;
  box-shadow: 10px 10px 0 #2A2A2A;
  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;
}

/* specific to Characters */
.charTable { 
  width: 100%;
  display: flex;
}

.charCard { 
    display: flex;
    flex-direction: column;
    width: 33%;
}
.charCard p { 
    text-align: left;
}

/* link colors */
a {
    font-family: Bride_of_TOOM;
      color: #2A2A2A;
    }

a:hover {
      color: #D54B30;
    }

/* HEADER */
header #nav {
  text-shadow: 3px 1px 0px #ebe7c5;
  font-size: 20px;
  width: 98%;
  margin: auto;
}

/* HOMEPAGE */

/* style nav button images */
.comicNav {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: center;
  column-gap: 6vw;
  padding: 10px 0px;
}
.comicNav img {
  width: 80px;
  max-width: 98%;
  padding-right: 30px;
}

/* style comic page image */
.comicPage img {
  width: 900px;
  max-width: 98%;
  outline: 3px solid #2A2A2A;
  box-shadow: 10px 10px 0 #2A2A2A;
}

/* style author notes */
#authorNotes {
  display: none;
}

.writePageTitle {
   text-shadow: 0px 3px 0px #ebe7c5;
}

/* 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: #D54B30;
  cursor: pointer;
}

/* FOOTER */
footer {
  color: #2a2a2a;
  font-family: TOOM_Regular;
  text-shadow: 3px 1px 0px #ebe7c5;
  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;
}

/* VERIFY CSS */
a.verify_btn {
  background-color: #2a2a2a;
  border-radius: 15px;
  color: #ebe7c5;
  text-decoration: none;
  font-weight: normal;
  display: inline-block;
  letter-spacing: 0.1em;
  padding: 0.5em 0em;
}
a.verify_btn.verify_btn-beta {
  background-color: #2c2c2c;
}
#refresh-page, #reset-session {
	transition: 0.1s;
	width: 50%;
}
#refresh-page:hover, #reset-session:hover {
	width: 60%;
}

#age-verify-logo {
	width: 90%;
	pointer-events: none;
}
#verifyarea {
    display: none;
}
.overlay-verify {
  background: #0000002f;
  position: fixed;
  height: 100%;
  width: 100%;
  backdrop-filter: blur(10px);
  pointer-events: none;
  top: 0;
  left: 0;
  z-index: 5000;
}

.verify_box {
  background: #ebe7c5;
  outline: 3px solid #2a2a2a;
  box-shadow: 10px 10px 0px #2a2a2a;
  position: absolute;
  left: 0;
  right: 0;
  top: 20%;
  bottom: 0;
  font-size: 1.25em;
  font-family: TOOM_Regular;
  margin: 0 auto;
  z-index: 5500;
  width: 70%;
  height: 40%;
  display: table;
}
.verify_box .verify_box-left, .verify_box .verify_box-right {
  width: 100%;
  position: relative;
  text-align: center;
  padding: 5%;
}

@media (min-width: 54em) {
  .verify_box .verify_box-left, .verify_box .verify_box-right {
    display: table-cell;
    vertical-align: middle;
    width: 50%;
  }
}
.verify_box .verify_box-left p, .verify_box .verify_box-right p {
  position: relative;
  margin-top: 20px;
  font-family: TOOM_Regular;
  font-size: 1.25em;
  z-index: 3;
}
.verify_box .verify_box-left {
  background-size: cover;
  color: #2a2a2a;
}
.verify_box .verify_box-left img {
  position: relative;
  z-index: 4;
  width: 9em;
}
.verify_box .verify_box-left:after {
    content: "";
    position: absolute;
    z-index: 0;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}
.verify_box .verify_box-right {
  text-align: center;
}
.verify_box .verify_box-right h3 {
  color: #2a2a2a;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  border-bottom: 1px solid #2a2a2a;
  padding-bottom: 1em;
  font-size: 1.3em;
  margin: 0 auto;
}
.verify_box .verify_box-right p {
  color: #2a2a2a;
}
.verify_box .verify_box-right small {
  color: #2a2a2a;
}
.verify_box .verify_box-right .verify_btn {
  font-weight: normal;
  letter-spacing: 0.2em;
  padding: 0.9em 1em 0.7em;
  margin: 1em auto;
  display: block;
}

@media only screen and (max-width: 768px) {
    header img {
        width: 80%;
        max-width: 98%;
    }
}