/* Variables accessible by all css classes/ids */
      :root {
        --panel-size: 37%;
        --cell-size: 50px;
        --orig-cell-size: 50px;
      }
      
      p {     /* https://html-shark.com/index.htm*/
        color: white;
      }
      
      :-webkit-scrollbar {
        width: 20px;
      }
      
      :-webkit-scrollbar-thumb {
        background: red; 
        border-radius: 10px;
      }
      
      /* ========== Table Stuff ==========*/
      #container-main, #container-fan {
        display: flex;
        flex-wrap: wrap;
        border: 2px solid white;
        vertical-align: center;
        overflow: hidden;
      }
      table, th, td {
        border: 1px solid;
        color: white;
      }
      
      .trackerTable {
        flex-grow: 1;             /* lets the table div grow to fill space but not shrink */
        display: inline-block;
        border: 1px solid white;
        padding: 10px;
        border-spacing: 0px;      /* remove spacing between rows to get clean grid */
      }
      
      .tableTitle {
        
      }
      
      .tableLegend {
        display: inline-block;
        vertical-align: middle;
        width: 65px;
        height: var(--cell-size);
        font-size: 18px;
        font-weight: bold;
        line-height: 2.5;     /* somehow margin didn't get rid of the heading space, but this trial & error'd line height does?? */
        margin: 0;
      }
      
      .trackerCell {
        width: var(--cell-size);
        height: var(--cell-size);
        vertical-align: middle;     /* putting in the unicode star character shifts everything off, this centers it back */
        margin: 0;
        font-size: 15px;
        transition: transform .05s;
      } .trackerCell:hover {
        transform: scale(1.35);
      }
      
      .trackerFooter1 {
        width: var(--cell-size);
        height: calc(var(--cell-size) / 3);
        vertical-align: top;
        background: rgba(0,0,0,0);
        display: inline-block;
        
        border-style: hidden;
        /*border-left: 2px solid;*/
        border-color: #5f5f68;
        
        font-family: times;
        text-align: left;
        color: white;
        pointer-events: none;
      }
      
      .zoom {
        padding: 5px;
        background-color: green;
        transition: transform .05s; /* animation plays on transform */
        width: 200px;
        height: 200px;
        margin: 0 auto;
        cursor:pointer;
      }
      
      .zoom:hover {
        transform: scale(1.2); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
      }
      
      /* ========== Styling for the side panel ========== */
      #sidePanel { /*https://stackoverflow.com/questions/4847996/css-animation-onclick*/
        --bg-image: url("");
        
        /* positioning and sizing stuff */
        position: fixed;   /* forces to the target location, since absolute moves with scroll this does not*/
        width: var(--panel-size);
        height: 100%;
        right:0;
        top: 0px;
        padding-left: 20px;
        padding-right: 20px;
        margin:0;
        
        
        background-color: gray;   /* in case bg breaks */
        font-size: 20px;
        
        animation-name: fromRight;
        animation-duration: .35s;
        
        z-index: 1;
      }
      
      /* sneaky special element is created alongside sidePanel and allows customization of the image (mainly filter) */
      #sidePanel::before {
      /* absolute at these dimensions basically means that it will be sized exactly as sidePanel */
      position: absolute;
      top: 0px;
      left: 0px;
      right: 0px;
      bottom: 0px;    

      /* creates a content box and then styles it up */
      content: "";
      background-image: var(--bg-image);
      background-repeat: no-repeat;
      background-size: cover;
      
      /* hide away behind the real panel with text, also filter for readability */
      filter: brightness(45%);
      z-index: -1;
      }
      
      .panelContent {
        font-family: Arial;
        font-size: 18px;
        padding-left: 5px;
        padding-right: 5px;
        color: silver;
      }
      
      #panelBody {
        max-height: 35%;
        overflow-y: scroll;
      }
      
      .realImg {
        width: initial;
        height: initial;
      }
      
      /* panel animations */
      @keyframes fromLeft {
        0% { left: -50%; }
        100% { left: 0; }
      }
      @keyframes fromRight {
        0% { right: -50%; }
        100% { right: 0; }
      }
      @keyframes outLeft {
        0% { left: 0; }
        100% { left: -50%; }
      }
      @keyframes outRight {
        0% { right: 0; }
        100% { right: -50%; }
      }