:root {
 --r: calc(9/16);
 --fs: 0.96rem;
 --border: 1px #e6a835 solid;
 --body: 100vw;
 --nav: 17vw;
 --links: 17vw;
 --main: calc(var(--body) - var(--nav) - var(--links) - 2vw);
 --hmain: calc(var(--nav) + var(--main));
 --_: 4vw;
 --i_: 0.7vw;
 --cols: 4;
 --sc: 0.12vw;
 --navm: calc((var(--nav) - var(--thumb) - var(--sc))/2);
 --thumb: calc(var(--nav) - (var(--_)*0.5));
 --gal: calc(var(--main) - var(--_) + 0.4vw);
 --img: calc((var(--gal) - (var(--i_)*(var(--cols) - 1)))/var(--cols)) ;
 --alt: calc((var(--gal) - (3 * var(--i_)))/4);

 --col1_0: #000;
 --col1_1: #282828;
 --col1_2: #333;

 --col2_0: #122412;
 --col2_1: #283828;
 --col2_2: #324232;

 --col3_0: #000;
 --col3_1: #282828;
 --col3_2: #333;
}

section.posts {
 background-color: var(--col2_0);
 border-right: var(--col2_1);
}
main {
 background-color: var(--col1_0);
 border-right: var(--col1_1);
}

body {
 margin: 0 auto;
 display: grid;
 grid-template-columns: var(--main) var(--nav) var(--links);
 color: #bbb;
 background-color: var(--col2_0);
 font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
 font-size: calc(var(--fs)*0.82);
}
a {
 color: #ccc;
}
a:hover {
 color: #fff;
}
a.zoom, a div, div.gallery a {
 overflow: hidden;
}
a.zoom img, a div img, div.gallery a img {
 border-radius: inherit;
 object-fit: cover;
 transition-property: scale, rotate;
 transition-duration: 1s;
}
a.zoom:hover img, a:hover div img, div.gallery a:hover img {
 scale: 1.2;
}
section.posts {
 display: grid;
 width: var(--nav);
 /* height: 100vh; */
 align-content: baseline;
 text-align: center;
}
main a.logo, main.home h1 {
 margin: 0 auto;
 width: calc(var(--main)*0.7);
 padding: 0.8vw 0 0.4vw 0;
 border-radius: 0 0 8vw 8vw;
 color: #ffb;
 background-color: #020;
 border-left: 1px #996 solid;
 border-right: 1px #996 solid;
 border-bottom: 1px #996 solid;
 font-weight: normal;
 font-size: calc(var(--fs)*1.24);
 text-align: center;
 text-decoration: none;
}
main a.logo:hover {
 color: #fff;
 border-left: 1px #ccc solid;
 border-right: 1px #ccc solid;
 border-bottom: 1px #ccc solid;
 background-color: #030;
}

nav.gals {
 width: var(--nav);
 display: inherit;
}
section.posts p.new {
 font-size: calc(var(--fs)*1.02);
}
nav.gals a {
 margin: 0 0 0 var(--navm);
 display: grid;
 width: var(--thumb);
 border-radius: 1vw;
 color: #ccc;
 text-decoration: none;
}
nav.gals a:hover {
 color: #fff;
}
nav.gals div {
 border-radius: 0.8vw;
}
nav.gals div img {
 width: var(--thumb);
 height: calc(var(--thumb)/1.64);
 object-fit: cover;
 border-radius: inherit;
}
nav.gals span {
 margin: 0.2vw auto 1vw auto;
 width: var(--thumb);
}

