@import url('https://fonts.googleapis.com/css2?family=Handjet:wght@100..900&family=Lekton:ital,wght@0,400;0,700;1,400&family=Outfit:wght@300&family=Quantico:ital,wght@0,400;0,700;1,400;1,700&family=Tomorrow:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

:root {

}

html{
  background-image: url("/img/gui/main_menu.png");
  background-position: center;
  background-attachment: fixed;
}

/*                 body                                  */

body {
   margin: auto;
   width: 820px;

   font-family: 'Avenir', sans-serif;
   line-height: 1.75;
   
   color: black;
   background: none;
}

.main-container{
   padding-left: 30px;
   padding-right: 30px;
   padding-top: 15px;
   padding-bottom: 20px;
   background-color: white;
}

.main-container-negative{
   padding-left: 30px;
   padding-right: 30px;
   padding-top: 15px;
   padding-bottom: 20px;
    color: white;
    background-color: black;
}

/*************************/

#header {
    padding-top: 40px;
    padding-bottom: 20px;
    width: 100%;
    height: 120px;
    background-color: none;
}

/*                 navigation section!!                      */
#navbar {
    /*overflow: hidden;*/
    height: 50px;
    width: 100%;
    font-size: 15px;
    position: relative;
    top: 80px;
}

#navbar ul {
    display: flex;
    margin: 0;
    padding: 0;
    list-style-type: none;
    justify-content: space-evenly;
}

#navbar li {
    background-color: black;
}

/* navigation links*/
#navbar li a {
    display: block;
    color: white;
    font-weight: 700;

    text-decoration: none;
    /* this removes the underline */

    padding: 5px;
    padding-left: 8px;
    padding-right: 8px;
}

/* navigation link when a link is hovered over */
#navbar li a:hover {
    color: black;
    background-color: rgba(230, 230, 230, 0.815);
    transition: 0.2s;
}

#navbar:after{
    clear: both;
}

#flex {
  display: flex;
}

a.story:link{
    text-decoration: none;
    padding: 15px;
}
a.story:hover{
    cursor: help;
    color: #c0c0c0;
    text-decoration: underline;
}

/*?????????????????????????????????????*/

div.quoteBlock{
    background-color: black; 
    padding: 5px; 
    color: white; 
    width: 86%;  
    border: 1px solid black;
    margin: auto; 
    border-radius: 25px; 
    font-size: 15px; 
    text-indent: 2px; 
    line-height: .75;
}

div.bioBlock{
    float: right; 
    width: 43%; 
    background-color: black; 
    padding: 5px; 
    color: white; 
    border: 1px solid black; 
    margin: auto; 
    border-radius: 10px; 
    font-size: 15px; 
    text-indent: 2px; 
    line-height: .75;
}

div.bioBlock2{
    margin: auto; 
    background-color: white; 
    color:black; 
    padding: 8px; 
    width:95%; 
    border-radius: 10px; 
    line-height: 1.5;
}

.bioBlockLabel{
    float: left; 
    width: 105px; 
}

.bioBlockLabel:after {
  clear: both;
}

div.bioBlockInfo{
    left: 90px;
    width: 320px; 
}

div.bioBlockSpecter{
    font-size: 12px; 
    position: relative; 
    width: 90%; 
    left: 30px; 
    line-height: 1.2;
}

/* Tooltip container */
.tooltip {
    width: 10%;
    position: relative;
    display: inline-block;
}

/* Tooltip text */
.tooltip .tooltiptext {
  padding-top: 20px;
  padding-right: 20px;
  padding-bottom: 5px;
  padding-left: 20px;

  visibility: hidden;
  width: 500px;
  background-color: black;
  color: #fff;
  text-align: left;
  border-radius: 6px;
  line-height: 1.25;
  border:4px solid  white;
 
  /* Position the tooltip text*/
  position: absolute;
  top: 120%;
  left: -200%;
  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */

  z-index: 1;
}


/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}

/*?????????????????????????????????????*/

h1 {
  padding: 5px;
  text-indent: 20px;
  
  font-family: "Quantico", serif;
  font-weight: 400;
  font-size: 25px;
  
  color: white;
  background-color:black;
}

