* {
	box-sizing: border-box; -webkit-tap-highlight-color: rgba(0,0,0,0);
}
html, body {
  min-height: 100%; margin: 0px; padding: 0px;
}
body {
  background-color: #161309;
  font-family: arial, helvetica, sans-serif;
  min-height: 800px; height: 100vh;
}

a { background-color: transparent; text-decoration: none; }

input:focus, button:focus, div:focus, select:focus, a:focus, span:focus {
  outline-width: 0px; outline: 0;
}

/* disable user selecting "text" */
body {
	-webkit-touch-callout: none; -webkit-user-select: none;
     -khtml-user-select: none;   -moz-user-select: none;
        -ms-user-select: none;   user-select: none;
}
::selection {
  background: transparent;
}
::-moz-selection {
  background: transparent;
}


/* Home */
.home {
	position: fixed; top: 0; left: 0;
}
.navigate {
	display: inline-block; cursor: pointer;
	padding: 0px 6px 2px 6px; 
	border: 1px solid #151515; border-radius: 0px 0px 5px 0px; border-top: none; border-left: none;
	background: #ce8c3c;
	/*background: rgba(0,0,0,0.45);*/
	z-index: 9; transition: background 0.25s;
	box-shadow: 0px 0px 3px #444 inset;
}
.navigate img {
	width: 24px; vertical-align: middle;
}
.navigate span {
	vertical-align: middle; margin-top: -2px;
	font-family: "Comic Sans MS", "Comic Sans", cursive, sans-serif; 
	opacity: 0.95; color: #000; /* a little softer than the icon */
	font-size: 17px; font-weight: bold;
}
.navigate:hover {
	background: #e09130;
	/*background: rgba(0,0,0,0.55);*/
}


/* Page */
#desktop_nav {
  width: 100%; height: 100%;
}
.page {
  float: left;
  cursor: pointer; box-shadow: 0px 0px 6px #000;
  display: inline;
  width: 80%; height: 100%;
  min-width: 640px;  min-height: 1000px;
  max-width: 2048px; max-height: 1536px;
}
.page.thin { /* older comics must follow their natural resolutions */
	/*padding: 0% 10%;
	box-shadow: none;*/
	width: auto; height: auto;
	max-width: 84%; max-height: 1536px;
}
#desktop_nav .prev_page {
  cursor: pointer; visibility: hidden;
  float: left; position: relative;
  width: 10%; height: 100%;
  transition: filter 0.2s, background 0.25s;
}
#desktop_nav .prev_page:hover {
  filter: saturate(120%) brightness(90%);
  background: #131008;
}
#desktop_nav .prev_page:after {
  content: '<';
  font-size: 55px;
  color: #d9701e;
  position: absolute; top: 50%; right: 39%;
}
#desktop_nav .next_page {
  cursor: pointer; visibility: hidden;
  float: left; position: relative;
  width: 10%; height: 100%;
  transition: filter 0.2s, background 0.25s;
}
#desktop_nav .next_page:hover {
  filter: saturate(120%) brightness(90%);
  background: #131008;
}
#desktop_nav .next_page:after {
  content: '>';
  font-size: 55px;
  color: #d9701e;
  position: absolute; top: 50%; right: 39%;
}

#mobile_nav {
  display: none;
}

#mobile_nav .prev_page:after {
  content: '<';
  font-size: 46px; color: #d9701e;
  position: absolute; top: -1.5%; left: 25%;
}
#mobile_nav .next_page:after {
  content: '>';
  font-size: 46px; color: #d9701e;
  position: absolute; top: -1.5%; right: 25%;
}

/* RESPONSIVE */
@media (max-width: 991px) { 
  #mobile_nav {
    display: block;
  }
  #desktop_nav .prev_page, #desktop_nav .next_page {
    display: none;
  }
  .page {
    width: 100%; height: 100%;
    margin-top: 34px; /* make room for mobile nav */
    min-height: 640px; max-height: 95vh;
  }
}  

@media (min-width: 992px) and (max-width: 1599px) { 
  #desktop_nav .page {
    width: 90%; min-height: 750px;
  }
  #desktop_nav .prev_page {
    width: 5%;
  }
  #desktop_nav .next_page {
    width: 5%;
  }
  #desktop_nav .next_page:after {
    right: 31%;
  }
}