/*--Basic Setup--*/
html {
    font-family: stulttext;
  }
html, body {
  margin: 0;
}
body {
    background-color:#63332b;
    background-image:url('img/bg.jpg');
    background-size:cover;
    background-attachment:fixed;
    background-position:center;
}
body, div, main, section, article {
  box-sizing: border-box; 
}
figure {
    margin: 1rem 0;
    margin:0px;
}
@font-face {
  font-family: stulttext;
  src: url("stulttext.woff2");
  }
/* clearfix hack*/
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}


/*--Links--*/
a:link {
    color: white;
    
  }
a:visited {
    color:#DDDDDD;
  }
a:hover {
    color: #7e37da;
    }

/*--Dropdown Menu--*/
.dropbutton {
    padding:0px;
    cursor:pointer;
    border:none;
    border-radius:15px;
    margin:15px;
    width:40%;
    height:100px;
    background-color: #580272;
}
.dropdown {
    position:relative;
    display:inline-block;
    visibility:hidden;
    min-width:100px;
    z-index:20;
}
.dropLinks {
    display:none;
    position:absolute;
    overflow:auto;
    background-image:url("img/folder.jpg");
    background-size:cover;
    border-radius:15px;
    padding:10px;
    box-shadow: 0px 5px 10px 0px;
    margin-left:20px;
}
.dropLinks a {
    color:#244d6a;
    text-decoration:none;
    font-size:30px;
    display:block;
    border-bottom:1px solid #528baa;
}
.show{
        display:block;
    }
.menuimg {
    border-radius:15px;
    width:50%;
}

/*--Header--*/
.mainhead {
    white-space:nowrap;
    position:absolute;
}
.headimg {
    position:fixed;
    left:220px;
    top:0px;
    height:110px;
    width:1200px;
}
.logoimg {
    width:370px;
    position:fixed;
    top:0px;
}
.nav-bar {
    position:fixed;
    left:450px;
    top:55px;
    font-size:35px;
    display:inline-block;
}
.navspace1 {
    padding-left:140px;
}
.navspace2 {
    padding-left:90px;
}
.navspace3 {
    padding-left:47px;
}
.navspace4 {
    padding-left:80px;
}

/*--Footer--*/
footer {
    margin-top:90px;
    float:left;
    width: 100%;
    font-size: 12px;
}
.footerimg {
    width:100%;
    position:fixed;
    left:0px;
    bottom:0px;
    height:70px;
}
.end-info {
    position:fixed;
    bottom:5px;
    left:50px;
    color:white;
    white-space:nowrap;
}
.end-info img {
     height:30px;
}



/*--Welcome Page--*/
.welcontain {
    position:relative;
}
.welbg{
    position:relative;
    width:85%;
    left:50%;
    transform: translateX(-50%);
}
.welgif {
    position:absolute;
    width:85%;
    left:50%;
    transform: translateX(-50%);
}
.welcontain a{
    position:absolute;
    font-size:6vw;
    left:52.3%;
    top:66.8%;
    color:forestgreen;
    text-decoration:none;
}

/*--Homepage--*/
.flexcontain{
    display:flex;
    padding-top:160px;
    padding-left:370px;
    width:95%;
}
.rightcontain{
    display:flex;
    flex-direction:column;
    width:100%;
}
@supports (scrollbar-color: auto) {
.maincont {
    background-image:url("https://i.imgur.com/FNmlK7b.jpeg");
    background-size:100% 100%;
    position:relative;
    overflow-y:scroll;
    width:80%;
    scrollbar-color: #393979 rgba(62, 56, 131, 0.49);
    scroll-behavior:smooth;
    border-radius:10px;   
    margin-right:50px;
    } 
}
.maincont div {
    position:absolute;
    padding-left:30px;
    padding-right:30px;
    color:darkmagenta;
    font-size:25px;
   
}
.maincont h4,h6 {
    font-size:30px;
    margin:15px;
}
.player{
    position:fixed;
    right:5px;;
    bottom:70px;
    white-space:nowrap;
    display:inline-block;
      }
.buttons {
    display:flex;
    flex-direction:column;
    position:fixed;
    top:280px;
    width:230px;
    margin-left:30px;
    z-index:3;
}
.buttons div {
    text-align:center;
    font-size:25px;
    background-color:#3a1c5c;
    padding:15px;
    margin-bottom:10px;
    border-radius:20px;
    border-style:inset;
    border-color:#764ca6;
}
@supports (scrollbar-color: auto) {
.updates{
    background-color:#ae97cc;
    color:#3a1c5c;
    position:relative;
    height:200px;
    width:60%;
    overflow-y:scroll;
    font-size:20px;
    padding:15px;
    outline: 7px inset #764ca6;
    scrollbar-color: #3a1c5c #8d71b2;
    scroll-behavior: smooth;
    border-radius:15px;
    margin-bottom:40px;
    
    }
}
.updates div {
    position:absolute;
    text-align:left;
 
}
.announcements {
    background-color:#cc97c0;
    color:#5c1c46;
    position:relative;
    height:200px;
    width:60%;
    overflow-y:scroll;
    font-size:20px;
    padding:15px;
    outline: 7px inset #a64c8e;
    scrollbar-color: #5c1c46 #b27199;
    scroll-behavior: smooth;
    border-radius:15px;
}
.announcements div {
    position:absolute;
    text-align:left;
}
.updates h2, .announcements h2{
    text-align:center;
}



/*--Comic Page Specific Stuff--*/
header {
    position:fixed;
      }
.nav-barcom {
    position:fixed;
    font-size:35px;
  }
