:root {
 --r: calc(4/3);
 --border: 1px #e6a835 solid;
 --body: 98vw;
 --nav: 18vw;
 --aside: 17vw;
 --main: calc(var(--body) - var(--nav) - var(--aside));
 --hmain: calc(var(--nav) + var(--main));
 --_: 4vw;
 --i_: 1vw;
 --cols: 4;
 --navm: calc((var(--nav) - var(--thumb) - var(--sc))/2);
 --thumb: calc(var(--nav) - var(--_));
 --section: calc(var(--main) - var(--_) + 0.4vw);
 /* --img: calc((var(--section) - ((var(--cols) - 1) * var(--i_)))/var(--cols)); */
 --img: calc((var(--section) - (var(--i_)*(var(--cols) - 1)))/var(--cols)) ;
 --alt: calc((var(--section) - (3 * var(--i_)))/4);
 --sc: 1vw;
 --col1_0: #000;
 --col1_1: #282828;
 --col1_2: #333;
 --col2_0: #122412;
 --col2_1: #283828;
 --col2_2: #324232;
}
body {
 margin: 0 auto;
 width: var(--body);
 height: 100vh;
 display: grid;
 overflow: hidden;
 grid-template-columns: var(--nav) var(--main) var(--aside);
 background-color: var(--col1_0);
 color: #ccc;
 /* font-family: 'Courier New', Courier, monospace; */
 font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
 font-size: calc(0.4rem + 0.4vw);
}
a {
 color: #ccc;
}
a:hover {
 color: #fff;
}
a.zoom, a picture, section.gallery a {
 overflow: hidden;
}
a.zoom img, a picture img, section.gallery a img {
 border-radius: inherit;
 object-fit: cover;
 transition-property: scale, rotate;
 transition-duration: 1s;
}
a.zoom:hover img, a:hover picture img, section.gallery a:hover img {
 scale: 1.2;
}
aside.header {
 display: grid;
 width: var(--nav);
 height: 100vh;
 align-content: baseline;
 overflow-x: none;
 overflow-y: scroll;
 background-color: var(--col2_0);
 border-right: var(--col2_0);
 text-align: center;
}
aside.header a.logo {
 margin: 0.8vw var(--navm) 0.2vw var(--navm);
 padding: 0.7vw;
 width: calc(var(--thumb) - 1.4vw);
 border-radius: 1.6vw;
 color: #ddd;
 border: 1px #ccc solid;
 font-weight: normal;
 font-size: calc(0.48rem + 0.48vw);
 text-align: center;
 text-decoration: none;
}
aside.header a.logo:hover {
 color: #fff;
 border: 1px #fff solid;
 background-color: #030;
}



nav.gals {
 width: var(--nav);
 display: inherit;
}
nav.gals a {
 margin: 0 0 0 var(--navm);
 display: grid;
 width: var(--thumb);
 border-radius: 1vw;
 color: #fff;
 text-decoration: none;
}
nav.gals picture {
 border-radius: 0.8vw;
}
nav.gals picture img {
 width: var(--thumb);
 height: calc(var(--thumb) / 1.32);
 object-fit: cover;
 border-radius: inherit;
}
nav.gals span {
 margin: 0.2vw auto 1vw auto;
 width: var(--thumb);
}



