:root {
    --bgcolor: #888;
    --spoilerbgcolor: rgba(0, 0, 0, 0.2);
    --accentcolor: #309174; /* Teal for now. This is the fas-fa and the like. */
    --lightcolor: #FFF;
    --darkcolor: #000;
    --subcolor: #555;
    --spoilercolor: #777;
    --labelcolor: #222;

    --mainfont: book antiqua, monospace;
    --headerfont: georgia;

    --symbolbgsize: 40pt;
}

/* Chart buttons? */
.chartbutton {
    color: #ddd;
    background-color: #444;
    border-radius: 25px;
     border-style: solid;
    margin: 2px 0;  
    display: flex;
    width: 100%;
     align-items: center;
    justify-content: center;
    font-size: 30px;
    cursor: pointer;
    transition: 0.3s;
    padding: 1px;
    font-variant: small-caps;
}


/* Lightens the one currently on the page of */
.active {
 color: #eee;
    background-color: #888;
    }

/* Basic grid starts */
.center {
  max-width: fit-content;
  margin-left: auto;
  margin-right: auto;
}

  .triadchart {
      display: grid; /* Makes the element a grid container */
  grid-template-columns: 0.5fr repeat(12, 1fr);
  grid-template-rows: 0.5fr repeat(12, 1fr) ; /* Originally, this matched the top, with 12, but for the labels, I have to split it into 3 groups of 3. */
      gap: 1px; /* Adds a 10px gap between grid items */

    }

.toptriad {
  text-align: center; 
      margin: 3px 1px 0px; /* Space between */  
     transition: all .2s ease-in-out;
     background-color:  var(--labelcolor);
    position: relative;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    font-size: 20px;
    height: 25px;
    color: #fff;
    border: none;
    cursor: pointer;
    padding: 0;
}

.blank {
    display: none;
}

.triadone {
  grid-column-start: 2;
  grid-column-end: 6;
  grid-row-start: 1;
}

.triadtwo {
  grid-column-start: 6;
  grid-column-end: 10;
  grid-row-start: 1;
}

.triadthree {
  grid-column-start: 10;
  grid-column-end: 14;
  grid-row-start: 1;
}

/* Vertical triad */

.verttriad {
  text-align: center; 
      margin: 3px 1px 0px; /* Space between */  
     transition: all .2s ease-in-out;
     background-color:  var(--labelcolor);
    position: relative;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    font-size: 20px;
    height: 25px;
    color: #fff;
    border: none;
    cursor: pointer;
     -webkit-transform: rotate(-90deg);
    padding: 0;
}


.vert-triadone {

  grid-row-start: 2;
  grid-row-end: 6;
}

.vert-triadtwo {

  grid-column-start: 6;
  grid-column-end: 10;
}

.vert-triadthree {

  grid-column-start: 10;
  grid-column-end: 14;
}



/* All Grids */
.grid-lawfulgood, .grid-neutralgood, .grid-chaoticgood,  .grid-lawfulneutral, .grid-trueneutral,  .grid-chaoticneutral,  .grid-lawfulevil, .grid-neutralevil,  .grid-chaoticevil, .grid-authleft, .grid-authright, .grid-libleft, .grid-libright {

      text-align: center; 
      margin: 1px; /* Space between */  
      transition: all .2s ease-in-out;
     background-color: var(--subcolor);
    position: relative;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    height: 60px;
    width: 60px;
    padding: 0;
    transition: 0.3s;
}


/* All ICONS */
.absit, .amun, .agora, .arcelia, .dagda, .deems, .deimos, .dorothy, .elaine, .ffraid, .geistember, .gatlin, .idunn, .ignace, .janus, .kurt, .lambert, .liam, .liv, .lugubrious, .lune, .lydia, .maruis, .mark, .morris, .nina, .owlbert, .peri, .picary, .pyrite, .regis, .roulette, .sakura, .sayona, .september, .sighield, .teo, .thalassa, .verity, .victoria, .vivienne, .yami, .yolo, .zane
{
  background-size: contain;
  background-repeat: no-repeat;
position: relative;
 background-origin: content-box;
  display: inline-block;  /* Display: flex will make it go full, but adding padding is tough. Inline-block makes it smaller than I'd like, but passable. ...Actually, Display: flex did nothing. Huh*/
  padding: 2px 2px;
}


