/* 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 {
  background-color: #3d3d5c;
}

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

.bg-img {
  /* The image used */
  background-image: url("menubipp.png");

  min-height: 950px;
  /* Center and scale the image nicely */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  /* Needed to position the navbar */
  position: relative;
}

img {
    pointer-events: none;
}

/* sidebar stuff */
.sidenav {
  height: 100%;
  width: 0;
  position: fixed;
  z-index: 1;
  top: 0;
  right: 0;
  background-color: #000000;
  overflow-x: hidden;
  transition: 0.5s;
  padding-top: 10px;
}

.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 25px;
  color: #818181;
  display: block;
  transition: 0.3s;
}

.sidenav a:hover {
  color: #f1f1f1;
}

.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 70px;
  margin-left: 50px;
  color: #ee82ee;

}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
  -ms-flex: 30%; /* IE10 */
  flex: 20%;
  text-align: center;
}

.main {
  padding: 20px;
  -ms-flex: 70%; /* IE10 */
	flex: 70%;
  padding: 20px;
}

.fakeimg img{
height: 40%;
width: 40%;
border: 10px solid #000000;
border-radius: 20px;
transform: rotate(-11deg);
}

.fakeimg2 img {
  height: 40%;
  width: 40%;
  border: 10px solid #000000;
  border-radius: 20px;
  margin-right: 58px;
  float: left;
  text-align: right;
}

.fakeimg:hover{
   transform: scale(1.1);
   transition: .5s ease;
}

.button {
  border: 5px solid #000000;
  border-radius: 20px;
  color: white;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

@media only screen and (min-width:901px) {
.button{
padding: 15px 32px;
}
}
@media only screen and (max-width:900px) {
.button{
padding: 15px 15px;
font-size: 3vw;
}
}

/* Footer */
.footer {
  padding: 1px;
  text-align: center;
  background: #000000;
  color: white;
}

.centered {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/*menu button*/
#main {
  padding-right: 10px;
  float: right;
  color: white;
  position: fixed;
  top: 0;
  width: 100%;
}

.centered1 {
  position: absolute;
  top: 1%;
  right: 1%;
  z-index:1;
}

.centered2 {
  top: 1%;
  left: 1%;
  border: 5px solid #FFFFFF;
  border-radius: 40px;
  position: fixed;
  z-index:1;
}

@media only screen and (max-width:900px){
.centered2{
width: 10%;
}
}

@media only screen and (min-width:901px){
.centered2{
width: 5%;
}
}

.button1 {
  background-color: #FFAF33;
}

.button1:hover {
  opacity: 1.0;
  background-color: #4CAF50;
  color: white;
}

.button2 {background-color: #40D779;} /* Blue */

.button2:hover {
  opacity: 1.0;
  background-color: #4095D7;
  color: white;
}

.blocktex {
  position: relative;
}

.blocktex .tranp {
  margin: 0 auto; /* Center it */
  position: absolute; /* Position the background text */
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgb(0, 0, 0); /* Fallback color */
  background: rgba(0, 0, 0, 0.7); /* Black background with 0.5 opacity */
  color: #f1f1f1; /* Grey text */
  border-radius: 70px;
}

.p3 {
  font-family: 'Helvetica', 'Arial', sans-serif;
  font-size: 16.5pt;
}

/* <div class="centered"><h1>Starrow</h1><br><p>Shoot for the stars.</p></div> */
.navActive{
width:450px;
}

@media only screen and (max-width:900px){
.p3{
font-size: 3vw;
}
}

@media only screen and (min-width:901px) {
.tranp{
top: 6%;
}
}
@media only screen and (max-width:900px) {
.tranp{
width: 90%;
top: 12%;
}
}

@media only screen and (min-width:901px) {
.blocktex1{
top: 12%;
}
}
@media only screen and (max-width:900px) {
.blocktex1{
top: 24%;
}
}

@media only screen and (min-width:901px) {
.blocktex2{
top: 27%;
}
}
@media only screen and (max-width:900px) {
.blocktex2{
top: 45%;
}
}

@media only screen and (min-width:901px) {
.blocktex4{
top: 42%;
}
}
@media only screen and (max-width:900px) {
.blocktex4{
top: 90%;
}
}
@media only screen and (max-width:900px) {
.blocktex4{
top: 73%;
}
}

@media only screen and (min-width:901px) {
.blocktex3{
top: 57%;
}
}
@media only screen and (max-width:900px) {
.blocktex3{
top: 90%;
}
}
@media only screen and (max-width:550px) {
.blocktex3{
top: 73%;
}
}

@media only screen and (max-width:992px){
.sider, .blocktex1, .tranp, .blocktex4{
background-position: center;
    background-size: cover;
}
}
@media only screen and (min-width:835px) and (max-width:1135px){
  .side, .blocktex1, .tranp, .blocktex4{
   flex:50%;
  }
}

   .sider{
   flex:100%;
    background-size: cover;
    height:530px;
	background-position:top;
   }
}

@media only screen and (max-width:500px){
.navActive, .blocktex1, .blocktex4{
   width:100%;
   }
}

::-webkit-scrollbar { width: 12px; }

::-webkit-scrollbar-track {
  background: #f3f3f3;
  border-radius:12px;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
}

::-webkit-scrollbar-thumb {
  background: #4F01E5;
  border-radius: 12px;
}

.sidenav::-webkit-scrollbar { width: 12px; }

.sidenav::-webkit-scrollbar-track {
  background: #f3f3f3;
  border-radius: 12px;
  box-shadow: inset 0 0 6px rgba(0,0,0,0.2);
}

.sidenav::-webkit-scrollbar-thumb {
  background:#4CAF50;
  border-radius: 12px;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#bce0ee', GradientType=1);
}

.blocktex1 {
  position: relative;
  margin: 0 auto; /* Center it */
  right: 50%;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
  position: absolute;
  border-radius: 70px;
}

.blocktex2 {
  position: relative;
  margin: 0 auto; /* Center it */
  left: 50%;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
  position: absolute;
  border-radius: 70px;
}

.blocktex4 {
  position: relative;
  margin: 0 auto; /* Center it */
  right: 50%;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
  position: absolute;
  border-radius: 70px;
}

.blocktex3 {
  position: relative;
  margin: 0 auto; /* Center it */
  left: 50%;
  padding: 20px;
  background: rgba(0, 0, 0, 0.5); /* Black background with 0.5 opacity */
  position: absolute;
  border-radius: 70px;
}

.cush {
  padding: 10px;
  color: #f1f1f1;
}

/* 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: 'Cherry Cream Soda', cursive;
}

/* body font */
.subPage p, footer, #authorNotes, .archiveTable {
  font-family: 'Open Sans', sans-serif;
  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;
}

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

/* link colors */
a {
      color: #000000;
    }

a:hover {
      color: #DA5437;
    }

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


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

@media only screen and (max-width:900px){
.centered2{
width: 10%;
}
}

@media only screen and (min-width:901px){
.centered2{
width: 5%;
}
}
/* 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
}

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