scene_para{
  font-family: "Quantico", serif;
  font-weight: 400;
  font-size: 20px;
  
  color: black;
}

.column {
  float: left;
  text-align: center;
  width: 40%;
  height: 100px;
  margin: auto;
}

.col {
  width: 25%;
}

.row:after {
  content: "";
  display: table;
  clear: both;
}

a.fill-div {
    display: block;
    height: 100%;
    width: 100%;
    text-decoration: none;
}

a { 
    color: black;
    /*text-decoration: none;  Removes underline */ 
} 


/* Centered Image Code */
img {
    display: block;
    width: 90%;
    margin: auto;
    max-width:100%;
}


/*               TABLE                */

div.element_column_left {
    float: left;
    padding: 15px;
    width: 45%;
}
div.element_column_right {
    float: right;
    padding: 15px;
    width: 45%;
}

div.element_row:after {
    content: "";
    display: table;
    clear: both;
}

.elementBlock{
    padding: 5px; 
    color: white; 
    width: 95%;  
    border: 5px solid black;
    margin: auto; 
    border-radius: 25px; 
    font-size: 15px; 
    text-indent: 2px; 
    line-height: 1;
    text-align: center;
    text-shadow: 1px 1px 0px black;
}

.elementBlock:hover{
    color: black; 
    text-shadow: none;
    background-color: white;
    background-image: none;
}


.playertext{
    color: white;
    font-size: 10px;
    margin: auto;
    position: relative;
}

.playertext:hover {
    color: #F0F0F0;
}

.bio-imgbutton {
    background-color: black;

    border-radius: 2px;
    border: 2px solid black;
    color: white;
    padding: 10px 8px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 12px;

    transition: all 0.1s;
    margin: 2px;
}


/* Hide checkbox */
input.image-toggler {
  display: none;
}

/* When checkbox is unchecked, show thumbnail and hide full image */
img.full {
  display: none;
}

/* When checkbox is checked, hide thumbnail and show full image */
input.image-toggler:checked + img.thumbnail {
  display: none;
}

input.image-toggler:checked + img.thumbnail + img.full {
  display: block;
}

/*            <label>
            <input class="image-toggler" type="checkbox">
            <img class="thumbnail" src="/img/bio/CN_PAL.png">
            <img class="full" src="/img/bio/CN_OVW_1.png" loading="lazy">
            </label>
*/

/* IMAGE GALLERY */

/* Clear floats after the columns */
.imgs_row {
    display: flex;
    justify-content: center;
}

/* The grid: Four equal columns that floats next to each other */
.imgs_column {
    float: left;
    width: 24%;
    padding: 5px;
    justify-content: space-between;
    overflow: hidden;
}

/* Style the images inside the grid */
.imgs_column img {
    opacity: 0.8; 
    cursor: pointer; 
    width: 100%;
    height: 150px;
    object-fit: cover;
}

.imgs_column img:hover {
  opacity: 1;
}

/* Clear floats after the columns */
.imgs_row:after {
  content: "";
  display: table;
  clear: both;
}

/* The expanding image container */
.imgs_container {
  position: relative;
  display: none;
}

/* Closable button inside the expanded image */
.imgs_closebtn {
  position: absolute;
  top: 10px;
  right: 15px;
  color: black;
  font-size: 35px;
  cursor: pointer;
}

/*DIALOGUE TEXT*/

.npc, .ad, .oj, .ml, .gb, .tn, .cl, .cv, .mr, .yn, .br, .gl, .pb, .rw, .vc, .pc, .mt, .co, .sk, .ce, .ld, .lo, .cn, .ew, .hd, .os, .rj, .cp, .bl, .cs, .bk, 
.pa, .vr, .mm, .ar, .jn, .vg, .av, .am, .sw, .ut, .rs, .cd, .em, .is, .mn, .cr, .sl, .ud, .ct, .rg, .ov, .pp, .mc, .c5, .yw, .lu, .ss, .mp, .sc, .dn, 
.ir, .bn, .ms, .id, .la, .ty, .tm, .tt, .sf, .rz, .fl, .nr, .gf, .jo, .ca, .ig, .gr, .wt, .ag, .ju, .pl, .ax, .ns, .pi, .no, .wh, .kn, .c1, .c2, .c3, .c4, .be{
  font-weight: bold;
  text-indent: 80;
}

