@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jersey+10&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Jersey+25&display=swap');
/* THE KIRIBBEAN COLOR PUH-LET:
#4AA2BF – blue
#BF4A4C – red
#470175 – lighter purple
#6603A8 - lighter purple v2
#30014F – darker purple
#E4E4E4 – off-white 1
#EEE – off-white 2
*/
blockquote {
  border-left: 7px solid #444;
  padding-left: 7px;
  margin-left: 10%;
  color: #444;
  border-radius: 2px 0 0 2px;
}
body {
background-color:#30014F;
font-family: "Open Sans", system-ui;
}
hr {
  max-width: 75%;
  border: 30px solid transparent;
  border-image: url('border_tiel_noside.png') 35 round;
  border-bottom: none;
}
h1, h2, h3, h4 {
font-family: "Jersey 25", sans-serif;
color:black;
margin-top: 3px;
letter-spacing: 2px;
}
h1 {
font-size:2.8em;
margin-bottom:0;
}
h2 {
font-size:2.5em;
}
h3 {
font-size:1.8em;
}
h4 {
font-size:1.5em;
}
h5 { /* Initially built for "Listen on Youtube" links in Shadow Ranks articles */
  font-family: 'Open Sans', system-ui;
  font-size: 1.25em;
  text-align: center;
  margin-top: 0;
}
ul {
  list-style-image: url('bullet.png')
}
a {
  text-decoration:underline;
  color:#BF4A4C;
  cursor: pointer;
}
img {
  max-width: 100%;
}

#ban {
  text-align: center;
  max-width: 100%;
}
.banner, .artname {
justify-content: center;
align-items: center;
margin-left: auto;
margin-right: auto;
width:60%;
}
.banner {
height:150px;
margin-bottom: 7px;
background-color:#ccc;
background-repeat: no-repeat;
display: flex;
flex-direction: column;
}
.banner p {
font-family: "Jersey 25", sans-serif;
font-size:3.75em;
color:black;
text-align: center;
letter-spacing: 2px;
background-color: #ccc;
padding:7px;
}
.artname {
  border: 5px inset grey;
  background-color: #aaa;
  padding:7px;
}
.artname h1 { /* "Article Name" */
  font-size: 1.8em;
  color:white;
  text-align: center;
}
.artname p {
  font-size: 1.25em;
  text-align: right;
  margin-bottom: 0;
}
.belowbanner {
width:100%;
display: flex;
justify-content: center;
margin-left: auto;
margin-right: auto;
}
.sidebar {
max-height:250px;
padding-top:7px;
padding-left:7px;
position:sticky;
top:0;
height:auto;
}
.sidright {
  max-width:100px;
}
.sidright button {
  background-color: #aaa;
  border: none;
  font-size: 1.25em;
  font-family: "Jersey 25", sans-serif;
  margin-left: -7px;
  margin-bottom: 5px;
  padding: 5px;
}
.sidright button:hover {
  cursor: pointer;
  color:white;
}
.sidright button:hover img {
  filter:invert(100%);
}
.nav span {
  background-color: #6603A8;
  font-size:1em;
  margin-bottom:5px;
  margin-left:-7px;
  padding: 7px;
}


.hamburger {
  width:50%;
  height:auto;
  margin: 0 auto 5px auto;
  text-align: left;
  color:#eee;
  background-color: #4AA2BF;
  padding: 5px;
  font-size: 1.8em;
  display:none;
}
.hamburger:hover {
  cursor: pointer;
}
.hamburger i {
  padding-right:5px;
}
.hamburger div {
  margin:0;
  padding:3px 7px !important;
}
.mobile {
  background-color: #4AA2BF;


  margin-top:20px;
}
.mobile h3 {
  color:white;
  font-family: "Carter One";
}
.maincol {
width:55%;
background-color: #aaa;
border: 5px inset grey;
padding: 7px 15px;
}
.maincol p {
  margin: 15px;
  font-size: 1em;
}
.maincol h1, .maincol h2, .maincol h3 {
text-align:center;
color:#BF4A4C;
}
.maincol h4 {
margin: 7px 0;
}
.maincol table {
width:100%;
text-align:left;
}
/* ===== MY-CHARACTERS SHENANIGANS ===== */
    .container {
    border: 5px inset grey;
    background-color: #aaa;
    margin-bottom: 15px;
    padding: 5px;
  }
  .charcol { 
    /* "character column" for my-characters.html, 
    because I want each character listing to have the #aaa inset border combo
    Default .maincol would clash with this, so on my-characters, 
        it gets overwritten to be transparent.  
    Nested with some other classes for :hover later in this doc */
    display:flex;
    align-items: top;
  }
  .charcol.wrap { /* Make the flexbox wrap for the Throwback Monsters section */
    flex-wrap: wrap;
  }
  .charcol p > b {
    color: #BF4A4C;
    font-size: 1.25em;
  }

  .charcol div + div {
    min-width: 60%;
    text-align: left;
  }

  .charcol.wrap img {
    padding: 3px;
    max-width: 120px;
  }
  #chart_mobile {
    display: none;
  }
