/* For Art Fight pages. */

  :root {
        /* override the css accent color with your oc's signature color by uncommenting this */
     --bgcolor: var(--teamlight);
    --spoilerbgcolor: rgba(0, 0, 0, 0.2);
    --accentcolor: var(--teamlight);  /*THIS IS THE NAME IN THE DOSSIER and the infotable background.*/
    --lightcolor: #FFF;
    --darkcolor: #000;
    --subcolor: var(--teamdark);/* Buttons, Infotable NAME, and background for icon on left.*/
    --spoilercolor: var(--teamcolor); /* Originally 777. This is stuff like Basic, Trvia, etc. Also, the box for History, etc.*/

    --mooncolor: #8f9ede;
    --teacolor: #99C04B;
    --nightmarecolor: #C04847;
    --spicecolor: #FBAC6D;
    --steampunkcolor: #BB6726;
    --cyberpunkcolor: #BF54E2;
    --bloomcolor: #A1AF4E;
    --vampirescolor: #E6466C;
    --stardustcolor: #877CE5;
    --fossilscolor: #BA8C25;
    --crystalscolor: #D35E88;

     --moonlight: #b6bcd4;
     --tealight: #c5cfaf;
     --nightmarelight: #d39898;
     --spicelight:  #dec5b1;
     --steampunklight:  #be9474;
     --cyberpunklight: #c592d7;
     --bloomlight: #b9c098;
     --stardustlight: #aca9d7;
     --vampireslight: #bf8e98;
     --fossilslight: #d9c59a;
     --crystalslight: #d39bb0;

     --moondark: #7881a6;
     --teadark: #93aa66;
     --nightmaredark: #994343;
     --spicedark:  #cc8850;
     --steampunkdark:  #b1703e;
     --cyberpunkdark: #a56abb;
     --bloomdark: #90a04a;
     --stardustdark: #6761ae;
     --vampiresdark: #9f3f52;
     --fossilsdark: #a7863f;
     --crystalsdark: #b1486e;


}


        /* Four-column chart that two defense charts are nestled in. */
 .defensechart {
 display: grid; /* Makes the element a grid container */
       grid-template-columns: repeat(auto-fill, 110px);
       gap: 2px;
       
 }
/* Chart for Defenses, three columns */
 .defensecolumn {
      display: grid; /* Makes the element a grid container */
       grid-template-rows: 100px 30px 40px 30px;
 }


.defensecolumn div {
  background-color: #d1d1d1;
  border: 1px solid black;
  padding: 3px;
  font-size: 30px;
     justify-content: center;
   align-items: center;
   	text-align:center;
	margin: 0 auto;
	width: 100%;
}

.defensecolumn img {
    width: 90px; 
        vertical-align:middle
        }
        
.infotable {
  border-color: var(--teamcolor);
border-width: 5px;
}