.npc{ color: black; }

.ad{ color: #0080FF; }
.oj{ color: #FF8000; }
.ml{ color: #FF00FF; }
.gb{ color: #008000; }
.tn{ color: #008080; }
.cl{ color: #00FFFF; }
.cv{ color: #80FF00; }
.mr{ color: #800000; }
.yn{ color: #FFFF00; }
.br{ color: #0000FF; }
.gl{ color: #808080; }
.pb{ color: #FFC0CB; }
.rw{ color: #FF0000; }
.vc{ color: #7F00FF; }
.pc{ color: #800080; }
.mt{ color: #5ce6a1; }
.co{ color: #FFF8e7; }
.sk{ color: #87CEEB; }
.ce{ color: #B2FFFF; }
.ld{ color: #B57EDC; }
.lo{ color: #C0FF00; }
.cn{ color: #007BA7; }
.ew{ color: #05472A; }
.hd{ color: #FF69B4; }
.os{ color: #DA70D6; }
.rj{ color: #B7410e; }
.cp{ color: #0047AB; }
.bl{ color: #000000; }
.cs{ color: #CD8232; }
.bk{ color: #D49537; }
.pa{ color: #FF7518; }
.vr{ color: #007F66; }
.mm{ color: #FFDAE9; }
.ar{ color: #8AB800; }
.jn{ color: #BDDA57; }
.vg{ color: #F3E5AB; }
.av{ color: #7FFFD4; }
.am{ color: #FFBF00; }
.sw{ color: #F5AD35; }
.ut{ color: #9F00FF; }
.rs{ color: #FF007F; }
.cd{ color: #6495ED; }
.em{ color: #50C878; }
.is{ color: #ED2939; }
.mn{ color: #191970; }
.cr{ color: #C41E3A; }
.sl{ color: #4682B4; }
.ud{ color: #120A8F; }
.ct{ color: #FF7F50; }
.rg{ color: #E0115F; }
.ov{ color: #808000; }
.pp{ color: #8E82FE; }
.mc{ color: #74C365; }
.c5{ color: #FCD700; }
.yw{ color: #306AC0; }
.lu{ color: #FFF700; }
.ss{ color: #CC33CC; }
.mp{ color: #C04000; }
.sc{ color: #FA8072; }
.dn{ color: #BCDAEC; }
.ir{ color: #5A4FCF; }
.bn{ color: #964B00; }
.ms{ color: #FFDB58; }
.id{ color: #99FFFF; }
.la{ color: #00FF00; }
.ty{ color: #CD5700; }
.tm{ color: #F4C2C2; }
.tt{ color: #D0F0C0; }
.sf{ color: #FC0FC0; }
.rz{ color: #00CCCC; }
.fl{ color: #FD3F92; }
.nr{ color: #000080; }
.gf{ color: #880085; }
.jo{ color: #343434; }
.ca{ color: #FFEF00; }
.ig{ color: #330099; }
.gr{ color: #FFD700; }
.wt{ color: #FFFFFF; }

.ag { color: #C0C0C0; }
.ju { color: #00A86B; }
.pl { color: #E5E4E2;}
.vk { color: #300300;}
.ax{ color: #00B7EB; }
.ns { color: #727472;}
.pi{ color: #9EB9D4; }
.no{ color: #A4DDED;}
.wh{ color: #F5DEB3;}
.kn{ color: #F060C6;}
.ir{ color: #5A4FCF;}

.c1{ color: #006B3C;}
.c2{ color: #0A1195;}
.c3{ color: #7F3E98;}
.c4{ color: #E30022;}

.be{ color: #F5F5DC;}

.ascii {
  white-space: pre;
  font-family: "Courier New";
  font-size: 16px;
  line-height: 0.1;
  color: black;
}




@media only screen and (max-width: 800px) {
  #flex {
      flex-wrap: wrap;
  }

  aside {
      width: 100%;
  }
}