main {
 display: inherit;
 height: 100vh;
 overflow-x: none;
 overflow-y: scroll;
 align-content: baseline;
 border-right: var(--col1_0);
}
main h1 {
 width: var(--section);
 margin: 1vw auto 0 auto;
 font-weight: normal;
 font-size: calc(0.6rem + 0.6vw);
 text-align: left;
}
main h2 {
 margin: 1vw 1vw 1vw 2vw;
 font-size: calc(0.5rem + 0.5vw);
 font-weight: normal;
}
section {
 width: var(--section);
 margin: 0 auto;
 display: inherit;
 grid-template-columns: repeat(auto-fit, var(--img));
 gap: var(--i_);
}
section a {
 display: inherit;
 border-radius: 0.5vw;
 color: #ccc;
 text-decoration: none;
}
section a:hover {
 color: #fff;
}
section a img {
 width: var(--img);
}
main a picture {
 width: var(--img);
 height: calc(var(--img)*1.76);
 border-radius: 0.7vw;
}
main a picture img {
 width: inherit;
 height: inherit;
 object-fit: cover;
 border-radius: inherit;
}
main span {
 margin: 1vw auto 2vw auto;
 width: var(--img);
}
section#alt {
 grid-template-columns: repeat(auto-fit, var(--img));
}
section#alt picture {
 width: var(--alt);
 border-radius: 0.5vw;
}
section#alt picture img {
 width: inherit;
 height: calc(var(--alt)*1.6);
 border-radius: 0.5vw;
}
section#alt a {
 color: #fff;
 text-decoration: none;
}
section#alt span {
 margin: 1vw auto;
}
nav.browse {
 display: grid;
 grid-template-columns: auto auto;
 width: var(--section);
 margin: 4vh auto;
 height: calc(var(--thumb)*1.4);
 grid-template-columns: auto auto;
 border: none;
 text-align: center;
}
nav.browse a {
 margin: auto;
 width: calc(var(--section)*0.32);
 color: #ccc;
 border-radius: 1vw;
 text-decoration: none;
}
nav.browse a picture {
 display: inherit;
 width: inherit;
 height: var(--img);
 overflow: hidden;
 border-radius: inherit;
}
nav.browse a picture img {
 width: inherit;
 border-radius: inherit;
 object-fit: cover;
}
nav.browse a span {
 display: grid;
 margin: 1vw auto;
}
nav.browse a span.next {
 margin: 0.2vw auto;
}
nav.browse a span {
 width: inherit;
}
span.next, span.previous {
 font-size: 1.2rem;
 color: #fff;
 text-decoration: none;
}
main article {
 display: block;
 width: var(--section);
 margin: 1.6vw auto 2vw auto;
}
main p {
 display: block;
 width: var(--section);
 margin: 1.2vw auto 1vw auto;
}
main article p {
 margin: 0.2vh auto;
}
article p a {
 color: #ccc;
}
article p a:hover {
 color: #fff;
}
nav.pager {
 margin: 0.2rem 0 3rem 0;
 display: block;
 font-size: 1.32rem;
 text-align: center;
}
nav.pager a, nav.pager span {
 display: inline;
 border: 1px solid #ccc;
 border-radius: 2rem;
 padding: 0.8rem 1.2rem;
}
nav.pager a {
 color: #ccc;
 background-color: #131;
}
nav.pager a:hover {
 color: #fff;
 background-color: #242;
}
aside.links {
 display: grid;
 height: 100vh;
 overflow-x: none;
 overflow-y: scroll;
 background-color: var(--col2_0);
 text-align: center;
}
aside.links a {
 color: #ccc;
 text-decoration: none;
}
aside.links a:hover {
 color: #fff;
 background-color: #000;
}
aside nav.categories {
 display: inherit;
 margin: 0.2rem auto 0.2rem auto;
 color: #ccc;
 font-size: calc(0.42rem + 0.42vw);
}
aside nav.categories a {
 display: inline-block;
 margin: 0.12rem auto;
}
aside nav.categories span {
 display: inline-block;
 margin: 0.3rem auto 0.12rem auto;
 color: #ff6;
}
aside nav.categories span.posts {
 margin: 0.48rem auto 0.12rem auto;
}
aside a#patreon {
 display: grid;
 width: calc(var(--aside)*0.8);
 margin: 0.8rem auto;
 border-radius: 1vh;
 text-decoration: none;
}
aside a#patreon picture {
 width: inherit;
 border-radius: inherit;
}
aside a#patreon picture img {
 width: inherit;
 border-radius: inherit;
}
aside a#patreon:hover picture img {
 scale: 1.42;
}
p.add {
 width: 68%;
 margin: auto;
 font-size: 0.8rem;
 color: #eee;
 background-color: #040;
 border-radius: 4.2vw;
 padding: 1vw;
 text-align: center;
}
p.info {
 width: auto;
 margin: 1rem auto;
 font-size: 0.5rem;
 color: #aaa;
 text-align: center;
}
p.info a {
 display: inline;
 font-size: 0.5rem;
}
::-webkit-scrollbar {
 width: 1vw;
}
::-webkit-scrollbar-button {
 display: none;
}
::-webkit-scrollbar-track {
 background: var(--col1_0);
}
::-webkit-scrollbar-thumb {
 background: var(--col1_1);
}
::-webkit-scrollbar-thumb:hover {
 background: var(--col1_2);
}
::-webkit-scrollbar-corner {
 background: var(--col1_0);
}
.header::-webkit-scrollbar-track,
.links::-webkit-scrollbar-track {
 background: var(--col2_0);
}
.header::-webkit-scrollbar-thumb,
.links::-webkit-scrollbar-thumb {
 background: var(--col2_1);
}
.header::-webkit-scrollbar-thumb:hover,
.links::-webkit-scrollbar-thumb:hover {
 background: var(--col2_2);
}
.header::-webkit-scrollbar-corner,
.links::-webkit-scrollbar-corner {
 background: var(--col2_0);
}

