/*
Theme Name: BlankSlate
Theme URI: https://opencollective.com/blankslate
Author: Web Guy
Author URI: https://opencollective.com/blankslate#section-contributors
Description: Donate: https://opencollective.com/blankslate. Learn: https://blankslate.me/. BlankSlate is the definitive WordPress boilerplate starter theme. I've carefully constructed the most clean and minimalist theme possible for designers and developers to use as a base to build websites for clients or to build completely custom themes from scratch. Clean, simple, unstyled, semi-minified, unformatted, and valid code, SEO-friendly, jQuery-enabled, no programmer comments, standardized and as white label as possible, and most importantly, the CSS is reset for cross-browser-compatability, with no intrusive visual CSS styles added whatsoever. A perfect skeleton theme. For support and suggestions, go to: https://github.com/webguyio/blankslate/issues. Thank you.
Tags: accessibility-ready, one-column, two-columns, custom-menu, featured-images, microformats, sticky-post, threaded-comments, translation-ready
Version: 2025
Requires at least: 5.2
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v3 or Later
License URI: https://www.gnu.org/licenses/gpl.html
Text Domain: blankslate

BlankSlate WordPress Theme 2011-2025
BlankSlate is distributed under the terms of the GNU GPL
*/

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline}html{scroll-behavior:smooth}body{line-height:1}a{text-decoration-skip-ink:auto}a[href^="tel"]{color:inherit;text-decoration:none}button{outline:0}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}q{display:inline;font-style:italic}q:before{content:'"';font-style:normal}q:after{content:'"';font-style:normal}textarea,input[type="text"],input[type="button"],input[type="submit"],input[type="reset"],input[type="search"],input[type="password"]{-webkit-appearance:none;appearance:none;border-radius:0}input[type="search"]{-webkit-appearance:textfield}table{border-collapse:collapse;border-spacing:0}th,td{padding:2px}big{font-size:120%}small,sup,sub{font-size:80%}sup{vertical-align:super}sub{vertical-align:sub}dd{margin-left:20px}kbd,tt{font-family:courier;font-size:12px}ins{text-decoration:underline}del,strike,s{text-decoration:line-through}dt{font-weight:bold}address,cite,var{font-style:italic}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.sticky{}.bypostauthor{}.wp-caption{}.wp-caption-text{}.gallery-caption{}.alignright{}.alignleft{}.aligncenter{}
.screen-reader-text{border:0;clip:rect(1px,1px,1px,1px);-webkit-clip-path:inset(50%);clip-path:inset(50%);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute!important;width:1px;word-wrap:normal!important;word-break:normal}
.screen-reader-text:focus{background-color:#f7f7f7;border-radius:3px;box-shadow:0 0 2px 2px rgba(0,0,0,.6);clip:auto!important;-webkit-clip-path:none;clip-path:none;color:#007acc;display:block;font-size:14px;font-size:.875rem;font-weight:700;height:auto;right:5px;line-height:normal;padding:15px 23px 14px;text-decoration:none;top:5px;width:auto;z-index:100000}
.skip-link{left:-9999rem;top:2.5rem;z-index:999999999;text-decoration:underline}
.skip-link:focus{display:block;left:6px;top:7px;font-size:14px;font-weight:600;text-decoration:none;line-height:normal;padding:15px 23px 14px;z-index:100000;right:auto}
.visually-hidden:not(:focus):not(:active), .form-allowed-tags:not(:focus):not(:active){position:absolute !important;height:1px;width:1px;overflow:hidden;clip:rect(1px 1px 1px 1px);clip:rect(1px, 1px, 1px, 1px);white-space:nowrap}


.dosis-nicefont {
  font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}


body{
   background-image: url("https://www.knoxi.art/wp-content/themes/blankslate/background.jpg");
    color:white;
    font-family: "Jost", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}

#container{
 border: 2px #570000 solid;
  background: #000000d6;   
  width: 90%;
  margin: auto;
  border-radius: 10px;
}