main {
 display: inherit;
 align-content: baseline;
}
main h1 {
 width: var(--gal);
 margin: 1vw auto 0 auto;
 font-weight: normal;
 font-size: calc(var(--fs)*1.16);
 text-align: center;
}
main h2 {
 margin: 1vw 1vw 1vw 2vw;
 font-size: calc(var(--fs)*1.08);
 font-weight: normal;
}
main article {
 display: inherit;
}
article p {
 color: #aaa;
}
p.relcat a {
 font-size: calc(var(--fs)*1.02);
}
article p.intro {
 display: inline-block;
 margin-top: 2vh;
}
div.gallery, nav.galleries {
 width: var(--gal);
 margin: 0.8vh auto 0.8vh auto;
 display: inherit;
 grid-template-columns: repeat(auto-fit, var(--img));
 gap: var(--i_);
}
div.gallery {
 margin: 0.8vh auto 4vh auto;
}
div.gallery a {
 display: inherit;
 border-radius: 0.5vw;
 color: #ccc;
 text-decoration: none;
}
div a:hover {
 color: #fff;
}
div a img {
 width: var(--img);
}
article a div, nav.galleries a div {
 width: var(--img);
 height: calc(var(--img)*1.8);
 border-radius: 0.7vw;
}
article a div img, nav.galleries a div img {
 width: inherit;
 height: inherit;
 object-fit: cover;
 border-radius: inherit;
}
article span, nav.galleries span {
 margin: 1vw auto 2vw auto;
 width: var(--img);
}
div#alt {
 grid-template-columns: repeat(auto-fit, var(--img));
}
div#alt div {
 width: var(--alt);
 border-radius: 0.5vw;
}
div#alt div img {
 width: inherit;
 height: calc(var(--alt)*1.6);
 border-radius: 0.5vw;
}
div#alt a {
 color: #fff;
 text-decoration: none;
}
div#alt span {
 margin: 1vw auto;
}
nav.browse {
 display: grid;
 grid-template-columns: auto auto;
 width: calc(var(--img)*2.4);
 margin: 4vh auto;
 border: none;
 text-align: center;
}
nav.browse a {
 margin: 0 auto;
 width: var(--img);
 color: #ccc;
 border-radius: 1vw;
 text-decoration: none;
}
nav.browse a div {
 display: inherit;
 width: inherit;
 height: calc(var(--img)*1.32);
 overflow: hidden;
 border-radius: inherit;
}
nav.browse a div img {
 width: inherit;
 height: inherit;
 border-radius: inherit;
 object-fit: cover;
}
nav.browse a span {
 display: grid;
 height: 4vh;
 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.28rem;
 color: #fff;
 text-decoration: none;
}
main p {
 display: block;
 width: var(--gal);
 margin: 1.2vw auto 1vw auto;
}
main article p {
 text-align: left;
 margin: 0.2vh auto;
}
article p a {
 color: #ccc;
}
article p a:hover {
 color: #fff;
}
main article p.relcat {
 margin-top: 1.4vh;
}
nav.pager {
 margin: 2rem 0 4rem 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;
}
section.links {
 background-color: var(--col1_0);
 border-right: var(--col1_1);
 display: block;
 text-align: center;
}
section.links a {
 color: #ccc;
 text-decoration: none;
}
section.links a:hover {
 color: #fff;
 background-color: #000;
}
nav.categories {
 display: grid;
 margin: 0.2rem auto 0.2rem auto;
 color: #ccc;
 font-size: calc(var(--fs)*0.92);
}
nav.categories a {
 display: inline-block;
 margin: 0.16rem auto;
}
nav.categories span {
 display: inline-block;
 margin: 0.32rem auto 0.16rem auto;
 color: #ff6;
}
nav.categories span.post {
 margin: 0.48rem auto 0.12rem auto;
}
aside a#patreon {
 display: block;
 width: calc(var(--links)*0.8);
 margin: 0.8rem auto;
 border-radius: 1vh;
 text-decoration: none;
}
aside a#patreon div {
 width: inherit;
 border-radius: inherit;
}
aside a#patreon div img {
 width: inherit;
 border-radius: inherit;
}
aside a#patreon:hover div img {
 scale: 1.42
}
img.rss {
 width: 14%
}
img.odysee {
 width: 20%
}
p.add {
 width: 48%;
 margin: auto;
 font-size: calc(var(--fs)*0.86);
 color: #eee;
 background-color: #040;
 border-radius: 4.2vw;
 padding: 1vw;
 text-align: center
}
p.info {
 width: auto;
 margin: 1rem auto;
 font-size: calc(var(--fs)*0.78);
 color: #aaa;
 text-align: center
}
p.info a {
 display: inline;
 font-size: calc(var(--fs)*0.78);
}