.chart:hover { /* The size charts for my characters don't need a faux lightbox, so keep cursor to default */
  cursor: default;
}
  .fullscreen { 
    /* Hopefully self-explanator- y'know what I don't trust future me 
    Click on an applicable image, this container displays it "full screen"
    Used in conjunction with function 'zoomies' in fullscreen.js */
    position: absolute;
    top:0;
    left: 0;
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    z-index:999;
    visibility: hidden;
  }
  #zoomimg {
    max-height: 80%;
    width: auto;
    border: 30px solid red;
    border-image: url('border_tiel.png') 35 stretch;
    background-color: #aaa;
  }
  .fullscreen > button {
    padding: 10px;
    border: none;
    background-color: black;
    color: white;
    font-size: 1.8em;
    text-align: center;
    font-family: 'jersey 25', sans-serif;
  }
  .fullscreen > button:hover {
    color: #BF4A4C;
    cursor: pointer;
  }
  .fullscreen > img:hover, .fullscreen:hover {
    cursor: zoom-out;
  }
  .fullscreen h5 {
    margin-bottom: 0;
  }
  .carousel { /* bonus images underneath a .charcol */
    display: flex;
    justify-content: left;
    width: 80%;
    margin-top: -15px;
  }
  .carousel img {
    max-width:100px;
    margin-right:5px;
  }
  .charcol button, .carousel button {
    background-color: transparent;
    border: none;
    padding:0;
  }
  #caption {
    background-color: #aaa;
    outline: 2px solid black;
    outline-offset: -7px;
    min-width: 70%;
    padding: 20px;
  }
/* ===== end my-characters shenanigans ==== */
#art_0_exr, #art_1_exr, #art_2_exr, #art_3_exr, #art_4_exr, #art_5_exr, #art_6_exr, #art_7_exr, #art_8_exr, #art_9_exr, #art {
  /* Just plain "#art" is for static blog entries, unaffected by JS. 
  e.g. the level ranking articles listed in monster-bin/shadow */
  border: 20px solid transparent;
  border-image: url('border_tiel_noside.png') 35 round;
}
.maincol td {
padding:5px 0;
}
.titlesec { /* "Title Section" -- e.g. on index page, the title for a new section, like "Links" */
color:white;
background-color:#470175;
margin:0 -14px;
}
.linkico { /* "Link Icon" -- fully-rounded social media buttons in "More Links" section */
display:inline-block;
color:white;
font-size:1.25em;
background-color: #4AA2BF;
padding:10px;
margin:0 5px;

}
.newsblock, .blogblock {
display:flex;
width:100%;
justify-content:space-between;
padding-bottom:25px;
}
.newsblock div{
width:43%;
height:200px;
padding:0 10px 10px 10px;
overflow-y:scroll;
overflow-x:hidden;

background-color: #eee;
}
.newsblock p {
font-size: 1em;
text-align:left;
}
.newsblock h3 {
position:sticky;
top:0;
}
.blogblock table {
  padding:0 1%;
}
.blogblock h3 {
  margin:0;
}
.blogblock tr:nth-child(1), .blogblock tr:nth-child(3){
  text-align: center;
}
.blogblock p {
  margin:1px;
}
.readmore, .reviewext { /* "reviewext" = Trailer/Playthrough buttons in reviews */
  max-width: 150px;
  padding: 5px;
  text-align: center;
  color:white;
  font-family: "Jersey 10";
  letter-spacing: 1px;
  font-size: 1.5em !important;
  border: none;
}

.readmore {
  float: right;
  background-color: #4AA2BF;
}

.reviewext {
  background-color: #444;
}