.writePageTitle {
    color:#be2f2f;
    background-color:#e0e08b;
    width:300px;
    border-radius:15px;
    padding:10px;
}
/*--Comic Pages--*/
/* 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: 625px;
  max-width: 100%;
}
/* style author notes */
#authorNotes {
  background-color:#ae97cc;
  outline: 3px solid #000000;
    color:#3a1c5c;
  margin: auto;
  padding: 3px;
  padding-top: 0px;
  width: 900px;
  max-width: 100%;
}
.dropdown2 {
    position:fixed;
    display:inline-block;
    z-index:20;
    top:10px;
}
.dropbutton2 {
    padding:0px;
    cursor:pointer;
    border:none;
    border-radius:15px;
    margin:15px;
    width:40%;
    height:100px;
    background-color: #580272;
}
.comicLogo {
   width:500px;
    padding-bottom:30px;
}

/*--Archive Page--*/
/* style table in which archive is displayed */
.archiveTable {
  width: 90%;
  border-collapse:collapse;
}
/* style archive table cells */
.archiveTable td {
  padding: 2px;
  vertical-align: central;
}
/* style table cell in which page title is displayed */
.archiveCellTitle:not(.leftAlignTableText) {
  max-width: 300px;
  text-align: center;
}
.archiveCellDate {
  text-align: right;
  min-width: 50px;   
}
.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: #7e37da;
  cursor: pointer;
}



/*--Art Gallery(Solaria Tutorial/W3 Schools)--*/
.gallery {
  width: 970px;
  display: flex;
  flex-wrap: wrap;
  justify-content:center;
    margin-top:150px;
    margin-left:370px; 
}
.gallery img {
  width: 175px;
  height: 175px;
  object-fit: cover;
  border: 2px solid #8154c4;
  background: #a993c9;
    cursor:pointer;
}
.gallery aside {
    text-align:center;
    color:rebeccapurple;
    background-color: #ae97cc;
    outline: 3px solid purple;
    margin:8px;padding:10px;
}
.gallery img:hover {
    object-fit: contain;
    border:4px solid #8154c4;
}
.buttons2 {
    display:flex;
    flex-direction:column;
    position:fixed;
    top:280px;
    width:230px;
    margin-left:30px;
    z-index:3;
}
.buttons2 div {
    text-align:center;
    font-size:25px;
    background-color:#3a1c5c;
    padding:15px;
    margin-bottom:10px;
    border-radius:20px;
    border-style:inset;
    border-color:#764ca6;
}
.artdesc {
  padding: 15px;
  text-align: center;
}
.responsive {
  padding: 0 6px;
  float: left;
  width: 20%;
}
.desc{
    visibility:hidden;
    font-size:0px;
}
.modal {
  display: none;
  position: fixed;
  z-index: 30;
  padding-top: 100px;
    left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* Enable scroll if needed */
  background-color: rgb(0,0,0); /* Fallback color */
  background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 650px;
}
/* Caption of Modal Image */
#caption {
  margin: auto;
  display: block;
  width: 80%;
  max-width: 700px;
  text-align: center;
    font-size:20px;
  color: #ccc;
  padding: 10px 0;
  height: 150px;
}
/* Add Animation */
.modal-content, #caption {  
  -webkit-animation-name: zoom;
  -webkit-animation-duration: 0.6s;
  animation-name: zoom;
  animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
  from {transform:scale(0)} 
  to {transform:scale(1)}
}
@keyframes zoom {
  from {transform:scale(0.1)} 
  to {transform:scale(1)}
}
/* The Close Button */
.close {
  position: absolute;
  top: 15px;
  right: 35px;
  color: #f1f1f1;
  font-size: 40px;
  font-weight: bold;
  transition: 0.3s;
}
.close:hover,
.close:focus {
  color: #bbb;
  text-decoration: none;
  cursor: pointer;
}


/*--General Subpages--*/
.subPage {
  width: 1000px;
  max-width: 50%;
  background-color: #ae97cc;
  outline: 3px solid #3a1c5c;
  margin:auto;
  margin-top: 150px;
    margin-left:400px;
    color:#3a1c5c;
  padding: 2px 2px 2px;
}
.subPage:not(.archivePage) {
  text-align: left; 
    padding:15px;
}
.subPage h1,h3 {
    text-align:center;
}
.subPage p {
    font-size:20px;
}
/* for pictures displayed to the left */
.leftPic {
  clear: right;
  float:left;
    width:200px;
  margin-left:5px;
    margin-right:20px;
    
}
/* for pictures displayed to the right */
.rightPic {
  clear: left;
  float:right;
  margin-left:20px;
    width:200px;
    margin-right:5px;
}
/* specific to Characters */
.charTable, .charTable td {
  width: 100%;
}
.charTable p {
    font-size:20px;
    padding:15px;
    text-align:left;
}


/*--Responsive Stuff--*/
@media only screen and (max-width: 1200px) {
    .logoimg {
        visibility:hidden;
    }
    .headimg {
        visibility:hidden;
    }
    .nav-bar {
        visibility:hidden;
    }
    .buttons {
        visibility:hidden;
    }
    .buttons2 {
        position:inherit;
        margin-left:250px;
        
    }
    .dropdown {
        visibility:visible;
    }
    .flexcontain {
        width:120%;
        padding-left:50px;
        padding-top:150px;
    }
    .subPage {
        margin-left:200px;
        margin-top:50px;
    }
    .gallery {
        margin-top:20px;
    margin-left:170px; 
    }
}
@media only screen and (max-width: 700px){
  .modal-content {
    width: 100%;
  }
    .dropdown2 {
       width:35%;
    }
    .dropbutton2 {
        height:70px;
        margin-top:0px;
    }
    .gallery aside {
        width:30%;
        max-height:150px;
        overflow-y:scroll;
    }
}
@media only screen and (max-width: 500px){
    .dropbutton2 {
        height:50px;
        margin-top:0px;
    }
}