.gallery {
  columns:3;
  gap:20px;
  margin-top:20px
}
.small .gallery, .small.gallery {
  columns:2;
  gap:15px;
  margin:20px}
.gallery.comic {
  columns:1;
  text-align:center;
}
.gallery.comic .item {
  display:inline-block;
  margin:1.5%;
  max-width:500px
}
.gallery.comic.wide .item {
  max-width:100%
}
.gallery.comic.columns .item {
  width:45%;
  min-width:250px
}
.gallery .item {
  display:block;
  break-inside:avoid;
  margin-bottom:15px;
  text-align:center;
  font-size:.85em;
  line-height:1.3em;
  color:var(--dark)
}
.gallery .item a {
  text-underline-offset:1px;
  text-decoration-skip-ink: none;
  text-decoration-color:var(--light);
}
.gallery .item img {
  width:100%;
  margin-bottom:5px
}

@media screen and (max-width:1200px) {
.gallery {
  columns:3
}
.small .gallery, .small.gallery {
  columns:2 }
}

@media screen and (max-width:1000px) {
.gallery {
  columns:2
}
}

@media screen and (max-width:860px) {
.gallery {
  columns:3
}
.small .gallery, .small.gallery {
  columns:2 }
}

@media screen and (max-width:700px) {
.gallery {
  columns:2
}
}

@media screen and (max-width:500px) {
.gallery {
  columns:1
}
}

/* lightbox */


body.no-scroll {
  overflow:hidden
}
body.no-extras .stickers, body.no-extras .blinkies, body.no-extras a {
  z-index:-1
}
    #lightbox {
			position:fixed; /* keeps the lightbox window in the current viewport */
			top:0;
			left:0;
			width:100vw;
			height:100vh;
			background:rgba(0, 0, 0, .7);
			text-align:center;
		}
		#lightbox p {
			text-align:right;
			color:#fff;
			margin-right:50px;
			font-size:30px;
		}
		#lightbox img {
			/* box-shadow:0 0 25px #111; */
			max-width:80vw;
      max-height:80vh;
      width:100%;
      height:100%;
      object-fit:contain;
		}

.gallery img:hover {
  border-radius:5px;
  outline:var(--dark) 1px dashed;
  cursor:crosshair
}
/* .prevnext {
  position:absolute;
  bottom:30px;
  width:100%;
  text-align:center;
  margin:0 auto;
  font-size:30px;
  display:block;
  z-index:100;
  color:var(--white);
  text-shadow:0px 0px 15px var(--black)
}
.prev, .next {
  padding:10px;display:inline-block
} */

.sfw, .nsfw {
  display: block;
  break-inside: avoid;
  margin-bottom: 5px;
  padding-bottom: 5px;
  text-align: center;
  font-size: .85em;
  line-height: 1.3em;
  color: var(--dark);
  font-family: 'dosv';
  background-color:rgb(255, 255, 255, 65%);
}

.sfw a:link, .nsfw a:link {
  color: var(--dark);
  font-family: 'dosv';
  text-decoration: none;
}

.sfw a:hover, .nsfw a:hover {
  font-family: 'dosv';
  text-decoration: none;
  font-weight:bold;
}

#header {
  width: 100%;
  /* header color here! */
  height: 150px;
  /* 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-repeat: repeat;
  border-radius: 5px;
  margin-bottom: 10px;
  border-image:  url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFQAAABUCAYAAAAcaxDBAAACz0lEQVR4Xu2b224CMQxE4f8/uu0DqmAXOB48yWbF9NWJL8cTJ1rU6yV/VgJXq7c4uwSoWQQB+gVAf8QalxLFUsncQAaoqChaHqBESLR/PdAugO1+dQzR/m5+kh7U5J857yZMQKgg2t/Nj+I/2AN0j6vFpLXZdCuTwkghtH95hboLIGDbpquAuv4l0UmLXyjy6IIJGNkpf4mRtDhAqTeXjz6O5Mi/4VpRKAGkttF+sq/uX342nb3g0fkHKEl+Y5cakiPPdIcD3aZgfXb8OVffmRVR3OdMgCj+23iVZNQAlDBpguJRQ1X/JAgpXoDun47U0ChUvGQOByodCTqPB9gJoFSf48hLAQ8ARiEDlAiJ9gAVgdHy6UC3CXWfRVTg0fZWfZUZGqBCiwN0DysKFQRUWTocqHVoVyqavMZaX+XIWwNOhlUJZ60vQM1ftwJ0AlAayl175RiOXNPN/+3+ZwodGnAkqaLvofUFKH8PpQ/QD/YAXQAonSw6UrR/tL2bn32GUsHdhMl/197NL0A3HQjQriRXB0odJruZj+yO8mvZc8svcMu3Oijryb+hm7/9Uuom5EekeezmLwOlnzwo/coHF/Ix057Pd2baARqgZgJmd9MVSjP1bDOT+kGX1tv9n8BoBaRqFrC36gvQfQcD1Kzq4UCtQ9tcvMOdtb7KkbcGdBAw+7DWF6ATfkamZxIJpNIk8jHTvpxCpV8FC6SsBT6JR5cOxc9/gYhf7AO0oPr7JVEoAFNn9nJARxdwNv8P/a4kTx2lE0f7yb66/wClDomXWIAeDZQe+vQOFfPfLT/af2Us/ictLb7toplH7zgVcICqxMRn0eyGSaKTFkehLJVPgNJMpah0hNWc3CNIjS/f8gRIPYIBCkQD9A5QS94vZiopOgolQmZ7V/HmdDR3DoVqEXl1gDIjaUWASrh4cYAyo+9ZseIMPTX9ADW3L0DNQH8BB0YQZM08hTUAAAAASUVORK5CYII=') 28 /  28px / 0 round;
  border-width:  28px;
  border-style:  solid; 
  font-family:dosv;
  box-sizing:border-box;
  background-color:rgb(255, 255, 255, 65%);
}

header nav .button {
  padding: 5px 10px;
  display: block;
  background: #fff;
  box-shadow: 2px 2px 0 rgba(0,0,0,.15),-1px -1px 0 rgba(255,255,255,.3);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  color: #000;
  font-family:dosv;
}

header nav {
  display: flex;
  padding: 10px 10px 0 10px;
}

header {
  z-index: 100;
  position: sticky;
  top: 0;
  box-sizing:border-box;
}

button {
  padding: 5px 10px;
  display: block;
  background: #fff;
  box-shadow: 2px 2px 0 rgba(0,0,0,.15),-1px -1px 0 rgba(255,255,255,.3);
  font-size: 16px;
  font-weight: 600;
  text-decoration: none;
  color: #000;
  font-family:dosv;
}