/* Originally bottom: 110%, left: 50% */
.grid-lawfulgood span, .grid-neutralgood span, .grid-chaoticgood span,  .grid-lawfulneutral span, .grid-trueneutral span,  .grid-chaoticneutral span,  .grid-lawfulevil span, .grid-neutralevil span,  .grid-chaoticevil span, .grid-authleft span, .grid-authright span, .grid-libleft span, .grid-libright span {
    visibility: hidden;
    width: 65px;
    background-color: var(--darkcolor);
    color: #fff;
    font-family: var(--headerfont);
    font-variant: small-caps;
    font-size: 11px;
    text-align: center;
    border-radius: 6px;
    padding: 2px 2px;
    position: absolute;
    z-index: 1;
    bottom: 80%;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity 0.3s;
}
/* Was Top 100%, left: 50% */
.grid-lawfulgood span:after, .grid-neutralgood span:after, .grid-chaoticgood span:after,  .grid-lawfulneutral span:after, .grid-trueneutral span:after,  .grid-chaoticneutral span,:after  .grid-lawfulevil span:after, .grid-neutralevil span,:after  .grid-chaoticevil span:after, .grid-authleft span:after, .grid-authright span:after, .grid-libleft span:after, .grid-libright span:after  {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: var(--darkcolor) transparent transparent transparent;
}

.grid-lawfulgood:hover span, .grid-neutralgood:hover span, .grid-chaoticgood:hover span,  .grid-lawfulneutral:hover span, .grid-trueneutral:hover span,  .grid-chaoticneutral:hover span,  .grid-lawfulevil:hover span, .grid-neutralevil:hover span,  .grid-chaoticevil:hover span, .grid-authleft:hover span, .grid-authright:hover span, .grid-libleft:hover span, .grid-libright:hover span {
    visibility: visible;
    opacity: .8;
}



/* Good text? */
  .good {
      background-color: #C1F5D5; /* Light Green */
    }



/* Lawful good */
    .grid-lawfulgood {
      background-color: #C1F5D5; /* Light Green */
    }
    
/* Neutral Good */
    .grid-neutralgood {
      background-color: #7ACC9A; /* Green */
    }
    
/*Chaotic Good */
    .grid-chaoticgood {
      background-color: #A1B5AA; /* Dark Green */
    } 
    
/* Neutral Good */
    .grid-lawfulneutral {
      background-color: #F0F0F0;
    }
    
/* True Neutral */
    .grid-trueneutral {
      background-color: #E0E0E0;  /* Yellow */
    }
    
/*Chaotic Neutral */
    .grid-chaoticneutral {
      background-color: #C7C7C7; /* Dark Yellow */
    }    
    
/* Lawful Evil */
    .grid-lawfulevil {
      background-color: #EDC2B9;  /* Light red */
    }
    
/* Lawful Neutral */
    .grid-neutralevil {
      background-color: #D16D64;  /* Red */
    }
    
/*Chaotic Evil */
    .grid-chaoticevil {
      background-color: #946D6D;  /* Dark red */
    }     

/* Politican Alignment starts */


/* Top titles? This is the 3x3 grid for it. */
.politics-label{
   display: grid; /* Makes the element a grid container */
   grid-template-columns: 1fr 1fr  ;

}
/* This ithe title itself, each one of the 3s in the 3x3 */
.politics {
   text-align: center; 
    margin: 3px 1px 0px; /* Space between */  
     transition: all .2s ease-in-out;
     background-color: var(--labelcolor);
    position: relative;
    display: inline-block;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    font-size: 20px;
    color: #fff;
    height: 25px;
    width:  375px;
    border: none;
    cursor: pointer;
    padding: 0;
}

/* Auth Left */
    .grid-authleft {
      background-color: red;  /* red */
    }
    
/* Auth Right */
    .grid-authright {
      background-color: blue;  /* blue */
    }     

/* Lib Left */
    .grid-libleft {
      background-color: green;  /* green */
    }
    
/* ALib Right */
    .grid-libright {
      background-color: yellow;  /* yellow */
    }     