.readmore:hover, .reviewext:hover {
  background-color: #BF4A4C;
  cursor: pointer;
}
.blogblock td:nth-child(2) p{
  float:right;
  margin-right:5px;
}
/* ===== BLOG NAVIGATION BUTTONS ===== */
#prev, #next, #readmore {
  background-color:#4AA2BF;
  padding:7px;
  margin-right: 5px;
  color:#eee;
  font-size:1.5em;
  text-decoration: none;
}


input {
  max-width:25px;
  text-align:center;
}
#total, #of, input {
  font-size:1.25em;
  font-family:"Open Sans", system-ui;
}
#pageBoxContainer {
  background-color: #aaa;
  border: 20px solid transparent;
  border-image: url('border_tiel.png') 35 stretch;
  padding-top:20px;
  width:300px;
  position: sticky;
  bottom: 0;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
/* ===== end blog navigation buttons ===== */

/* ===== Pokémon page, Table of Contents ===== */ 
.toc {
  display: flex;
  flex-wrap: wrap;
}
.toc img {
  display: inline;
  max-width:100px;
  padding-right: 15px;
}
.slot { /* buttons on the Pokémon page */
  font-size: 1.25em;
  font-weight: 800;
  font-family: sans-serif;
  color: #BF4A4C;
  max-height: 100px;
  background-color: transparent;
  border: none;
  cursor: pointer;
}
.slot span {
  position: relative;
  bottom:50px;
  text-decoration: underline;
}

.slot:hover {
  color:white;
}
.vault {
  display: inline; 
  padding: 0 25px;
}
/* ===== end Table of Contents ===== */ 

/* ===== Blog Articles ===== */
.fig { /* used for standalone images in blog articles */
  display: block;
  margin-left: auto;
  margin-right: auto;
  max-height: 350px;
}
#cen {text-align: center; font-size: 1em;} /* id used in Vault articles */

.rank {
  display:flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-top:30px;
  margin-bottom: 0;
}

.rank iframe { /* iframes for the final ranking */
  width: 350px;
  height:150px;
  border: none;
}

.yt { 
  display:flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  margin-top:30px;
  margin-bottom: 0;
  height:548px;
 }

.yt iframe {
  width:975px;
}

.artnav {
  display: flex;
  flex-wrap: wrap;
  justify-content:space-between;
  padding:25px 7px 15px 7px;
}

.artnav button {
    font-family: "Jersey 25", sans-serif;
    font-size: 1.25em;
    letter-spacing: 1px;
    border: 30px solid transparent;
    border-image: url('border_tiel.png') 35 stretch;
    background-color: transparent;
}

.artnav button:hover {
  color: #BF4A4C;
  cursor: pointer;
}

 /* ===== end blog articles ===== */


.deets { 
/* Info about the game, i.e. publisher, platforms, etc. 
    Intended for Short Reviews articles */
  display:grid;
  grid-template: 
    "deetimg deettitle deetrank"
    "deetimg dev blank"
    "deetimg pub blank"
    "deetimg rel blank"
    "deetimg plat blank"
    "deetimg deetlinks blank"
    "deetimg bonus blank";
  text-align: left;
  max-width: 75%;
}
.deetsalt { /* For reviews where you want a trailer instead of image */
  grid-template:
    "dev dev dev"
    "pub pub pub"
    "rel rel rel"
    "plat plat plat"
    "deetlinks deetlinks deetlinks"
    "bonus bonus bonus";
}
.deets, .deetsalt {
  gap:7px;
  border: 30px solid transparent;
  border-image: url('border_tiel.png') 35 round;
  align-items: center;
  margin-left: auto;
  margin-right: auto;
}

.deets b, .deets h3, .deetsalt b, .deetsalt h3 {
  color: #470175;
}
.deets h3 {
  text-align: left;
  letter-spacing: 2px;
  font-family: "jersey 25", sans-serif;
}
.deets div:nth-child(3) {
  margin-left: auto;
  max-width: 50px;
}
.pub, .plat, .deetlinks, .rel, .dev {
  font-size: 1.25em;
  font-family: "Open Sans", system-ui;
}
.deetimg {
  grid-area: deetimg;
  padding-right: 20px;
}
.deetimg img{
    max-height: 250px;
    float: right;
}
.deettitle {
  grid-area: deettitle;
  font-size: 2.5em;
  color:#470175;
  font-family: "Jersey 25", sans-serif;
  letter-spacing: 1px;
}
.dev {
  grid-area: dev;
}
.pub {
  grid-area: pub;
}
.rel {
  grid-area: rel;
}
.plat {
  grid-area: plat;
}
.deetrank {
  grid-area: deetrank;
  width:500px;
}
.deetlinks {
  grid-area: deetlinks;
}
.bonus {
  grid-area: bonus;
  color: #444;
  font-family: "Open Sans", system-ui;
  font-size: 1.5em;
}
.blank{grid-area:blank;}
.plat b + b, .bonus h4{
  color:#BF4A4C;
}


