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;}

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

.cladeHeader {
  position: sticky; top: 0; z-index: 5;
}
.orderHeader {
  position: sticky; top: 0; z-index: 4;
}
.familyHeader {position: sticky; top: 0; z-index: 3;}

.commonName {font-size: 80%; font-weight: 200;}

.woodHeading 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(41,171,135,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: 210px;}
.species tr td:last-child {width: 165px;}
.species tr:last-child td {border-bottom: none!important;}
.speciesScroll {
    overflow-y: auto;
    scrollbar-color: green #001308; scrollbar-width: thin;}

.traits {text-align: center;}
.quality {font-size: 80%;}


/* FULL SCREENS */
@media (min-width: 950px) {
  body {font-family: Roboto Condensed; font-weight: 300;}
  .wandWood {max-width: 950px; margin: auto;
    overflow-y: auto;
    scrollbar-color: green #001308;}
  .cladeHeader {
    writing-mode: vertical-rl; transform: rotate(180deg);
    float: left; width: 40px; padding-bottom: 1em;
    background: linear-gradient(to top, #4D5940, black);
  }
  .order {margin-left: 45px;}
  .orderHeader {
    writing-mode: vertical-rl; transform: rotate(180deg);
    float: left; width: 30px; padding: 1em 0;
    background: linear-gradient(to top, #2f4f3f, black); 
  }
  .family {margin-left: 35px;}
  .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);
  }
  .familyHeader span {display: block;}
  .familyName {font-weight: 400;}
  .subfamily {font-size: 90%;}
  
  .wood {
    margin-left: 100px;
    display: grid;
    grid-template-columns: 240px 310px auto;
    place-items: center;
    border-top: 1.5px groove #63b76c;
}
  .woodHeading {
    display: grid;
    grid-template-columns: 100px 100px 40px;
    align-items: start;
  } 
  .genus {grid-column: 1;}
  .woodHeading .common {grid-column: 2; font-weight: bold;}
  .woodHeading .rating {grid-column: 3;}
  .species {grid-column: 2;}
  .speciesScroll {max-height: 26vh;}
  .traits {grid-column: 3; padding: 0 10px;}
  
  .genus span {display: block;}
}


/* MOBILE DEVICES */
@media (max-width: 949px) {
  body {font-family: Jura;}
  h1 {margin: 8px;}
  h2 {margin: 4px;}
  .wandWood {
    max-width: 650px; margin: auto;
    border: 1px dotted darkgoldenrod;
    text-align: center;
    overflow-y: scroll;
    scrollbar-color: green #001308;
  }
  .cladeHeader {
    display: inline-block; width: 100%; max-width: 600px; height: 26px;
    background: linear-gradient(to bottom right, #01796F, #4D5940); 
    border-bottom: 0.5px solid black;
    font-family: Bahnschrift SemiBold, Calibri, sans-serif;
  }
  .orderHeader {
    display: inline-block; width: 95%; max-width: 570px; height: 16px;
    top: 27px; background: #2f4f3f; text-transform: uppercase; letter-spacing: 3px;
    border-left: 1px solid goldenrod; border-right: 1px solid goldenrod;
    border-bottom: 0.5px solid black;
  }
  .familyHeader {
    display: inline-block; width:100%; max-width: 600px; 
    top: 44px; 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;}
  
  .wood {width: 100%; max-width: 600px; margin: auto;
    border-bottom: 1px dotted #4F7942;}
  .family .wood:last-child {margin-bottom: 10px;}
  
  .woodHeading {
    display: grid; align-items: start;
    grid-template-columns: 30% 40% 30%;
    font-size: 108%; padding: 3px 0px;
  } 
  .genus {grid-column: 1;}
  .woodHeading .common {grid-column: 2; font-weight: bold;}
  .woodHeading .rating {grid-column: 3;}
  
  .speciesScroll {max-width: 400px; margin: auto; max-height: 10.55vh;}
  
  .personality {font-style: italic;}
}