/* order: nav main links
body {
 grid-template-columns: var(--nav) var(--main) var(--links);
}
section.links {
 background-color: var(--bg);
}
section.posts {
 order: 1;
}
main {
 order: 2;
}
section.links {
 order: 3;
} */




/* mobile */
@media only screen and (max-width: 768px) {
 :root {
  --border: 1px #e6a835 solid;
  --nav: 96vw;
  --main: 96vw;
  --links: 96vw;
  --_: 4vw;
  --i_: 1vw;
  --cols: 2;
  --thumb: calc(var(--nav)/3.8);
  --gal: calc(var(--main) - 2vw);
  --img: calc((var(--gal) - ((var(--cols) - 1) * var(--i_)))/var(--cols));
  --alt: calc((var(--gal) - var(--i_))/2);
  --bg: #020;
 }
 body {
  display: grid;
  grid-template-columns: auto;
  font-size: calc(var(--fs)*0.88);
 }
 section.posts {
  display: grid;
  width: var(--main);
  height: auto;
  border-left: none;
  border-right: none;
  background-color: var(--bg);
 }
 section.links {
  display: block;
  width: var(--main);
  height: auto;
  border-left: none;
  border-right: none;
  background-color: var(--col3_0);
  font-size: calc(var(--fs)*0.84);
 }
 main a.logo, main.home h1 {
  margin: 0 auto 1vh auto;
  font-size: calc(var(--fs)*1.12);
  padding: 1vw 0 0.8vw 0;
 }
 section.posts p {
  font-size: calc(var(--fs)*0.84);
 }
 section nav.categories {
   margin: 2rem auto;
   font-size: calc(0.72rem + 0.72vw);
 }
 nav.gals {
  display: grid;
  grid-template-columns: auto auto auto;
  gap: 0.6vw;
  width: var(--main);
  font-size: calc(var(--fs)*0.84);
 }
 nav.gals a {
  display: inherit;
  width: calc(var(--main)/3 - 2vw);
  height: auto;
  margin: auto;
  border-radius: 1vw;
 }
 nav.gals a div {
  display: inherit;
  width: inherit;
  height: calc(var(--main)/3/(var(--r)));
  border-radius: inherit;
 }
 nav.gals a div img {
  width: inherit;
  height: inherit;
  object-fit: cover;
  transition: 1s;
  transition-property: scale;
  border-radius: inherit;
 }
 nav.gals a:hover div img {
  scale: 1.2;
 }
 nav.gals a span {
  display: grid;
  height: 2.8rem;
  color: #ccc;
  text-decoration: none;
 }
 nav.gals a:hover span {
  color: #fff;
 }
 nav.categories {
  font-size: calc(var(--fs)*0.88);
 }
 nav.categories a {
  margin: 0.28rem auto;
 }
 main {
  width: var(--main);
  border-right: none;
  background-color: var(--col2_0);
 }
 main h1 {
  margin: 3.2vh 1vw 1vh 2vw;
  font-size: calc(var(--fs)*1.12);
 }
 main h2 {
  margin: 2.4vh 1.6vw 1vh 1.6vw;
  font-size: calc(var(--fs)*1);
 }
 main a {
  border-radius: 4vw;
 }
 main a div img {
  border-radius: 4vw;
 }
 div.gallery {
  width: var(--gal);
  height: auto;
  margin: 2vh auto 3vh auto;
  display: grid;
  grid-template-columns: auto auto;
  gap: var(--i_);
 }
 div.gallery a {
  display: grid;
 }
 div.gallery a img {
  width: var(--img);
 }

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


 nav.browse {
  width: calc(var(--img)*1.8);
 }
 nav.browse a {
  width: calc(var(--img)*0.8);
 }
 nav.browse a div {
  width: inherit;
  height: calc(var(--img)*1.4);
 }
 nav.browse a div img {
  width: inherit;
  height: inherit;
 }
 nav.browse a span {
  height: 5vh;
 }
 img.rss {
  width: 12%;
 }
 img.odysee {
  width: 18%;
 }

 /* main {
  order: 1;
 }
 section.posts {
  order: 2;
 }
 section.links {
  order: 3;
 } */
}