@media screen and (max-width:1400px) {
  .banner p {
    font-size: 3em;
  }
}
.deettitle, .dev, .pub, .rel, .plat, .deetlinks, .bonus {
    max-width: 400px;
    text-align: left;
}

.trailer {
  grid-area: bonus;
  width: 100%;
  text-align: left;
}

/* ===== TEDBAR =====
"Tedium Bar" a.k.a. Tedbar, first implemented in those cringe Shadow articles. 
  It's a table where columns 1-5 step from green to red. 
  Customize a <td> with ".mono" if you want it greyed out instead, 
  or ".hell" for a tacky fire GIF to emphasize just how annoying the thing you're reviewing is.

Use ".title" for text rows above and/or below the Tedbar.
  + Don't forget to add "colspan=5" in the <tr> tag. */

.tedbar {
  max-width: 500px !important;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
  font-family: 'Open Sans', system-ui;
}

.tedbar h3 {
  color: #4aa2bf;
}

.tedbar td {
  width:40px;
  height:40px;
  line-height:1em;
  font-weight:bold;
  font-size:1.25em;
  border: 1px solid #aaa;
}

.tedbar td:nth-child(1) {
  background-color:#4FB239;
}

.tedbar td:nth-child(2) {
  background-color:#9DC62D;
}

.tedbar td:nth-child(3) {
  background-color:yellow;
}

.tedbar td:nth-child(4) {
  background-color:#E36000;
}

.tedbar td:nth-child(5) {
  background-color:#C60007;
}


.tedbar .mono {
  background-color:#555 !important;
}

.tedbar .hell {
  background-color: #c60007 !important;
  background-image: url('icons/icegif-1612-fire.gif');
  background-size: 135%;
  background-position: center;
  background-repeat: no-repeat;
}

.hp {
  background-color: #e3a93f;
  background-image: url('ranks/img/score_hp.jpg');
}

