/* CHANGE THE COLORS HERE */
      :root {
      --bg: #f0f0f0;
      --font: #222222;
      --header: #ffffff;
      --box: #ffffff;
      --borders: #aaddf4;
      --accent: #00A1E9;
      --table: #c8e8f6;
      /* dark mode colors */
      --drk-bg: #35373a;
      --drk-font: #f0f0f0;
      --drk-accent: #a3e3ff;
      --drk-header: #44474a;
      --drk-box: #44474a;
      --drk-borders: #313235;
      }
      
      .spring {
      --borders: #efc7d7;
      --accent: #EB6EA0;
      --table: #f6e3eb;
      --drk-accent: #F3BFD3;
      }
      
      .summer {
      --borders: #fee9af;
      --accent: #e9b00e;
      --table: #fcf2d4;
      --drk-accent: #ffedbb;
      }
      
      .autumn {
      --borders: #f7a783;
      --accent: #ED6D35;
      --table: #f9d8c9;
      --drk-accent: #ffae8b;
      }
      
      .rem {
      --borders: #9d87d6;
      --accent: #7e5fcc;
      --table: #dad0f3;
      --drk-accent: #bfa9f9;
      }
      
      .spring2 {
      --borders: #efc7d7;
      --accent: #EB6EA0;
      --table: #f6e3eb;
      --drk-accent: #F3BFD3;
      }
      
      .chibi {
      left: 18%;
      top: -145px;
      }
      
      p.filters {
      left: 40%;
      top: 20px;
      position : relative;
      max-width: fit-content;
      font-weight: bold;
      }
      
      /* CHIBI HEADS LIST */
      .eichi {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/tenshouin_eichi1.png);
      }
      .wataru {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/hibiki_wataru1.png);
      }
      .tori {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/himemiya_tori1.png);
      }
      .yuzuru {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/fushimi_yuzuru1.png);
      }
      .hokuto {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/hidaka_hokuto1.png);
      }
      .subaru {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/akehoshi_subaru1.png);
      }
      .makoto {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/yuuki_makoto1.png);
      }
      .mao {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/isara_mao1.png);
      }
      .tetora {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/nagumo_tetora1.png);
      }
      .midori {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/takamine_midori1.png);
      }
      .shinobu {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/sengoku_shinobu1.png);
      }
      .chiaki {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/morisawa_chiaki1.png);
      }
      .kanata {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/shinkai_kanata1.png);
      }
      .nagisa {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/ran_nagisa1.png);
      }
      .hiyori {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/tomoe_hiyori1.png);
      }
      .ibara {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/saegusa_ibara1.png);
      }
      .jun {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/sazanami_jun1.png);
      }
      .shu {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/itsuki_shu1.png);
      }
      .mika {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/kagehira_mika1.png);
      }
      .hinata {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/aoi_hinata1.png);
      }
      .yuuta {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/aoi_yuuta1.png);
      }
      .rei {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/sakuma_rei1.png);
      }
      .kaoru {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/hakaze_kaoru1.png);
      }
      .koga {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/ogami_koga1.png);
      }
      .adonis {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/otogari_adonis1.png);
      }
      .tomoya {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/mashiro_tomoya1.png);
      }
      .nazuna {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/nito_nazuna1.png);
      }
      .mitsuru {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/tenma_mitsuru1.png);
      }
      .hajime {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/shino_hajime1.png);
      }
      .keito {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/hasumi_keito1.png);
      }
      .kuro {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/kiryu_kuro1.png);
      }
      .souma {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/kanzaki_souma1.png);
      }
      .tsukasa {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/suou_tsukasa1.png);
      }
      .leo {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/tsukinaga_leo1.png);
      }
      .izumi {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/sena_izumi1.png);
      }
      .ritsu {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/sakuma_ritsu1.png);
      }
      .arashi {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/narukami_arashi1.png);
      }
      .natsume {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/sakasaki_natsume1.png);
      }
      .tsumugi {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/aoba_tsumugi1.png);
      }
      .sora {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/harukawa_sora1.png);
      }
      .madara {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/mikejima_madara1.png);
      }
      .jin {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/sagami_jin1.png);
      }
      .akiomi {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/kunugi_akiomi1.png);
      }
      .seiya {
      --link: url(https://astesicelive.github.io/umnqcfjrqp/img/ect/chibi_heads/hidaka_seiya1.png);
      }

body {
  margin: 0;
  background: var(--bg);
  font-family: 'Montserrat';
  font-size: 14px;
  color: var(--font);
  line-height: 120%;
  word-wrap: break-word;
  transition: all 0.4s;
  padding-bottom: 500px;
}

/* DARK MODE STYLING */
body.night {background: var(--drk-bg); color: var(--drk-font);}
body.night a {color: var(--drk-accent);}

body.night .links a, body.night .filters {background: var(--drk-header);
scrollbar-color: var(--borders) var(--drk-header);}
body.night .filters a {color:var(--drk-font);}

body.night .links a, body.night .filters, body.night .grid .item {
border: 1px solid var(--drk-borders);}

body.night .item {background: var(--drk-box);}
body.night .item a {background: var(--drk-bg); color: var(--drk-font); border: var(--drk-borders);}

body.night .item a:hover, body.night .links a:hover {color: var(--font); background: var(--drk-accent);}

body.night .item h3 {border-bottom-color: var(--drk-accent);}
body.night .selected {border-bottom-color: var(--drk-accent);}

.follow-teaser {
display: none;
}

a {
  text-decoration: none;
  color: var(--accent);
  transition: all 0.4s;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  -ms-transition: all 0.4s;
  -o-transition: all 0.4s;
}

hr {
  border-top: var(--borders);
  color: var(--borders);
  width: 75%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

header {
  width: 75%;
  margin: 50px auto 25px;
  display: flex;
  justify-content: center;
  position: relative;
}

.chibi {
  position: absolute;
  z-index: -1;
  width: 100px;
  height: auto;
}

img.avtr {
  width: 125px;
  height: 125px;
  border-radius: 8px;
}

.links a, .filters {
  background: var(--header);
  border: 1px solid var(--borders);
  border-radius: 8px;
}

.links {margin: 0 15px;}

.links a {
  background: var(--header);
  border: 1px solid var(--borders);
  border-radius: 5px;
  padding: 8px;
  font-size: 18px;
  display: flex;
  margin-bottom: 10px;
}

.links a:hover {
  color: var(--header);
  background: var(--accent);
}

.filters {
  width: calc(100% - 130px - 1.25em - 35px);
  height: 100%;
  max-height: 120px;
  padding: 4px 10px;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--borders) white;
}

.filters a {
  color: var(--font);
}

.filters ul {padding:0;}
.filters li {list-style-type: none; display: inline-block;}
.filters li a {color: var(--font); margin: 0 5px;}
.filters ul b {margin: 0 5px;}
.selected {font-weight: bold; border-bottom: 2px solid var(--accent);}

/* update notice */
p.filters {
  position: relative;
  max-width: fit-content;
  font-weight: bold;
}

/* content */
.grid {
  width: 90%;
  height: calc(100vh - 230px);
  margin: 0 auto 25px;
}

.grid .item {
  display: block;
  background: var(--box);
  width: 23%;
  box-sizing: border-box;
  padding: 10px;
  margin: 1%;
  border: 1px solid var(--borders);
  border-radius: 5px;
  height: 285px;
  overflow: hidden;
  mask: linear-gradient(to top, transparent 0px, black 30px);
}

.item:hover {
  height: auto;
  z-index: 99999;
  mask: unset;
  box-shadow: 0px 5px 5px rgba(0, 0, 0, 0.15);
}

.cs__hash {
  background: var(--accent);
  display: flow-root;
  padding: 10px;
}

.cs__hash .item {
  display: block;
  background: var(--box);
  box-sizing: border-box;
  padding: 10px;
  border: 1px solid var(--borders);
  border-radius: 5px;
  margin: auto;
  max-width: 300px;
}

.cs__hash > p,
.cs__hash > a {
  display: block;
  margin: 10px auto 20px;
  max-width: 300px;
  color: white;
  text-align: center;
}

.cs__hash > a {
    margin-top: 20px;
}

.cs__hash > a:hover {
    text-decoration: underline;
}

::-moz-selection { /* Code for Firefox */
  color: #ffffff;
  background: var(--accent);
}

::selection {
  color: #ffffff;
  background: var(--accent);
}

table.info {
  margin-top: 0.5em;
  background-color: var(--table) ;
  max-width: 100%;
  border-radius: 5px;
  text-align: center;
  color: var(--accent);
  text-transform: capitalize;
  width: 100%;
}

body.night table.info {
  background-color: var(--drk-bg);
  color: var(--drk-accent);
}

.item h2 {margin: 5px 0 5px; color: var(--accent);}
.item b {color: var(--accent);}
.item i {font-size: 0.9em;}
.item p {line-height: 1em;}
.item p#synopsis {font-style: italic; font-size: 0.9em;}
.item h4 {font-size: 15px; font-weight: bold; color: var(--accent); padding: 0; margin: 0 0 -1em 0;}
.item h5 {color: var(--accent); line-height: 0; padding: 0; margin: 2em 0 -7px 0;}

.rando {
  background-color: var(--accent);
  text-align: center;
  color: #ffffff;
  position: relative;
  width: 110%;
  top: -15px;
  left: -15px;
  padding: 15px 0 10px 0;
  margin: 0 0 -0.5em 0;
}

h2.rando {color: var(--drk-accent);}

body.night .item h2 {color: var(--drk-accent);}
body.night .item b {color: var(--drk-accent);}
body.night .item h5 {color: var(--drk-accent);}
body.night .item h4 {color: var(--drk-accent);}

h3 {
   width: 75%;
   text-align: center;
   border-bottom: 1px solid var(--borders);
   line-height: 0.1em;
   margin: 0 auto;
   margin-top: 1em;
}

h3 span {
  background:#fff;
  padding:0 10px;
  color: var(--accent);
  font-size: 0.9em;
}

body.night span {
  background: var(--drk-box);
  color: var(--drk-accent);
}

.chlist {
  font-size: 0.8em;
}

/* normal */
.chlist p {
  margin-bottom: 0.3em;
  text-align: center;
}
/* extra stories */
.chlist p#extra {
  margin-bottom: 0.1em;
  text-align: center;
}