/* Characters. */    
    .absit { 
       background-image: url('icons/AbsitIcon.png')
    }
 
    .absit:hover {
    transform: scale(1.05);
}

    .amun {   
       background-image: url('icons/AmunIcon.png')    
    }
    
        .amun:hover {
    transform: scale(1.05);
}
    
    
    .agora {  
       background-image: url('icons/AgoraIcon.png')    
    }
         .agora:hover {
    transform: scale(1.05);
}
     
     .arcelia {  
       background-image: url('icons/ArceliaIcon.png')    
    } 
        .arcelia:hover {
    transform: scale(1.05);
}
    
   .dagda {
      background-image: url('icons/DagdaRel.png')    
    }   
        .dagda:hover {
    transform: scale(1.05);
}
    
    .deems {

       background-image: url('icons/DeemsIcon.png')    
    }
     .deems:hover {
    transform: scale(1.05);
}
    .deimos {
             background-image: url('icons/DeimosRel.png')    
    }    
    .deimos:hover {
    transform: scale(1.05);
}

 .dorothy {
           
       background-image: url('icons/DorothyIcon.png')    
    }
    .dorothy:hover {
    transform: scale(1.05);
}

 .elaine {
             
       background-image: url('icons/ElaineRel.png')    
    }
     .elaine:hover {
    transform: scale(1.05);
}

 .ffraid {
             
       background-image: url('icons/FfraidIcon.png')    
    }
     .ffraid:hover {
    transform: scale(1.05);
} 
 
    .geistember {       
       background-image: url('icons/Geistember.png')    
    }
    .geistember:hover {
    transform: scale(1.05);
}
    
    .gatlin {
           
       background-image: url('icons/GatIcon.png')    
    }
    .gatlin:hover {
    transform: scale(1.05);
}

    .idunn {
             background-image: url('icons/IdunnIcon.png')    
    }
    .idunn:hover {
    transform: scale(1.05);
}
    
    .ignace {
             background-image: url('icons/IgnaceIcon.png')    
    }
        .ignace:hover {
    transform: scale(1.05);
}
    
     .janus {
             background-image: url('icons/JanusRel.png')    
    }
        .janus:hover {
    transform: scale(1.05);
}

    .kurt {       
       background-image: url('icons/KurtIcon.png')    
    }
    .kurt:hover {
    transform: scale(1.05);
}
    .lambert {
         background-image: url('icons/LambertIcon.png')    
    }
    .lambert:hover {
    transform: scale(1.05);
}
    .liam {
             background-image: url('icons/LiamRel.png')    
    }
    .liam:hover {
    transform: scale(1.05);
}
  .liv {
          background-image: url('icons/LivIcon.png')    
    }
    .liv:hover {
    transform: scale(1.05);
}
  .lugubrious {
 
       background-image: url('icons/LuguIcon.png')    
    }
    .lugubrious:hover {
    transform: scale(1.05);
}
  .lune {   
       background-image: url('icons/LuneIcon.png')    
    }

    .lune:hover {
    transform: scale(1.05);
}
  .lydia {
             background-image: url('icons/LydiaIcon.png')    
    }
       .lydia:hover {
    transform: scale(1.05);
} 
    
  .marius {
           background-image: url('icons/MariusIcon.png')    
    }
    .marius:hover {
    transform: scale(1.05);
}

  .mark {
            background-image: url('icons/MarkIcon.png')    
    }
    .mark:hover {
    transform: scale(1.05);
}

  .morris {
    background-image: url('icons/MorrisIcon.png')    
    }
      .morris:hover {
    transform: scale(1.05);
}  

  .nina {
             background-image: url('icons/NinaIcon.png')    
    }
    .nina:hover {
    transform: scale(1.05);
}

  .owlbert {
         background-image: url('icons/OwlbertIcon.png')    
    }
    .owlbert:hover {
    transform: scale(1.05);
}

  .peri {
             background-image: url('icons/PeriRel.png')    
    }
    .peri:hover {
    transform: scale(1.05);
}

  .picardy {
             background-image: url('icons/PicardyIcon.png')    
    }
    .picardy:hover {
    transform: scale(1.05);
}

  .pyrite {
           background-image: url('icons/PyriteIcon.png')    
    }
    .pyrite:hover {
    transform: scale(1.05);
}

  .regis {
             background-image: url('icons/RegisRel.png')    
    }
      .regis:hover {
    transform: scale(1.05);
}
  
  .roulette {
         background-image: url('icons/RouletteIcon.png')    
    }
    
     .roulette:hover {
    transform: scale(1.05);
}
  .sakura {
          background-image: url('icons/SakuraRel.png')    
    }
    .sakura:hover {
    transform: scale(1.05);
}
  .sayona {
       background-image: url('icons/SayonaIcon.png')    
    }  
     .sayona:hover {
    transform: scale(1.05);
} 
  .september {
      
        background-image: url('icons/SeptIcon.png')    
    }
    .september:hover {
    transform: scale(1.05);
}
  .sighield {
        background-image: url('icons/SighieldIcon.png')    
    }    
    .sighield:hover {
    transform: scale(1.05);
}

  .teo {
       background-image: url('icons/TeoIcon.png')    
    }
    .teo:hover {
    transform: scale(1.05);
}

  .thalassa {
 
       background-image: url('icons/ThalassaIcon.png')    
    }
    .thalassa:hover {
    transform: scale(1.05);
}

  .verity {
             background-image: url('icons/VerityIcon.png')    
    }
       .verity:hover {
    transform: scale(1.05);
} 
  
  .victoria {
             background-image: url('icons/VictoriaIcon.png')    
    }  
       .victoria:hover {
    transform: scale(1.05);
}
    .vivienne {
             background-image: url('icons/VivienneIcon.png')    
    }   
       .vivienne:hover {
    transform: scale(1.05);
}
    .yami {       
       background-image: url('icons/YamiIcon.png')    
    } 
      .yami:hover {
    transform: scale(1.05);
}  
    .yolo {
       
       background-image: url('icons/YoloIcon.png')    
    }
    .yolo:hover {
    transform: scale(1.05);
}
    .zane {
             background-image: url('icons/ZaneIcon.png')    
    }
   .zane:hover {
    transform: scale(1.05);
}