:root {
  --header-image: url('https://gelatinbox.neocities.org/img/headerframes.png');
  --body-bg-image: url('https://neocities.org/site_thumbnails/11/45/gelatinbox/0064_small.gif.210x158.webp');
  --decor-bg-image: url('https://gelatinbox.neocities.org/img/chessboard.gif');
  --side-bg-image: url('https://gelatinbox.neocities.org/img/cloudy.gif');

  /* colors */
  --content: #43256E;
}

/* FONTS*/

.dotgothic16-regular {
  font-family: "DotGothic16", sans-serif;
  font-weight: 200;
  font-style: normal;
  }
  
  
.sawarabi-mincho-regular {
font-family: "Sawarabi Mincho", serif;
font-weight: 400;
font-style: normal;
}

/* header font */
#showComic, header, h1, h2, h3, h4, h5 {
  font-family: 'Sawarabi Mincho';
}

/* body font */
.subPage p, footer, #authorNotes, .archiveTable {
  font-family: 'DotGothic16', sans-serif;
  font-size: larger;
  padding-left: 5px;
}

body, div, main, section, article {
  box-sizing: border-box; 
}
/* header image */
header img {
  width: 500px;
  max-width: 98%;
}

/* clearfix hack to prevent image overflow. check out the W3Schools page on it. */
.clearfix::after {
  content: "";
  clear: both;
  display: table;
}

/* STYLING FOR SUBPAGES (about, characters, etc) */

/*general*/

.subPage {
  max-width: 98%;
  color: #2B2118;
  background-color: #B3B6B7;
  outline: 3px solid #000000;
  margin: auto;
  margin-bottom: 10px;
  padding: 12px 12px 12px;
}

.subPage a{
  color:#000;
  text-decoration:none;
}

.subPage:not(.archivePage) {
  text-align: left;
}

/* 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: #B3B6B7;
    }

a:hover {
      color: #DA5437;
    }

/* HEADER */
header #nav {
  text-decoration:none;
  font-size: 12px;
  display: inline-block;
  font-family: 'DotGothic16';
  
  background-color: #ffffff;
  outline: 3px solid #000000;
  width: 98%;
  margin: auto;
}

/* HOMEPAGE */

/* 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: 900px;
  max-width: 98%;
}

/* style author notes */
#authorNotes {
  background-color:#ffffff;
  outline: 3px solid #000000;
  margin: auto;
  padding: 3px;
  padding-top: 0px;
  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;
}

/* FOOTER */
footer {
  color: #421a1a;
  margin-top: 12px;
  margin-bottom: 15px;
  float: left;
  width: 100%;
  font-size: 12px;
}

footer p {
  margin: auto;
}

footer a {
  color: #AF9164
}

footer a:hover {
  color: #6F1A07
}

footer img{
height: 150px;

}

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


/*SCROLLBARS*/
::-webkit-scrollbar {
  width: 16px
}

::-webkit-scrollbar-button:end:increment,.classic-colour-scrollbars::-webkit-scrollbar-button:start:decrement {
  display: block;
  width: 16px;
  height: 16px;
  border: 1px solid #000;
  background-color: #dedede;
  box-shadow: inset -1px -1px 0 #787877,inset 1px 1px 0 #fff
}