hr#divide {
  width: 75%;
}

body.night hr, body.night hr#divide {
  border-top: var(--drk-accent);
  color: var(--drk-accent);
}

.item .engstars, .item a {
  display: block;
  text-align: center;
  background: var(--accent);
  color: #ffffff;
  padding: 6px 8px;
  margin: 0 auto;
  border-radius: 5px;
  border: 1px solid var(--accent);
  margin-top: 0.5em;
}

.item a:before {
  content: "Translation by ";
}

.item .engstars:before {
  content: "Available in the ENGstars app!";
}

.item a:hover {
  background: var(--table);
  color: var(--accent);
  border: 1px solid var(--accent);
  font-weight: bold;
}

.round {
  border-radius: 5px;
  width: 99%;
  aspect-ratio: 16 / 6.5;
  object-position: center top;
  object-fit: cover;
  box-shadow: 1px 1px 5px grey;
  margin-top: 3px;
  margin-bottom: 9px;
  border: 2px solid var(--accent);
}

body.night .round {
  border-color: var(--drk-accent);
}

.item img {
  min-width: -moz-available;
  max-width: 101%; 
}

input[type="checkbox"] {
  /* Add if not using autoprefixer */
  -webkit-appearance: none;
  appearance: none;
  /* For iOS < 15 to remove gradient background */
  background-color: #fff;
  /* Not removed via appearance */
  margin: 0;
}