/* mobile */
@media only screen and (max-width: 768px) {
 :root {
  --border: 1px #e6a835 solid;
  --nav: 96vw;
  --main: 96vw;
  --aside: 96vw;
  --_: 4vw;
  --i_: 1vw;
  --cols: 2;
  --thumb: calc(var(--nav)/3.8);
  --section: calc(var(--main) - 2vw);
  --img: calc((var(--section) - ((var(--cols) - 1) * var(--i_)))/var(--cols));
  --alt: calc((var(--section) - var(--i_))/2);
 }
 body {
  width: 99vw;
  height: auto;
  overflow-y: scroll;
  overflow-x: hidden;
  display: grid;
  grid-template-columns: auto;
  font-size: calc(0.5rem + 0.5vw);
 }

 aside.header, aside.links {
  display: grid;
  width: var(--main);
  height: auto;
  border-left: none;
  border-right: none;
  overflow-x: hidden;
  overflow-y: hidden;
 }
 aside.header a.logo {
  width: auto;
  margin: 1vh auto;
  font-size: calc(0.9rem + 0.9vw);
  padding: 1.2vh 6.8vw;
  border-radius: 4.2vw;
 }
 aside.header p {
  font-size: calc(0.7rem + 0.7vw);
 }

 aside nav.categories {
   margin: 1.6rem auto;
   font-size: calc(0.72rem + 0.72vw);
 }

 nav.gals {
  display: block;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  align-content: start;
  font-size: calc(0.58rem + 0.58vw);
 }
 nav.gals a {
  display: inline-block;
  width: var(--thumb);
  height: calc(var(--thumb)*2.2);
  margin: 0 0.5vw 1vw 0.5vw;
  border-radius: 1vw;
  white-space: wrap;
 }
 nav.gals a picture {
  display: inherit;
  width: inherit;
  height: calc(var(--thumb)*1.6);
  overflow: hidden;
  border-radius: inherit;
 }
 nav.gals a picture img {
  width: inherit;
  height: inherit;
  object-fit: cover;
  transition: 1s;
  transition-property: scale, rotate;
  border-radius: inherit;
 }
 nav.gals a:hover picture img {
  scale: 1.2;
 }
 nav.gals a:hover {
  background-color: #000;
 }
 nav.gals a span {
  display: grid;
  height: calc(var(--thumb)*0.4);
  color: #fff;
  text-decoration: none;
 }



 main {
  width: var(--main);
  height: auto;
  overflow-x: hidden;
  overflow-y: hidden;
  border-right: none;
 }
 main h1 {
  margin: 3.2vh 1vw 1vh 2vw;
  font-size: calc(0.6rem + 0.6vw);
 }
 main h2 {
  margin: 2.4vh 1vw 1vh 2vw;
  font-size: calc(0.5rem + 0.5vw);
 }
 section {
  width: var(--section);
  height: auto;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto auto;
  gap: var(--i_);
 }
 section a {
  display: grid;
 }

 section a img {
  width: var(--img);
 }
 section#alt {
  grid-template-columns: auto auto;
 }
 main p {
  margin: 2vh 1vh;
 }
 a.zoom img:hover, a:hover picture img, section.gallery a:hover img {
  scale: 1.2;
 }
 nav.pager {
  margin: 1.2rem 0 2rem 0;
 }
 p.info a {
  font-size: 0.6rem;
 }
}