::-webkit-scrollbar-button:vertical:decrement {
  border-top: 1px solid #000;
  background: linear-gradient(#343463 10%,#a4a4d4 0,#a4a4d4 90%,transparent 0) 49%/1px 10px no-repeat,linear-gradient(transparent 10%,#343463 0,#343463 20%,#a4a4d4 0,#a4a4d4 90%,#343463 0,#343463) 49%/3px 10px no-repeat,linear-gradient(transparent 20%,#343463 0,#343463 30%,#a4a4d4 0,#a4a4d4 50%,#343463 0,#343463) 49%/5px 10px no-repeat,linear-gradient(transparent 30%,#343463 0,#343463 40%,#a4a4d4 0,#a4a4d4 50%,#343463 0,#343463 60%,transparent 0) 49%/7px 10px no-repeat,linear-gradient(transparent 40%,#343463 0,#343463 60%,transparent 0) 49%/9px 10px no-repeat,linear-gradient(transparent 50%,#343463 0,#343463 60%,transparent 0) 49%/11px 10px no-repeat,#dedede
}

::-webkit-scrollbar-button:vertical:increment {
  border-bottom: 1px solid #000;
  background: linear-gradient(0deg,#343463 10%,#a4a4d4 0,#a4a4d4 90%,transparent 0) 49%/1px 10px no-repeat,linear-gradient(0deg,transparent 10%,#343463 0,#343463 20%,#a4a4d4 0,#a4a4d4 90%,#343463 0,#343463) 49%/3px 10px no-repeat,linear-gradient(0deg,transparent 20%,#343463 0,#343463 30%,#a4a4d4 0,#a4a4d4 50%,#343463 0,#343463) 49%/5px 10px no-repeat,linear-gradient(0deg,transparent 30%,#343463 0,#343463 40%,#a4a4d4 0,#a4a4d4 50%,#343463 0,#343463 60%,transparent 0) 49%/7px 10px no-repeat,linear-gradient(0deg,transparent 40%,#343463 0,#343463 60%,transparent 0) 49%/9px 10px no-repeat,linear-gradient(0deg,transparent 50%,#343463 0,#343463 60%,transparent 0) 49%/11px 10px no-repeat,#dedede;
  height: 15px;
  border-bottom: none
}

::-webkit-scrollbar-button:horizontal:decrement {
  background: linear-gradient(90deg,#343463 10%,#a4a4d4 0,#a4a4d4 90%,transparent 0) center 49%/10px 1px no-repeat,linear-gradient(90deg,transparent 10%,#343463 0,#343463 20%,#a4a4d4 0,#a4a4d4 90%,#343463 0,#343463) center 49%/10px 3px no-repeat,linear-gradient(90deg,transparent 20%,#343463 0,#343463 30%,#a4a4d4 0,#a4a4d4 50%,#343463 0,#343463) center 49%/10px 5px no-repeat,linear-gradient(90deg,transparent 30%,#343463 0,#343463 40%,#a4a4d4 0,#a4a4d4 50%,#343463 0,#343463 60%,transparent 0) center 49%/10px 7px no-repeat,linear-gradient(90deg,transparent 40%,#343463 0,#343463 60%,transparent 0) center 49%/10px 9px no-repeat,linear-gradient(90deg,transparent 50%,#343463 0,#343463 60%,transparent 0) center 49%/10px 11px no-repeat,#dedede
}

::-webkit-scrollbar-button:horizontal:increment {
  background: linear-gradient(270deg,#343463 10%,#a4a4d4 0,#a4a4d4 90%,transparent 0) center 49%/10px 1px no-repeat,linear-gradient(270deg,transparent 10%,#343463 0,#343463 20%,#a4a4d4 0,#a4a4d4 90%,#343463 0,#343463) center 49%/10px 3px no-repeat,linear-gradient(270deg,transparent 20%,#343463 0,#343463 30%,#a4a4d4 0,#a4a4d4 50%,#343463 0,#343463) center 49%/10px 5px no-repeat,linear-gradient(270deg,transparent 30%,#343463 0,#343463 40%,#a4a4d4 0,#a4a4d4 50%,#343463 0,#343463 60%,transparent 0) center 49%/10px 7px no-repeat,linear-gradient(270deg,transparent 40%,#343463 0,#343463 60%,transparent 0) center 49%/10px 9px no-repeat,linear-gradient(270deg,transparent 50%,#343463 0,#343463 60%,transparent 0) center 49%/10px 11px no-repeat,#dedede;
  width: 15px;
  border-right: none
}

::-webkit-scrollbar-track {
  background: radial-gradient(circle at .5px .5px,#787877 .5px,transparent 0) 0/4px 2px repeat,radial-gradient(circle at 2.5px 1.5px,#787877 .5px,transparent 0) 0/4px 2px repeat,#dedede
}

::-webkit-scrollbar-track:vertical {
  border-left: 1px solid #000;
  border-right: 1px solid #000
}

::-webkit-scrollbar-track:horizontal {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000
}

::-webkit-scrollbar-thumb {
  width: 14px;
  box-shadow: inset -1px -1px 0 #343463,inset 1px 1px 0 #cdcdfc
}

::-webkit-scrollbar-thumb:vertical {
  border-left: 1px solid #000;
  border-right: 1px solid #000;
  border-top: 1px solid #555655;
  background: linear-gradient(#a4a4d4 10%,#cdcdfc 0,#cdcdfc 20%,#676796 0,#676796 30%,#cdcdfc 0,#cdcdfc 40%,#676796 0,#676796 50%,#cdcdfc 0,#cdcdfc 60%,#676796 0,#676796 70%,#cdcdfc 0,#cdcdfc 80%,#676796 0,#676796 90%,#cdcdfc 0) 49%/5px 10px no-repeat,#aaaaab
}

::-webkit-scrollbar-thumb:horizontal {
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  border-left: 1px solid #555655;
  background: linear-gradient(90deg,#a4a4d4 10%,#cdcdfc 0,#cdcdfc 20%,#676796 0,#676796 30%,#cdcdfc 0,#cdcdfc 40%,#676796 0,#676796 50%,#cdcdfc 0,#cdcdfc 60%,#676796 0,#676796 70%,#cdcdfc 0,#cdcdfc 80%,#676796 0,#676796 90%,#cdcdfc 0) center 49%/10px 5px no-repeat,#aaaaab
}

::-webkit-scrollbar-corner {
  border-top: 1px solid #000;
  border-left: 1px solid #000
}

.overscroll {
  width: 320px;
  height: 240px;
  overflow: scroll;
  display: inline-block;
  position: relative
}

.overscroll .content {
  height: 50vw;
  width: 50vw
}

.overscroll.classic-colour-scrollbars,.overscroll.classic-mono-scrollbars {
  font-family: Times,serif;
  -webkit-font-smoothing: none
}

#banner{
position:absolute;
top:9px;
z-index:5;
width:350px;
display: flex;
justify-content: center;
max-width: 90%;
max-height: 100vh;
margin: auto;
}

#banner:hover{
content:url('https://gelatinbox.neocities.org/img/Gelatinblogonclick.png')
}

body {
  font-family: 'DotGothic16';
  letter-spacing: .1rem;
  font-size: 15px;
  color: #ad9a8b;
  margin: 0;
  padding-top:10px;
  background-color: #08031A;
  /* you can delete the line below if you'd prefer to not use an image */
  background-size: 65px;
  background-image: var(--body-bg-image);
  overflow: scroll;
    }

* {
  box-sizing: border-box;
}
img {
max-width: 100%;
height: auto;
margin-top: 0.5em;
margin-bottom: 0.5em;
}

/*Navigation code*/
#linkbox{
 border-bottom: 1px dashed white;
  padding: 6px 2px 6px 4px;
}
.link {
  text-decoration:none;
  font-size: 12px;
  display: inline-block;
  font-family: 'DotGothic16';
  color: white;
  /*margin: 6px;
*/
}
.link img {
  margin: 6px;
  margin-top: 2px;
  float: left;
  width: 10px;
}

.link:hover .icon {
  /* Change the src attribute to the hovered state icon */
  content: url('https://gelatinbox.neocities.org/img/star1.gif');
}

    /* the "container" is what wraps your entire website */
    /* if you want something (like the header) to be Wider than
the other elements, you will need to move that div outside
of the container */
#container {
  max-width: 1000px;
  /* this is the width of your layout! */
  /* if you change the above value, scroll to the bottom
and change the media query according to the comment! */
  margin: 0 auto;
  /* this centers the entire page */
}

    /* the area below is for all links on your page
EXCEPT for the navigation */
.container a {
  color: #6F1A07;
  font-weight: bolder;
  text-decoration:none;
  /* if you want to remove the underline
you can add a line below here that says:
text-decoration:none; */
}
#container a:hover {
  color: #6F1A07;
  font-weight: bolder;
  /* if you want to remove the underline
you can add a line below here that says:
text-decoration:none; */
}

#header {
  width: 100%;
  background-color: #100C08;
  font-size: 14px;
  /* header color here! */
  height: 125px;
  /* this is only for a background image! */
  /* if you want to put images IN the header, 
you can add them directly to the <div id="header"></div> element! */
  background-image: var(--header-image);
  background-size: 100%;
  background-repeat: no-repeat; 
}

/* top bar - just decorative for now */
#navbar {
  height: 21px;
  background-color: #100C08;
  border: 1px solid #F7F3E3;
  /* navbar color */
  width: 100%;
  background-image: var(--decor-bg-image);
  background-size: 40px;
}
/*for when we wanna add any buttons*/