input[type="checkbox"] {
  appearance: none;
  background-color: #fff;
  margin: auto;
  font: inherit;
  color: currentColor;
  width: 1.15em;
  height: 1.15em;
  border: 0.15em solid currentColor;
  border-radius: 0.15em;
  transform: translateY(-0.075em);
  display: grid;
  place-content: center;
  cursor: pointer;
}

input[type="checkbox"]::before {
  content: "";
  width: 0.65em;
  height: 0.65em;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
  box-shadow: inset 1em 1em;
}

input[type="checkbox"]:checked::before {
  transform: scale(1);
}

.progress-wrapper {
  height: 20px;
  width: 75%;
  position: relative;
  background: white;
  border-radius: 5px;
  margin: 0 auto;
  margin-bottom: 1em;
}

body.night .progress-wrapper {
  background: var(--drk-header);
}

.progress-inner::before {
  content: attr(readingProgress);
  width: 100%;
  display: block;
  text-align: center;
  vertical-align: middle;
  line-height: 20px; 
  color: var(--font);
  font-weight: bold;
  overflow: visible;
  white-space: nowrap;
}

body.night .progress-inner::before {
  color: var(--drk-font);
}

.progress-inner {
  width: 0px;
  height: 20px;
  background: var(--accent);
  border-radius: 5px;
}