.ttu, .tu, .meh {background-color: #2b8dad;}

.ttu {background-image: url('ranks/img/score_ttu.jpg');}
.tu {background-image: url('ranks/img/score_tu.jpg');}
.meh {background-image: url('ranks/img/score_meh.jpg');}

.td, .rt {background-color: #515151;}

.td {background-image: url('ranks/img/score_td.jpg');}
.rt {background-image: url('ranks/img/score_rt.jpg');}

.tra {background-color: #af3f7a; background-image: url('ranks/img/score_tra.jpg');}

.hp, .ttu, .tu, .meh, .td, .rt, .tra {background-repeat: no-repeat;}

.tedbar.hp {
  background-position: center -30px;
  background-size: 80px;
}

.tedbar.ttu {
  background-position: center -15px;
  background-size: 80px;
}

.tedbar.tu{
  background-position: 0px -10px;
  background-size: 70px;
}

.tedbar .meh{
  background-position: center -15px;
  background-size: 100px;
}

.tedbar.td{
  background-position: -12px -7px;
  background-size: 80px;
}

.tedbar.rt{
  background-position: 2px -20px;
  background-size: 120px;
}

.tedbar.tra{
  background-position: center -22px;
  background-size: 70px;
}


.tedbar .title {
  background-color:rgba(0,0,0,0) !important;
}

/* "Fun" ranks on right side of the Tedbar */
.tedbar .fun {
  background-color:rgba(0,0,0,0) !important;
  min-width:150px;
}

/* ===== end Tedbar ===== */

/* ===== SCORE BANNERS ===== */

.score {
  max-width: 50%;
  background-color: transparent;
  font-family: 'Open Sans', system-ui;
  font-size:1.5em;
  font-weight: 800;
  padding-top:10px;
  border: 30px solid transparent;
  border-image: url('border_tiel.png') 35 round;
  background-repeat:no-repeat;
  background-size: 100px 100px;
  background-clip:padding-box;
  background-position: right center;
  margin-left:auto;
  margin-right:auto;
  margin-bottom: 10px;
  margin-top: 10px;
  text-align:center;
}

.score p {
  margin-right:100px;
  font-size: 1.5em;
  text-align: center;
}


/* ===== end score banners ===== */

/* ==== BLOG ARTICLE SCREENSHOT OPTIONS ===== */

.screenshot {
  width: 80%;
  margin-left: auto;
  margin-right: auto;
  margin-top: 15px;
  text-align: center;
}

.duo { 
/* When you want to display 2 screenshots (desktop view, becomes 1 column on mobile)
  Works in tandem with .screenshot, 
  i.e. <div class='screenshot'><div class='duo'> */
  display:flex;
  gap:3px;
  margin-bottom: 3px;
  margin-top: -15px;
}

.smaller { /* the "carousel" has only 1 image, e.g. the acryllic standee in the Dungeon Munchies review */
  max-width: 60%;
}

.duo img:hover, .screenshot img:hover, .charcol img:hover, .carousel img:hover {
  cursor: zoom-in;
}

/* ===== end screenshots ===== */

/* 
----------
CHECKBOX HAX
(first used in Shadow articles for Quick Navigation)
----------
*/
.quicknav {
  margin-left: auto;
  margin-right: auto;
  max-width: 50%;
}

.quicknav input[type=checkbox] {
   position: relative;
   display:none;
     text-align: center;
}
.quicknav label { 
  display: block;
  background-color:#30014F;
  padding:10px;
  text-align:center;
}
.quicknav label h3 {
  color:white;
}
.quicknav label:hover h3 {
  color:#BF4A4C;
}

.quicknav label:hover, .quicknav img:hover {
  cursor: pointer;
}

/* Default State */
.quicknav div {
   display:none;
   width: 100%;
   color: white;
}

.quicknav p {
  font-weight: 800;
  font-family: "Open Sans", system-ui;
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.quicknav img {
  padding:0px;
}

/* Toggled State */
.quicknav input[type=checkbox]:checked ~ div {
  display:flex;
}


/*
----------
END CHECKBOX HACK
----------
*/
@media screen and (max-width:900px) {
  .belowbanner {
    flex-direction: column;
    align-items: center;
  }
  .maincol {
    width: 96%;
  }
  .sidright {
    text-align: center;
    max-width: 100%;
  }
  .sidright button {
    font-size: 1.8em;
  }
  .blogblock {
    flex-direction: column;
    justify-content:center;
    content-align:center;
  }
  .toc, .artnav {justify-content:center;}
  .artnav {
    border: 30px solid transparent;
    border-image: url('border_tiel.png') 35 stretch;
  }
  .artnav :nth-child(2) button {
    border: 3px solid black;
    border-right: none;
    border-top: none;
    border-bottom: none;
    padding-right: 10px;
  }

 .artnav :nth-child(1) button {
   border: none;
   padding-left: 10px;
 }


  .deets { 
  grid-template: 
    "deetimg deetrank"
    "deettitle deettitle"
    "dev dev"
    "pub pub"
    "rel rel"
    "plat plat"
    "deetlinks deetlinks"
    "bonus bonus"
    "blank blank";
    justify-content: center;
    text-align: center;
  }
  .deetimg, .deetrank {
    margin-left: auto;
    margin-right: auto;
  }
  .pub, .plat, .deetlinks, .rel, .dev {font-size: 1em;}
  .deettitle, .deets h3 {font-size: 1.8em;}
  .banner p {font-size:2.5em;}
  .score, .tedbar {max-width:100%;}
  .duo {
    flex-direction: column;
  }
  .screenshot {
    width:100%;
  }
  .smaller {
    max-width: 100%;
  }
  .quicknav input[type=checkbox]:checked ~ div {
    flex-direction: column;
  }
  .quicknav div {
    left:0;
  }
  .charcol {
    width: 100%;
    flex-direction: column;
    justify-content: right;
  }
  .charcol div + div {
    width:100%;
  }

  .charcol.wrap {
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: left;
  }
  .charcol.wrap button {
    max-width:150px;
  }
  .maincol p, .dev, .deetrank, .pub, .rel, .plat, .deetlinks, .deetrank {
    font-size: large;
  }
  ul, li {
    font-size: large;
  }
  .deettitle {
    font-size: xx-large;
  }
  .hp, .ttu, .tu, .meh, .td, .rt, .tra  {
    text-align: left;
  }
}
@media screen and (max-width: 1500px) {
    #chart_mobile {
    display: block;
  }
  #chart_desktop {
    display: none;
  }
}