/* navigation links*/

/*#navbar ul {
  display: flex;
  padding: 0;
  margin: 0;
  list-style-type: none;
  justify-content: space-evenly;
}

#navbar li {
padding-top: 10px;
}

/*#navbar li a {
color: #B3B6B7;
/* navbar text color */
/*font-weight: 200;*/
/*text-decoration: none;*/
/* this removes the underline */
/*}*/

/* navigation link when a link is hovered over */
/*#navbar li a:hover {
color: #6F1A07;
text-decoration: underline;
}
*/
#flex {
display: flex;
}

/* this colors BOTH sidebars
if you want to style them separately,
create styles for #leftSidebar and #rightSidebar */
aside {
background-color: #2B2118;
width: 200px;
padding: 10px;
font-size: smaller;
/* this makes the sidebar text slightly smaller */
}


/* this is the color of the main content area,
between the sidebars! */
main {
background-color: #2B2118;
flex: 1;
padding: 20px;
order: 2;
border: 4px double #F7F3E3;
}


footer {
background-color: #100C08;
/* background color for footer */
width: 100%;
height: 50px;
padding: 5px;
text-align: center;
/* this centers the footer text */
}

h1,
h2,
h3 {
font-family: 'Sawarabi Mincho';
color: #CA3E47;
font-size: 14px;
}

