body {
  background: black;
  color: white;
  font-size: 13px;
}
h1 {font-size: 1.50em; line-height: 0.75em;}
h2 {font-size: 1.00em; line-height: 0.75em;
  text-transform: uppercase; letter-spacing: 2px;}
a {color: palegoldenrod; text-decoration-color: palegoldenrod;}

.wandCore {height: calc(100vh - 150px);
  max-height: calc(100vh - 150px) !important;}

.kingdomHeader {
  position: sticky; top: 0; z-index: 4;
}
.familyHeader {position: sticky; top: 0; z-index: 3;}

.subfamily, .subgenus {font-size: 80%; font-weight: 200;}

.coreHeading div {text-align: center; vertical-align: middle;}

.supreme {text-shadow: 0 0 3px #e6be8a, 0 0 6px gold, 0 0 9px gold, 0 0 12px #b87333;}

.species {
  border: 1.5px inset #c19a6b;
  background: rgba(171,135,41,0.15);
  margin: 2px 8px; 
  font-family: Roboto Condensed; font-weight: 200;
}
.species tr td {
  font-size: 80%; line-height: 1em;
  border-bottom: 1.5px groove #45704a;}
.species tr td:first-child {width: 200px;}
.species tr td:last-child {width: 150px;}
.species tr:last-child td {border-bottom: none!important;}
.speciesScroll {
    overflow-y: auto;
    scrollbar-color: darkgoldenrod #141100; scrollbar-width: thin;}

.corePart {margin: 1em 0; border-left: 3px double darkgoldenrod;}
.specialty {font-size: 90%;}
.quality {font-size: 80%;}


/* FULL SCREENS */
@media (min-width: 950px) {
  body {font-family: Roboto Condensed; font-weight: 300;}
  .wandCore {max-width: 950px; margin: auto;
    overflow-y: auto;
    scrollbar-color: darkgoldenrod #141100;}
  .kingdomHeader {
    writing-mode: vertical-rl; transform: rotate(180deg);
    float: left; width: 37.5px; padding: 1em 0;
    background: linear-gradient(to top, #665d1e, black);
  }
  .family {margin-left: 40px;}
  .familyHeader {
    float: left; width: 90px; padding: 15px 5px;
    text-align: center; border-top: 1.5px dotted #63b76c;
    background: linear-gradient(to bottom right, #004953, black, black);
  }
  .subfamily {font-size: 90%;}
  
  .core {
    margin-left: 100px;
    display: grid;
    grid-template-columns: 150px 310px 316px;
    place-items: center;
    border-top: 1.5px groove #63b76c;
  }
  .coreHeading {
    display: grid;
    grid-template-columns: 75px 75px;
    align-items: start;
  }
  .genus {grid-column: 1;}
  .coreHeading .common {grid-column: 2; font-weight: bold;}
  .speciesScroll {max-height: 20vh;}
  .corePart {
    margin-left: 10px;
    display: grid;
    grid-template-columns: 64px 32px 120px 100px;
    place-items: center;
    border-bottom: 1.5px groove #45704a;
  }
  .corePart div {text-align: center; vertical-align: middle;}
}


/* MOBILE DEVICES */
@media (max-width: 949px) {
  body {font-family: Jura;}
  h1 {margin: 8px;}
  h2 {margin: 4px;}
  .wandCore {
    max-width: 650px; margin: auto;
    border: 1px dotted darkgoldenrod;
    text-align: center;
    overflow-y: scroll;
    scrollbar-color: darkgoldenrod #141100;
  }
  .kingdomHeader {
    display: inline-block; width: 100%; max-width: 600px; height: 26px;
    background: linear-gradient(to bottom right, #2D2110, #2D2110, #71706E);
    border-bottom: 0.5px solid black;
    font-family: Bahnschrift SemiBold, Calibri, sans-serif;
  }
  .familyHeader {
    display: inline-block; width: 100%; max-width: 600px;
    top: 27px; background: radial-gradient(circle, rgba(0, 19, 8, 1) 25%, #004953 100%);
    border: 1px ridge #053E1D; border-radius: 10px; padding: 1px 0 0;
    font-family: Bahnschrift, Calibri, sans-serif; color: #50C878;
  }
  .familyName, .subfamily {display: inline;}
  
  .core {width: 100%; max-width: 600px; margin: auto;
    border-bottom: 1px dotted #4F7942;}
  .family .core:last-child {margin-bottom: 10px;}
  
  .coreHeading div {display: inline;}
  .genus::after {content: " · ";}
  .common {-webkit-text-stroke: 0.5px white;}
  
  .speciesScroll {max-width: 400px; margin: auto; max-height: 10.55vh;}
  
  .corePart {
    display: grid; max-width: 500px; margin: 1em auto;
    grid-template-columns: 64px 40px 135px 250px;
    justify-items: start; align-items: baseline;
    padding-left: 1em;
    text-align: justify!important;
  }
}