/* 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 {
  background-color: black;
  color: white;
  font-family: Verdana;
}

ComicTxt {
  font-family: "Times New Roman";
   color: gray;
   font-size: 30px;
}

maincont {
      height: 40hw;
       align-items: top;
    justify-content: center;
 		  display: flex;
          background-color:  #cfd6ff;
          border: 4px solid #d1d3f0;
          border-style: outset outset none outset;
             margin: auto;
           padding: 0.75vw;
             max-width: 75%;
             font-size: 2.5vh;
             
             
}  

/*
Comic Viewer Stuff
*/


.ComicImg {
  display: block;
  margin-left: auto;
  margin-right: auto;
  
}

/* Hide the images by default */
.mySlides {
  display: none;
}


/* Next & previous buttons   border-radius: 0 3px 3px 0;   user-select: none; */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 40%;
  width: auto;
  padding: 10vh 8vw;
  margin-top: -12.5vh;
  color: black;
  font-weight: bold;
  font-size: 3.5vw;
}

/* Position the "next button" to the right  border-radius: 0.1px 0 0 0.1px;  */
.next {
  right: 0;
 border-radius: 0.1vw 0 0 0.1vw;
}

/* On hover, add a black background color with a little bit see-through */ 
.prev:hover,
.next:hover {

}

/* Number text (1/3 etc) */
.numbertext {
    left: 0;
  font-size: 2.2vh;
  padding: 2vh 2vw;
  position: absolute;
  top: 0;
   background-color: rgba(0, 0, 0, 0.7);
}

/* Container for image text */
.caption-container {
  text-align: center;
  background-color: #222;
  padding: 1vh 6vw;
   font-size: 2.6vh;
  color: white;
   height: 16vh;
}

.PageButt {
border: none;
  color: white;
  background-color: #222;
  padding: 1.6vh 2vw;
  text-align: center;
  display: inline-block;
  font-size: 2.3vh;
  cursor: pointer;
}

    @media only screen and (min-width: 200px) and (max-width: 700px)  {
  .caption-container {
    height: 7.1vh;
    font-size: 1.2vh;
       padding: 0.5vh 6vw;
  }
  
  .PageButt {
    font-size: 1.9vh;
     padding: 0vh 1vw;
  }
  
  .ComicImg {
     height: auto;
     min-width: 90%;  
  }
  
  .prev,
.next {
  top: 40%;
  width: auto;
  padding: 13vh 1.2vw;
  margin-top: -12.5vh;
}

.numbertext {
  font-size: 1.6vh;
  padding: 1.4vh 1.4vw;
}
}


/*
Headinh stuff below
*/
 nav {
         height: 8vh;
 		  display: flex;
          align-items: center;
          justify-content: center;
          background-color:  #0a0a23;
          background: linear-gradient(180deg, #8924cc 8%, #4c008a 34%, #1f0835 100%);
          border: 4px solid #d1d3f0;
          border-style: outset;
            border-style: none outset outset outset;
             margin: auto;
           padding: 0.76vw;
           max-width: 75%;
        }
        
		topnav {
          height: 8vh;
 		  display: flex;
          background-color:  #0a0a23;
          border: 4px solid #d1d3f0;
          border-style: outset outset none outset;
             margin: auto;
           padding: 0.76vw;
             max-width: 75%;
        }
        

        ul {
             display: flex;
          align-items: center;
          justify-content: center;
          height: 0.8vh;
          border: 5.5px solid #d1d3f0;
          border-radius: 25px;
          border-style: groove;
          border-width: 1.35vh 1.291vw;
          padding: 2.05vh;
           margin: 5vh 0.75vw;
        }

		ul li {
  			color: #fff;
  			padding: 0px;
  			margin-left: 0.781vw;
		}
        a {
           font-weight: 700;
          text-shadow: 0.104vw 0.104vw #9c9a9a;
          color: #fff;
          font-size: 1.65vw; 
          text-decoration: none;
          	padding: 0.321vw;
        }


  t1 {
          font-weight: 700;
          margin: auto;
          color: #f542ec;
            font-size: 1.55rem; 
          text-decoration: overline;
        }
        
  tt {
        padding-left: 1vw;
          font-weight: 700;
          margin: auto;
          color: #fff700;
            font-size: 0.75rem; 
          text-decoration: none;
          font-family: "Times New Roman", Times,serif;
          margin-left: 0.50vw;
        }

        a:hover {
          padding-bottom: 5px;
          box-shadow: inset 0 -2px 0 0 #fff;
        }