:root {
  --white:      #F5F5F5;  --black:      #121212;  --redRAW:     #B8202D;
  --redMNR:     #D33A48;  --orangeSS:   #f57c00;  --orangeCOTC: #FFBE7E;
  --yellowPPV:  #FFFF00;  --yellowNXT:  #FFC71C;  --greenECW:   #50C878; 
  --greenWC:    #C1FF7D;  --greenTDR:   #7DFFC2;  --blueSD:     #00BBEC;
  --blueSNME:   #6392cf;  --blueNTR:    #7DBBFF;  --blueFNS:    #479dea; 
  --blue:       #006AC9;  --purpleWW:   #c592f7;  --pinkWW:     #FF7DDD;
  --greyDARK:   #404040;  --greyMED:    #606060;  --greyLGT:    #808080;
  --greyBRT:    #ADB5BD;  --blueHDR:    #275596;  --orangePPV:  #f57c00;
  --beigeWC:    #eca58f;  --purple205:  #b06af4;  --redROH:     #cc2229;
  --redIMP:     #da0109;  --orangeNWA:  #feb71a;  --greySTR:    #2c3034;
  --greyHOV:    #323539;
}

* { padding: 0; margin: 0; box-sizing: border-box; }

html { font-family: Arial; font-size: 100%; }

body {
  margin: 0; /* prevents scrollbars */
  color: var(--white);  background-color: var(--black);  min-width: 22em; 
  font-size: 1rem;
}

.main-container { 
  margin: 0 auto;  height: 100%;  width: 100%;  max-width: 60em;  display: grid;
  grid-template-columns: 1fr;  grid-template-rows: auto 1fr;
  grid-template-areas: 
  "header"
  "main";
  color: var(--white);     background-color: var(--black);
}

.index-layout {
  margin: 0 auto 0 auto;  grid-area: main;  display: flex;  flex-flow: row wrap;
  width: calc(100% - 1em);  max-width: 60em;  height: 100%;
  justify-content: space-evenly;  gap: 0.5em;  padding: 0.5em;  overflow: auto;
  align-items: flex-start;
}

.wwe  { color: var(--white);     }  .raw  { color: var(--redRAW);    }  .sd   { color: var(--blueSD);     }
.ppv  { color: var(--orangePPV); }  .nxt  { color: var(--yellowNXT); }  .ecw  { color: var(--greenECW);   }
.snme { color: var(--blueSNME);  }  .ss   { color: var(--orangeSS);  }  .cotc { color: var(--orangeCOTC); }
.wc   { color: var(--greenWC);   }  .tdr  { color: var(--greenTDR);  }  .ntr  { color: var(--blueNTR);    }
.ww   { color: var(--purpleWW);  }  .pro  { color: var(--pinkWW);    }  .mnr  { color: var(--redMNR);     }
.fns  { color: var(--blueFNS);   }  .blk  { color: var(--black);     }  .sups { color: #b7c9e2;         }
.cha  { color: var(--beigeWC);   }  .liv  { color: var(--purple205); }  .roh  { color: var(--redROH);     }
.imp  { color: var(--redIMP);    }  .nwa  { color: var(--orangeNWA); }  .wcw  { color: var(--redROH);     }
.unknown { color: var(--orangeNWA);}


.sticky-header   { position:sticky; z-index: 11; top: 0; background-color: var(--black);}

.left-white   { border-left:   solid 1px var(--white); }
.right-white  { border-right:  solid 1px var(--white); }
.bottom-white { border-bottom: solid 1px var(--white); }
.top-white    { border-top:    solid 1px var(--white); }
.all-white    { border:        solid 1px var(--white); }

.left-grey    { border-left:   solid 1px var(--greyMED); }
.right-grey   { border-right:  solid 1px var(--greyMED); }
.bottom-grey  { border-bottom: solid 1px var(--greyMED); }
.top-grey     { border-top:    solid 1px var(--greyMED); }
.all-grey     { border:        solid 1px var(--greyLGT); min-width: 16em;}

.month-dates { border-radius: 1em; border: 0.0625em solid var(--greyLGT); padding: 0.125em; max-width: 24%;}
.month-dates .event-name { width: 60%; }
.month-dates .event-date { width: 40%; }

a:visited, a:active, a:link, a:hover { color: inherit; font-weight: bold; text-decoration: none; }
a:hover { color: #F5F5F5AA; text-decoration: underline; }

.sort-border-top  { border: 2px var(--yellowNXT) solid; }
.sort-border-side { border-left: 2px var(--yellowNXT) solid; border-right: 2px var(--yellowNXT) solid; }

/* ------------------------------- Changes for Larger Screens --------------------------------------- */

@media screen and (max-width: 1096px)                          { body { font-size: 1.000rem;} }
@media screen and (min-width: 1096px) and (min-height: 812px)  { body { font-size: 1.125rem;} }
@media screen and (min-width: 1224px) and (min-height: 856px)  { body { font-size: 1.250rem;} }
@media screen and (min-width: 1344px) and (min-height: 944px)  { body { font-size: 1.375rem;} }
@media screen and (min-width: 1464px) and (min-height: 1024px) { body { font-size: 1.500rem;} }
@media screen and (min-width: 1584px) and (min-height: 1112px) { body { font-size: 1.625rem;} }
@media screen and (min-width: 1704px) and (min-height: 1194px) { body { font-size: 1.750rem;} }
@media screen and (min-width: 1824px) and (min-height: 1280px) { body { font-size: 1.875rem;} }
@media screen and (min-width: 1944px) and (min-height: 1368px) { body { font-size: 2.000rem;} }
@media screen and (min-width: 2064px) and (min-height: 1448px) { body { font-size: 2.125rem;} }
@media screen and (min-width: 2184px) and (min-height: 1536px) { body { font-size: 2.250rem;} }
@media screen and (min-width: 2304px) and (min-height: 1616px) { body { font-size: 2.375rem;} }
@media screen and (min-width: 2424px) and (min-height: 1704px) { body { font-size: 2.500rem;} }
@media screen and (min-width: 2544px) and (min-height: 1784px) { body { font-size: 2.625rem;} }
@media screen and (min-width: 2664px) and (min-height: 1872px) { body { font-size: 2.750rem;} }
@media screen and (min-width: 2784px) and (min-height: 1952px) { body { font-size: 2.875rem;} }
@media screen and (min-width: 2904px) and (min-height: 2040px) { body { font-size: 3.000rem;} }
@media screen and (min-width: 3024px) and (min-height: 2128px) { body { font-size: 3.125rem;} }
@media screen and (min-width: 3144px) and (min-height: 2208px) { body { font-size: 3.250rem;} }
@media screen and (min-width: 3264px) and (min-height: 2296px) { body { font-size: 3.375rem;} }
@media screen and (min-width: 3384px) and (min-height: 2376px) { body { font-size: 3.500rem;} }
@media screen and (min-width: 3504px) and (min-height: 2464px) { body { font-size: 3.625rem;} }
@media screen and (min-width: 3624px) and (min-height: 2544px) { body { font-size: 3.750rem;} }
@media screen and (min-width: 3744px) and (min-height: 2632px) { body { font-size: 3.875rem;} }
@media screen and (min-width: 3864px) and (min-height: 2712px) { body { font-size: 4.000rem;} }