#copyright{
    text-align: center;
}

#nav-top{
   margin:0.5vw auto;
  display: flex;
  gap: 10%;
  justify-content: center;
}

.nav-button{
    font-size:2vw;
    font-weight: 200;
    width: 6vw;
    text-align: center;
}
.nav-button a:hover{
    font-weight: 300;
    color:#f00;
    transition:font-weight 0.2s;
}
.nav-button a{
    text-decoration: none;
    color:#b50000;
}

.thumb-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
      gap: 1rem;
      align-items: start;
      margin: 1rem;
    }

    .thumb-item a, .thumb-item img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .thumb-caption {
      margin-top: .35rem;
      font-size: .9rem;
      line-height: 1.2;
      color: #333;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      text-align: center;
    }
    .thumb-pagination {
      display: flex;
      justify-content: space-between;
      gap: .5rem;
      margin: 2rem 0 1rem;
    }
    .thumb-item {
  overflow: hidden;
  border-radius: 10px;
  border: 1px solid red;
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.6);
  background: #f4f4f5;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.thumb-item:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px rgba(255, 0, 0, 0.9);
}

.page-title, .entry-title {
  font-size: 3rem;
  font-weight: 200;
  margin: 1rem;
}

.thumb-caption a{
    text-decoration: none;
  color: #b50000;
  font-size: 1.5rem;
}


.entry-content {
  display: flex;
  justify-content: center;
}

    .comic-reader { max-width: 960px; margin: 0 auto; padding: 24px; }
    .comic-title { margin: 0 0 12px; font-size: clamp(20px,3vw,32px); line-height: 1.2; }
    .comic-content img { max-height: 90vh; width: auto; display: block; margin: 0 auto;z-index: 10; position: relative; }
    .comic-nav {
      display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
      gap: 12px; margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(0,0,0,.08);
    }
    .comic-nav a {
      display: inline-flex; align-items: center; gap: 8px; text-decoration: none;
      padding: 10px 14px; border: 1px solid rgba(0,0,0,.12); border-radius: 12px;
    }
    .comic-nav a:hover { background: rgba(0,0,0,.04); }
    .arrow { width: 48px; height: 48px; display: inline-block; }
    .rotate-180 { transform: rotate(180deg); }
    
    
    
    /* Make the container a positioning context */
#comic-container { position: relative; }

/* Side preview panels */
.carousel-side {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
width: auto;
  height: min(1024px, 70vh);
  aspect-ratio: 0.655;
  border-radius: 14px;
  overflow: hidden;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  box-shadow: none;       
  border: 1px solid transparent;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  z-index: 1;
}
.carousel-side.prev { left: -20vw; }
.carousel-side.next { right: -20vw; }

/* The blurred preview image */
.carousel-side .bg {
  position: absolute;
  inset: 0;
  background-size: cover;           /* maintain aspect */
  background-position: center;
  background-repeat: no-repeat;
  filter: blur(5px);
  transform: scale(1.08);             /* hide blur edges */
  z-index: -1;
}

/* Subtle dark overlay for readability */
.carousel-side::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.35), rgba(0,0,0,.25));
  mix-blend-mode: multiply;
  pointer-events: none;
}

/* Arrow button */
.arrow-wrap {
  display: grid; place-items: center;
  width: 6vh; height: 6vh;
  border-radius: 999px;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.15);
  backdrop-filter: blur(4px);
}
.arrow-wrap svg { display: block; }

/* Hover state */
.carousel-side:hover {
  transform: translateY(-50%) scale(1.03);
  box-shadow: 0 0 10px rgba(255, 0, 0, 0.6);
  border-color: rgba(255, 0, 0, 0.45); 
}

/* Hide side panels on narrow screens */
@media (max-width: 1600px) {
  .carousel-side { display: none; }
}