h1 {
font-family: 'Sawarabi Mincho';
font-size: 16px;
}

strong {
/* this styles bold text */
color: #CA3E47;
}

/* this is just a cool box, it's the darker colored one */
.box {
background-color: #100C08;
/*background-image: var(--side-bg-image);*/
border: 4px double #F7F3E3;
padding: 10px;
padding-top: 1px;
color: #B3B6B7;
}
.boxlight {
background-color: #F7F3E3;
/*background-image: var(--side-bg-image);*/
border: 4px double #100C08;
padding: 10px;
padding-top: 1px;
color: #000000;
}
.box a {
  font-weight: bolder;
  text-decoration:none;
}

/*.box img {
object-fit: contain;
/* or
object-fit: cover; */
/*} */

#topBar {
width: 100%;
height: 30px;
padding-top: 20px;
font-size: smaller;
background-color: #100C08;
}

/*. BLOG FORMATTING*/
#postcontainer {
margin: 3em auto;
background-color: #100C08;
border: 2px double #F7F3E3;
/*padding: 10px;*/
/*padding-top: 3px;*/
/*width: 90%;*/
max-width: 700px;
outline-color: white;
/*outline-style: ridge;*/
/*outline-width: 4px;*/
/*outline-offset: 0;*/
}

/*#img {
max-width: 100%;
height: auto;
margin-top: 0.5em;
margin-bottom: 0.5em;
object-fit: contain;
}
*/

#statuscafe {
    padding: .5em;
    background-color: #121420;
    border: 1px solid #6F1A07;
}
#statuscafe-username {
    margin-bottom: .5em;
}
#statuscafe-content {
    margin: 0 1em 0.5em 1em;
}
#content {
padding: 10px 5% 20px 5%;
}
/* BELOW THIS POINT IS MEDIA QUERY */

/* so you wanna change the width of your page? 
by default, the container width is 900px.
in order to keep things responsive, take your new height,
and then subtrack it by 100. use this new number as the 
"max-width" value below
*/

@media only screen and (max-width: 900px) {
  #flex {
    flex-wrap: wrap;
  }

  aside {
    width: 100%;
  }

  /* the order of the items is adjusted here for responsiveness!
  since the sidebars would be too small on a mobile device.
  feel free to play around with the order!
  */
  main {
    order: 2;
  }

  #leftSidebar {
    order: 1;
  }

  #rightSidebar {
    order: 3;
  }


  #navbar ul {
    flex-wrap: wrap;
  }
}