.sebord {
  height: 0.5em;
  position: relative;
  background: var(--accent);
  width: 110%;
  top: -10px;
  left: -10px;
  overflow:hidden;
  z-index: -1;
}

.columntext {
  column-count: 2;
  column-gap: 1.5em;
  margin-top: 1.2em;
  font-size: 0.8em;
  column-rule: 1px solid var(--borders);
}
.columntext p {
  margin-top: 0px;
  margin-bottom: 0.5em;
  text-align: center;
  text-transform: capitalize;
}

.nui {
  position: fixed;
  right: 5px;
  bottom: 5px;
}

.charalist > div {
  margin-top: 1em;
  overflow: hidden; 
  display: flex; 
  justify-content: center; 
  flex-wrap: wrap;
}

.characters > div {
  background: 100%/100% no-repeat var(--link);
  flex: 0 0 30px;
  height: 30px;
  color: transparent;
}

body.night .characters, body.night .item img {
  filter: grayscale(30%);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

body.night .characters:hover, body.night .item img:hover {
  filter: grayscale(0%);
  -webkit-transition: all 0.3s;
  -moz-transition: all 0.3s;
  -ms-transition: all 0.3s;
  -o-transition: all 0.3s;
  transition: all 0.3s;
}

#selectStory {
  display: inline-block;
}

#selectStory, ul a, .lightswitch {
  cursor: pointer;
}

/* credit: DO NOT TOUCH */
.crd {
  position: fixed;
  bottom: 15px;
  right: 15px;
}

/* tumblr controls by magnusthemes */
.iframe-controls--desktop {
  position: fixed;
  top: 0px; right: 0px;
  z-index: 214748364789123456789;
  -webkit-transform:scale(0.6,0.6);
  -webkit-transform-origin: 100% 0%;
  -ms-transform-origin:100% 0%;
  -ms-transform:scale(0.6,0.6);
  transform:scale(0.6,0.6);
  transform-origin:100% 0%;
}

.iframe-controls--phone-mobile {display:none!important;}
.tmblr-iframe-pushdown {padding-top:0!important;} 
.tmblr-iframe--app-cta-button {display:none!important;}
#randomStory div{
  position:initial!important;
  width: 100%;
}

/* MEDIA QUERIES FOR RESPONSIVENESS */
@media only screen and (max-width: 1200px) {
  .grid .item {
      width: 31%;
  }
  
  .progress-wrapper {
      width: 60%;
  }
}

@media only screen and (max-width: 720px) {
header {width: 92%;}
.filters {width: calc(100% - 1.25em - 80px);}
.grid .item {width: 48%; display: inline-block;}
}
img.avtr {
    display: none;
}

@media only screen and (max-width: 600px) {
.grid .item {width: 100%; display: inline-block; margin: 1% 0; height: auto; mask: unset;}
}