@font-face {
    font-family: REDENSEK;
    src: url(/../pageassets/font/REDENSEK.TTF);
}
@font-face {
    font-family: Droid;
    src: url(/../pageassets/font/DroidSans.ttf);
}

html, body {
  margin:0;
  padding:0;
  background-image:url("/../pageassets/stars5.gif");
  font-family:Droid, sans-serif;
  font-size:15px;
  line-height:1.3em;
  color:#DBDEE1;
}
body a {
  color:#FAB615;
  font-weight:bold;
  text-decoration:none;
}
a:hover {
  color:#DBDEE1;
  text-decoration:underline;
}
h1 {
  font-family:REDENSEK, sans-serif;
  font-size:60px;
  line-height: 40px;
}
h2 {
  font-family:REDENSEK, sans-serif;
  font-size:35px;
  line-height: 40px;
}
h3 {
  font-family:REDENSEK, sans-serif;
  font-size:25px;
}
#main-container {
  max-width:1500px;
  margin:0 auto;
  background-color:#0D0D0D;
}
.flex {
  display:flex;
  margin-bottom:5px;
}

#content-container {
  width:60%;
  margin-bottom:5px;
  background-color:#0D0D0D;
  border: 1px solid #fff;
}
#left-sidebar {
  width:350px;
  margin-right:10px;
  margin-bottom:5px;
  height:auto;
  overflow:auto;
  background-color:#0D0D0D;
  border: 1px solid #fff;
}
#right-sidebar {
  width:350px;
  margin-left:10px;
  margin-bottom:5px;
  height:auto;
  overflow:auto;
  background-color:#0D0D0D;
  border: 1px solid #fff;
}
#header-contained {
  height:200px;
  margin-bottom:0px;
  background-image:url('/../pageassets/banner.png');;
  background-position:center center;
  border: 1px solid #fff;
}
#footer {
  height:300px;
  text-align:center;
  color:#DBDEE1;
}
#navbar-contained {
  navitems-alignment:center;
  space-between-navitems:30px;
  navbar-margin-bottom:10px;
  nav-bg-color:#0D0D0D;
}

/*Windows 95 Bar*/
#windows {
    width:var(--content-container);
      background-color: #FAB615;
      margin: 2px;
      color: #fff;
      background-image: url('/../pageassets/window%20buttons.png');
      background-repeat: no-repeat;
      background-position: top right;
      padding: 10px 10px 10px 10px;
      font-size: 12px;
}
#link-title
  width:200px; /* this should match the image height */
  height:200px; /* this should match the image width */
  margin-left:25px;
  margin-right:25px; /* this controls the gaps between the images */
  margin-bottom:75px; /* this controls the gaps between the images */
}

/*Grid CSS*/
.grid-container {
  display: grid;
  grid-template-columns: 450px 450px;
  grid-template-rows: 450px 450px;
  grid-gap: 17px;
  background-color: #fff;
  padding: 10px;
}
.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 0px 0;
  font-size: 12px;
  border: 1px solid #fff;
}
.nav {
  margin-left:0;
  text-align:center;
  margin-top:0;
  margin-bottom:10px;
  padding-top:1em;
  padding-bottom:1em;
  background-color:#0D0D0D;
  border: 1px solid #fff;
}
.nav li {
   display: inline-block;
                padding-right:30px;
                font-size:35px;
                padding-left:1.2em;
                padding-right:1.2em;
                padding-bottom:0.3em;
              margin-bottom:0.3em;
              font-family:REDENSEK, sans-serif;
}
.wrapper {
  padding:25px;
  padding-top:15px;
}
.sidebar-wrapper {
  padding:15px;
  height:auto;
  overflow:auto;
}
.footer-wrapper {
  padding:5px;
}
/*Latest Artwork Thumbnail*/
.latestart {
  
}
.latestart img {
  max-width:300px;
  height:auto;
}


/* Style the buttons */
.button {
  border: none;
  outline: none;
  padding: 12px 16px;
  background-color: #f1f1f1;
  cursor: pointer;
  font-family:Redensek, sans-serif;
  font-size: 26pt;
  border: 1px solid #fff;
}
/* Add a light grey background on mouse-over */
.button:hover {
  background-color: #ddd;
}
/* Add a dark background to the active button */
.button:focus {
  background-color: #FAB615;
  color: white;
}
.tablecontainer {
  height:auto;
  margin-left:auto;
  margin-right:auto;
  flex-wrap: wrap;
  display:inline-flex;
  justify-content:space-evenly;
  margin:20px;
}
    
 .tablelink {
  text-align:center;
  vertical-align: middle;
  line-height: 50px;
   width:400px;
  height: 180px;
  background-color: #fff;
  font-family:REDENSEK, sans-serif;
  font-size:200px;
  padding:30px;
  background:black;
  background-repeat: no-repeat;
  background-size: cover;
  margin:15px;
  margin-bottom:90px;
     border:solid 1px #FFBF76;
    }

  #comicwrapper {
   max-width: fit-content;
    height:350px;
    border:solid 1px #A792FC;
    margin:20px;
  }
  
  #comicwrapper:hover {
   
  }
  
  
    #comicimage {
  width:217px;
  height: 305px;
  background:black;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  margin:15px;
  float:left;
  }
  
    #comicimage:hover {
  opacity: 0.5;
  }
  
  #comictext {
    height:50px;
    padding-bottom:10px;
    padding-right:20px;
  }
  
  #comicbottombar {
    margin-top:125px;
  }

    @media only screen and (max-width: 1000px) {
  .flex {
    flex-wrap:wrap;
  }
  #left-sidebar {
    width:100%;
    display:block;
    order:2;
    margin-right:0;
    }
  #right-sidebar {
    width:100%;
    display:block;
    order:3;
    margin-left:0;
  }
  #content-container {
    width:100%;
    display:block;
    order:1;
  }
}