@layer generic;
@layer elements;
@layer layout;
@layer objects;
@layer components;
@layer trumps;

/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css */

/* Document
   ========================================================================== */

/**
 * 1. Change the default font family in all browsers (opinionated).
 * 2. Correct the line height in all browsers.
 * 3. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

@layer generic {
  html {
    line-height: 1.15; /* 2 */ /* 3 */
    text-size-adjust: 100%; /* 3 */
  }

  /* Sections
   ========================================================================== */

  /**
 * Remove the margin in all browsers (opinionated).
 */

  body {
    margin: 0;
  }

  /**
 * Add the correct display in IE 9-.
 */

  article,
  aside,
  footer,
  header,
  nav,
  section {
    display: block;
  }

  /**
 * `article` contexts in Chrome, Firefox, and Safari.
 */


  /* Grouping content
   ========================================================================== */

  /**
 * Add the correct display in IE 9-.
 * 1. Add the correct display in IE.
 */

  figcaption,
  figure,
  main { /* 1 */
    display: block;
  }

  /**
 * Add the correct margin in IE 8.
 */

  figure {
    margin: 1em 40px;
  }

  /**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

  hr {
    overflow: visible; /* 2 */
    box-sizing: content-box; /* 1 */
    height: 0; /* 1 */
  }

  /**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */


  /* Text-level semantics
   ========================================================================== */

  /**
 * 1. Remove the gray background on active links in IE 10.
 * 2. Remove gaps in links underline in iOS 8+ and Safari 8+.
 */

  a {
    background-color: transparent; /* 1 */
    text-decoration-skip: objects; /* 2 */
  }

  /**
 * Remove the outline on focused links when they are also active or hovered
 * in all browsers (opinionated).
 */

  a:active,
  a:hover {
    outline-width: 0;
  }

  /**
 * 1. Remove the bottom border in Firefox 39-.
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */

  abbr[title] {
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
    border-bottom: none; /* 1 */
  }

  /**
 * Prevent the duplicate application of `bolder` by the next rule in Safari 6.
 */

  b,
  strong {
    font-weight: inherit;
  }

  /**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

  b,
  strong {
    font-weight: bolder;
  }

  /**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

  code,
  kbd,
  samp {
    font-family: monospace; /* 1 */
    font-size: 1em; /* 2 */
  }

  /**
 * Add the correct font style in Android 4.3-.
 */

  dfn {
    font-style: italic;
  }

  /**
 * Add the correct background and color in IE 9-.
 */

  mark {
    color: #000;
    background-color: #ff0;
  }

  /**
 * Add the correct font size in all browsers.
 */

  small {
    font-size: 80%;
  }

  /**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */

  sub,
  sup {
    position: relative;
    vertical-align: baseline;
    font-size: 75%;
    line-height: 0;
  }

  sub {
    bottom: -0.25em;
  }

  sup {
    top: -0.5em;
  }

  /* Embedded content
   ========================================================================== */

  /**
 * Add the correct display in IE 9-.
 */

  audio,
  video {
    display: inline-block;
  }

  /**
 * Add the correct display in iOS 4-7.
 */

  audio:not([controls]) {
    display: none;
    height: 0;
  }

  /**
 * Remove the border on images inside links in IE 10-.
 */

  img {
    border-style: none;
  }

  /**
 * Hide the overflow in IE.
 */

  svg:not(:root) {
    overflow: hidden;
  }

  /* Forms
   ========================================================================== */

  /**
 * 1. Change the font styles in all browsers (opinionated).
 * 2. Remove the margin in Firefox and Safari.
 */

  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: sans-serif; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
  }

  /**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

  button,
  input { /* 1 */
    overflow: visible;
  }

  /**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */

  button,
  select { /* 1 */
    text-transform: none;
  }

  /**
 * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
 *    controls in Android 4.
 * 2. Correct the inability to style clickable types in iOS and Safari.
 */

  button,
  html [type='button'],
  [type='reset'],
  [type='submit'] {
    appearance: button; /* 2 */
  }

  /**
 * Remove the inner border and padding in Firefox.
 */

  button::-moz-focus-inner,
  [type='button']::-moz-focus-inner,
  [type='reset']::-moz-focus-inner,
  [type='submit']::-moz-focus-inner {
    padding: 0;
    border-style: none;
  }

  /**
 * Restore the focus styles unset by the previous rule.
 */

  button:-moz-focusring,
  [type='button']:-moz-focusring,
  [type='reset']:-moz-focusring,
  [type='submit']:-moz-focusring {
    outline: 1px dotted ButtonText;
  }

  /**
 * Change the border, margin, and padding in all browsers (opinionated).
 */

  fieldset {
    padding: 0.35em 0.625em 0.75em;
    border: 1px solid #c0c0c0;
    margin: 0 2px;
  }

  /**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

  legend {
    display: table; /* 1 */
    color: inherit; /* 2 */
    white-space: normal; /* 1 */
    box-sizing: border-box; /* 1 */
    padding: 0; /* 3 */
    max-width: 100%; /* 1 */
  }

  /**
 * 1. Add the correct display in IE 9-.
 * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

  progress {
    display: inline-block; /* 1 */
    vertical-align: baseline; /* 2 */
  }

  /**
 * Remove the default vertical scrollbar in IE.
 */

  textarea {
    overflow: auto;
  }

  /**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

  [type='checkbox'],
  [type='radio'] {
    box-sizing: border-box; /* 1 */
    padding: 0; /* 2 */
  }

  /**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */

  [type='number']::-webkit-inner-spin-button,
  [type='number']::-webkit-outer-spin-button {
    height: auto;
  }

  /**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */

  [type='search'] {
    appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
  }

  /**
 * Remove the inner padding and cancel buttons in Chrome and Safari on macOS.
 */

  [type='search']::-webkit-search-cancel-button,
  [type='search']::-webkit-search-decoration {
    appearance: none;
  }

  /**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

  ::-webkit-file-upload-button {
    appearance: button; /* 1 */
    font: inherit; /* 2 */
  }

  /* Interactive
   ========================================================================== */

  /*
 * Add the correct display in IE 9-.
 * 1. Add the correct display in Edge, IE, and Firefox.
 */

  details,
  menu {
    display: block;
  }

  /*
 * Add the correct display in all browsers.
 */

  summary {
    display: list-item;
  }

  /* Scripting
   ========================================================================== */

  /**
 * Add the correct display in IE 9-.
 */

  canvas {
    display: inline-block;
  }

  /**
 * Add the correct display in IE.
 */

  template {
    display: none;
  }

  /* Hidden
   ========================================================================== */

  /**
 * Add the correct display in IE 10-.
 */

  [hidden] {
    display: none;
  }

  :empty:not(iframe) {
    display: none;
  }
}

/*
    Comment-A: rem for left-right, for consistent alignment.
        em for top/bottom, so the spacing is relative to font-size
*/
@layer elements {
  :root {
/* ===== 
    #Color #Palette #Variables
    Variables follow convention found here: https://codepen.io/paceaux/pen/XdxQza
    Color is a very dark gray:  rgb (31, 31, 31). Grays are multiples of 31. 
    The NeutralDarker gray passes WCAGAA for contrast against a light background
===== */
    --colorNeutralDarkest: rgb(20, 20, 20);
    --colorNeutralDarker: rgb(31, 31, 31);              /* #1f1f1f; hsl(0%, 0%, 12%) */
    --colorNeutralDark: rgb(62, 62, 62);                /* #5d5d5d; hsl(0, 0%, 36%) */
    --colorNeutral: rgb(155, 155, 155);                 /* #9b9b9b; hsl(0, 0%, 61%) */
    --colorNeutralLight: rgb(186, 186, 186);            /* #bababa; hsl(0, 0%, 73%) */
    --colorNeutralLighter: rgb(217, 217, 217);          /* #d9d9d9; hsl(0, 0%, 85%) */

    /*
     These colors pass WCAG 2.1 for contrast against a light background and the NeutralDarker gray
     Before you change them, check your contrast ratios:  https://webaim.org/resources/linkcontrastchecker/
    */
    --colorCool: hsl(210deg, 61%, 46%);                      /*   #6ea5dc; hsl(210, 61%, 46%);  */
    --colorCoolDarker: hsl(210deg, 61%, 36%); 
    --colorCoolerLight: rgb(93, 124, 217);
    --colorCooler: rgb(62, 93, 155);
    --colorCoolerDark: rgb(31, 62, 124);
    --colorCoolest: rgb(93, 186, 63);

/* ===== 
    #Color #Link #Border #Variables
    Variables follow convention found here: https://gist.github.com/paceaux/8638765e747f5bd6387b721cde99e066#sassscssstylus-naming
===== */
    --baseTextColor: var(--colorNeutralDarker);
    --baseEditorialTextColor: var(--colorNeutralDark);
    --baseLinkColor: var(--colorCool);
    --baseLinkColorHover: var(--colorCoolDarker);
    --baseInlineBorderColor: var(--colorNeutralLight);
    --baseTextLineColor: var(--baseTextColor);
    --alertTextLineColor: rgb(255, 0, 0);
    --baseQuoteBackgroundColor: 155, 155, 155, ; /* Same as colorNeutral */

/* ===== 
    #LineHeight #Variables
===== */
    --baseLineHeight: 1.618;
    --smallLineHeight: 1.2;

/* ===== 
    #Body #Size #Paragraph #content-flow #Variables
===== */
    --biggestTextSize:  1.3em;
    --biggerTextSize: 1.2em;
    --bigTextSize: 1.1em;
    --baseTextSize: 1em;
    --smallTextSize: .8em;
    --smallerTextSize: .75em;
    --smallestTextSize: .618em;

/* ===== 
    #Heading #Title #Size #Variables
    The small title sizes use the big text sizes; so they overlap
    They're here, though, so that, if desired, we can deviate and not have them overlap
===== */
    --biggestTitleSize: 2.6179em; /* (16 x 1.618) x 1.618 */
    --bigTitleSize: 1.618em;
    --baseTitleSize: 1.5em;
    --smallTitleSize: var(--biggestTextSize);
    --smallerTitleSize: var(--biggerTextSize);
    --smallestTitleSize: var(--bigTextSize);

/* ===== 
    #Spacing #Text #Size #Variables
    rem for left-right, for consistent alignment.
    em for top/bottom, so the spacing is relative to font-size  
===== */
    --bigSpacingHorizontal: 1.618rem;
    --baseSpacingHorizontal: .618rem;
    --bigSpacingVertical: 1.618em;
    --baseSpacingVertical: .618em;

/* ===== 
    #Font #FontFamilies #Typeface #Code #Heading #Paragraphs #Variables
    base is meant to be what's applied to the majority of body copy
    title could also be called "headline", but would be  w/ other vars
===== */
    --baseFontFamily: georgia, "Times New Roman", serif;
    --titleFontFamily: helvetica, arial, sans-serif;
    --codeFontFamily: monospace;

/* ===== 
    #Font #Weight #Variables
    though font-weight ranges from 100 - 900, "normal" is 400 and the ends
         are a difference of 300 .
    So the "est" weights are the extremes, with room to add 
        light, lighter, heavy, heavier. 
    Recommend adding "ultra" if the weight is > 700
===== */
    --lightestFontWeight: 100;
    --baseFontWeight: 400;
    --heaviestFontWeight: 700;

/* ===== 
    #font #style #Variables
    Oblique will use the existing font and put the glyphs at an angle
    Alternate will look for a font labelled with an italic face
    If the browser doesn't have a labelled italic font, it synthesizes oblique
===== */
    --shiftedFontVoice: oblique 15deg;
    --baseFontVoice: normal;
    --alternateFontVoice: italic;

/* ===== 
    #font #quotes #border #Variables
    These are the default quotes for English. Change these quotes-as needed for other languages
    "secondary" quotes are nested quotes. e.g. <blockquote><blockquote>
    the CSS properties 'open-quote', 'close-quote' will use the primary open and primary close quotes listed here
===== */
    --baseTextQuotes: "\201C""\201D""\2018""\2019"; /* Primary open, primary close, secondary open, secondary close */
    --baseQuoteBorder: 10px solid var(--colorNeutralLighter);
    --smallQuoteBorder: 5px solid var(--colorNeutralLight);

/* ===== 
    #font #text #interactions #Variables
    Interactions could/should include
        idle: not being used, but an indicator that it can be
        interest: a user has shown desire to interact (e.g. hover or focus)
        active: a user is currently interacting
===== */
    --idleTextLineStyle: dotted;
    --interestTextLineStyle: solid;
    --activeTextLineStyle: solid;
    --idleTextDecoration: var(--idleTextLineStyle) underline 2px;
}

html {
    color: var(--baseTextColor);
    font-family: var(--baseFontFamily);
    font-size: calc(.5vw + 1rem); /* the font-size can scale up as the browser window gets larger, but doesn't get hard to read when the browser window shrinks */
    line-height: var(--baseLineHeight);
}


/* =====
  #Everything
===== */

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
dl,
pre {
    line-height: var(--baseLineHeight);
    margin: 0 var(--baseSpacingHorizontal);
}


/* =====
  #Headings
===== */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--titleFontFamily);
    font-weight: var(--heaviestFontWeight);
    line-height: var(--smallLineHeight);
    margin-bottom: calc(1.618vmin - 1vmax + .35em); /* increases margin as screen width gets smaller */
}

h1 {
    font-size: var(--biggestTitleSize);
}

h2 {
    font-size: var(--bigTitleSize);
}

h3 {
    font-size: var(--baseTitleSize);
}

h4 {
    font-size: var(--smallTitleSize);
}

h5 {
    font-size: var(--smallerTitleSize);
}

h6 {
    font-size: var(--smallestTitleSize);
}


/* =====
  #Lists
===== */

ul,
ol,
dl,
menu {
    padding: var(--baseSpacingVertical) var(--baseSpacingHorizontal);
}

li {
    list-style-position: inside;
    text-indent: -.9em; /* this brings the left text aligned with the text of a <dd> element */
    line-height: var(--baseLineHeight);
    padding: 0;
    margin: 0 0 0 var(--baseSpacingHorizontal);
}

nav li,
menu li {
    list-style-type: none;
    text-indent: 0;
    margin: 0;
}

dt {
    text-indent: calc(-1 * var(--baseSpacingHorizontal));
}

dd {
    padding: 0 var(--baseSpacingHorizontal);
    margin: 0;
}


/* =====
  #Paragraphs #Blocks
===== */

hr {
    color: var(--colorNeutral);
    border-width: .0625em;
    border-style: solid;
    margin: var(--bigSpacingVertical) var(--baseSpacingHorizontal);
}

p,
blockquote {
    line-height: var(--baseLineHeight);
}

p {
    font-size: var(--baseTextSize);
    margin-bottom: var(--baseSpacingVertical);
}

blockquote,
q {
    quotes: var(--baseTextQuotes);
}

blockquote::before,
q::before {
    content: open-quote;
}

/* Credit where it's due:
    https://css-tricks.com/snippets/css/simple-and-nice-blockquote-styling/
*/
blockquote {
    padding: var(--baseSpacingVertical) var(--baseSpacingHorizontal);
    border-left: var(--baseQuoteBorder);
    background: rgba(var(--baseQuoteBackgroundColor) 0.15);
    margin: var(--bigSpacingVertical) var(--baseSpacingHorizontal);
}

blockquote::before,
blockquote::after {
    color: var(--colorNeutralDark); /* Any lighter and it won't pass WCAG AA */
    vertical-align: -0.5em;
    font-size: 4em;
    line-height: 0.1em;
}

blockquote::before {
    margin-right: var(--baseSpacingHorizontal);
}

blockquote::after {
    content: no-close-quote;
}

q::after {
    content: close-quote;
}


/* =====
  #Content-Flow
===== */

em,
i,
cite {
    font-style: var(--alternateFontVoice);
}

strong,
b {
    font-weight: var(--heaviestFontWeight);
}

cite {
    display: block;
    text-align: right;
}

small,
sub,
sup {
    font-size: var(--smallestTextSize);
    line-height: 1;
}

sub {
    vertical-align: sub;
}

sup {
    vertical-align: super;
}


/* =====
  #Content-Flow #editorial
===== */

s,
strike,
del,
ins {
    color: var(--baseEditorialTextColor);
}

s,
strike,
del {
    text-decoration: line-through;
}

ins,
del {
    background-color: rgba(217, 217, 217, 0.25);
}

ins {
    text-decoration: none;
}

/* U is for misspelled words. Invite user to make a correction */
u {
    text-decoration: var(--idleTextDecoration);
    text-decoration-color: var(--alertTextLineColor);
}

/*
mark and selection should be different so user knows which one they've selected.
*/

/* hue: 120, saturation: 45%, lightness: 73%  */
mark {
    background-color: rgba(155, 217, 155, 0.9);
}

/* hue: 180, saturation: 45%, lightness: 73% */
::selection {
    background-color: rgba(155, 217, 217, 0.9);
}

/* Because mark and selection have same saturation and brightness, a selected <mark> won't stand out
    A hue between 120 and 180 seems to stand out the best in all colorblind tests, too
    hue: 150, saturation: 44%, lightness: 65%
 */
mark::selection {
    background-color: rgba(126, 205, 166, 0.9);
}

/* dfn and dt both do the same thing: denote a term to be defined */
dfn,
dt {
    font-weight: var(--heaviestFontWeight);
    font-style: var(--shiftedFontVoice);
    text-transform: capitalize;
}

abbr {
    text-transform: uppercase;
    text-decoration: none;
}

/* an abbreviation with a title should invite a user to hover over it */
abbr[title] {
    text-decoration: var(--idleTextDecoration);
}


/* =====
#Content-flow #Code
===== */

pre,
code,
var,
samp,
data {
    font-family: var(--codeFontFamily);
}

kbd,
samp,
data {
    background-color: rgba(var(--baseQuoteBackgroundColor) 0.2);
}

kbd {
    font-size: var(--smallerTextSize);
    padding: .25ex .5ex;
    border: 1px solid  var(--baseInlineBorderColor);
    border-radius: 3px;
}

/* Treat samp like a mini blockquote. because basically you're quoting what the computer would do */
samp,
data {
    padding: 0 10px;
}

var,
data {
    font-style: var(--alternateFontVoice);
}

samp {
    border-left: var(--smallQuoteBorder);
}

pre {
    overflow: scroll;
    font-size: var(--smallerTextSize);
    line-height: var(--smallLineHeight);
    padding: var(--baseSpacingVertical) var(--baseSpacingHorizontal);
    border: 1px solid var(--baseInlineBorderColor);
    border-radius: 2px;
}


/* =====
  #Ruby
===== */

ruby {
    position: relative;
    display: ruby;
    margin:0 .5ex;
    -webkit-ruby-position: before;
    ruby-position: over;
    ruby-position: before;
}

rtc, rbc {
    font-size: inherit;
    line-height: 1;
    ruby-align: start;
}

rt {
    display: ruby-text;
    font-size: .7em;
}

rt + rt {
    margin-left: .5ex;
}

rtc > bdo {
    display: -webkit-ruby-text-container;
    display: ruby-base-container;
}

/* complex ruby for chrome and Edge */

/* only FF has "complete" ruby support */
@supports (ruby-align: left) or ( not (display:ruby-base-container))  {
    ruby {
        display:inline-flex;
        vertical-align: 1em;
        line-height: 1;
        flex-direction: column;
    }

    rtc, rt {
        order: -1;
        flex-grow: 1;
        flex-shrink: 0;
    }

    rtc {
        display: inline-flex;
    }
}

/* Edge fixes */
@supports  ((ruby-align: left)) {
    rtc {
        justify-content: space-between;
    }

    rt {
        display: inline-flex;
    }
}


/* =====
#Links
===== */

a {
    color: var(--baseLinkColor);
    text-decoration: none;
    border-bottom: 1px var(--idleTextLineStyle);
    transition: all .3s ease-in-out;
}

a:hover,
a:focus {
    color: var(--baseLinkColorHover);
    border-bottom-style: var(--interestTextLineStyle);
    outline: none;
}

a:active {
    border-bottom-style: var(--activeTextLineStyle);
}

}

@layer elements {
  /* ==========
#Table #Variables
========== */
  table {
    /* =====
        #Text #Size
    ===== */
    --tableBiggestTextSize: var(--biggerTextSize, 1.2em);
    --tableBiggerTextSize: var(--bigTextSize, 1.1em);
    --tableBaseTextSize: var(--smallTextSize, 0.8em);
    --tableSmallerTextSize: var(--smallerTextSize, 0.75em);
    --tableSmallestTextSize: var(--smallerTextSize, 0.618em);

    /* Variable to be used in td, th */
    --tableCellSize: var(--tableBaseTextSize);


    /* =====
        #Title #Size
    ===== */
    --tableBiggestTitleSize: var(--baseTitleSize, 1.5em);
    --tableBiggerTitleSize: var(--biggestTextSize, 1.3em);
    --tableBaseTitleSize: var(--tableBiggestTextSize);
    --tableSmallerTitleSize: var(--tableBiggerTextSize);
    --tableSmallestTitleSize: var(--tableBaseTextSize);

    /* assume for any column headers */
    --tableColHeaderSize: var(--tableBiggestTitleSize);
    /* assume for any row headers */
    --tableRowHeaderSize: var(--tableBaseTitleSize);
    /* used by th in the tbody, thead, tfoot */
    --tableHeaderSize: var(--tableRowHeaderSize);


    /* =====
        #LineHeight
    ===== */
    --tableBaseLineHeight: var(--smallLineHeight, 1.2);
    --tableSmallLineHeight: 1;


    /* =====
        #Font #FontFamilies #Typeface
    ===== */
    --tableBaseFontFamily: var(--baseFontFamily, 'Georgia', 'Times New Roman', 'serif');
    --tableTitleFontFamily: var(--titleFontFamily, 'Helvetica', 'Arial', 'sans-serif');
    --tableCaptionTransform: capitalize;
    --tableCaptionFontStyle: italic;


    /* =====
        #Border
    ===== */
    --tableBorderCollapse: collapse;
    --tableBorderColor: var(--baseInlineBorderColor, rgb(192.5, 192.5, 192.5));
    --tableBorderStyle: solid;
    --tableCellBorderWidth: 2px;
    --tableHeaderBorderWidth: var(--tableCellBorderWidth);


    /* =====
        #Spacing
    ===== */
    --tableCellVertPadding: 0.4em;
    --tableCellHorzPadding: 0.618em;
    --tableTextAlign: left;
    --tableVertAlign: middle;


    /* =====
        #Colors
    ===== */
    --tableBaseTextColor: var(--baseTextColor, rgb(55, 55, 55));


    /* =====
        #Background
    ===== */
    --tableBodyPrimaryBgColor: transparent;
    --tableBodyAlternatingBgColor: rgba(165, 165, 165, 0.3);
    --tablePrimaryBgColor: var(--tableBodyPrimaryBgColor);
    --tableAlternatingBgColor: var(--tableBodyAlternatingBgColor);
  }


  /* ===== #TableSections #Variables
Variables scoped for the sections of a table
Rather than adding classes or redeclaring,
we have the ability to change styles by changing values of the variables
===== */
  thead,
  tfoot,
  tbody {
    --borderWidth: var(--tableCellBorderWidth);
  }

  /* Not Necessary, but in case we want the header rows to be different from the body rows */
  thead,
  tfoot {
    --tablePrimaryBgColor: var(--tableBodyAlternatingBgColor);
    --tableAlternatingBgColor: var(--tableBodyPrimaryBgColor);
  }

  /* thead will have bigger th and td */
  thead {
    --tableHeaderSize: var(--tableColHeaderSize);
    --tableCellSize: var(--tableBiggerTextSize);
  }

  /* tfoot will have smaller th and td */
  tfoot {
    --tableHeaderSize: var(--tableSmallestTitleSize);
    --tableCellSize: var(--tableSmallerTextSize);
  }

  /* tbody is the standard */
  tbody {
    --tableHeaderSize: var(--tableRowHeaderSize);
    --tableCellSize: var(--tableCellSize);
  }

  /* =====
#Table
===== */
  table {
    color: var(--tableBaseTextColor);
    font-family: var(--tableBaseFontFamily);
    border-collapse: var(--tableBorderCollapse);
  }

  caption {
    font-style: var(--tableCaptionFontStyle);
    text-transform: var(--tableCaptionTransform);
    font-size: var(--tableSmallestTextSize);
  }


  /* =====
#Table #Cells
===== */
  th,
  td {
    text-align: var(--tableTextAlign);
    vertical-align: var(--tableVertAlign);
    line-height: var(--tableBaseLineHeight);
    padding: var(--tableCellVertPadding);
    border-style: var(--tableBorderStyle);
    border-color: var(--tableBorderColor);
  }

  th:empty,
  td:empty {
    padding: 0;
    border-width: 0;
  }

  td {
    font-size: var(--tableCellSize);
    border-width: var(--borderWidth);
  }

  th {
    font-family: var(--tableTitleFontFamily);
    font-weight: bold;
    font-size: var(--tableHeaderSize);
    border-width: var(--tableHeaderBorderWidth);
  }

  th[scope='rowgroup'] {
    font-size: var(--tableBiggestTitleSize);
    padding: var(--tableCellVertPadding);
    border-width: 0;
  }

  thead th {
    border-bottom-width: var(--borderWidth);
  }

  tfoot th {
    border-top-width: var(--borderWidth);
  }

  /* =====
#Table #Rows
===== */
  tr {
    background-color: var(--tablePrimaryBgColor);
  }

  tr:nth-child(even) {
    background-color: var(--tableAlternatingBgColor);
  }
}

@keyframes fadein {
  0% {
    color: rgba(0, 0, 0, 0.01);
  }

  100% {
    color: rgba(55, 55, 55, 1);
  }
}

@layer layout {
  :root {
    --gridRail: 2%;
    --globalColumns: 3;
    --sectionFlow: column;
  }

  /* ====================
    LAYOUT
==================== */

  body {
    display: grid;
    grid-template-areas: 'railP header header header header railS' 'railP main main main main railS'  'railP footer footer footer footer railS';
    grid-template-rows: auto 1fr 10%;
    grid-template-columns: var(--gridRail) repeat(4, 1fr) var(--gridRail);
    min-height: 100vh;
  }

  @media screen and (min-width: 768px) {

    body {
      --gridRail: 10%;
      --sectionFlow: row;
    }
  }

  .g-header {
    grid-area: header;
  }

  .g-footer {
    grid-area: footer;
  }

  .g-main {
    grid-area: main;
  }


  .g-main {
    display: flex;
  }
}

@layer objects {
  /* ====================
    OBJECTS
==================== */

  /* ==========
     #TABLE
 ========== */
  /* === table ===
    __head
    __body
    __row
        --header
    __cell
        --heading
        --company
    __caption

    --history
    --education
*/

  .table {
    width: 100%;
  }

  .table__row--header th {
    border-bottom: 2px solid var(--colorNeutralDarkest);
  }

  /* ==========
     #LISTS
 ========== */

  /* === lists ===
    __listContainer

    --col
    --row
*/

  .lists {
    display: flex;
  }

  .lists--col {
    flex-direction: column;
  }

  .lists--row {
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .lists__listContainer {
    font-size: 0.8em;
    flex-basis: 24%;
    flex-grow: 1;
    flex-shrink: 0;
    border: 1px solid var(--colorCoolerLight);
    border-radius: 4px;
    margin: 0.618em;
  }

  .list__title {
    color: var(--colorCoolerDark);
    margin-top: var(--baseSpacingVertical);
  }
  /* === .list ===
    __item
    __itemLink
    __title

    --typeCircle
    --typeNone
    --links
*/
  .list--typeCircle {
    list-style-type: circle;
  }

  .list--typeNone {
    list-style-type: none;
  }

  .list--links {
    list-style-type: none;
    display: flex;
    justify-content: space-around;
    padding-right: 0;
    padding-left: 0;
    width: 100%;
    margin-left: 0;
  }

  .list:empty,
  .list__item:empty {
    display: none;
  }

  .list--links .list__item {
    text-indent: 0;
  }

  .list--links .list__itemLink {
    color: inherit;
    border-bottom:none;
  }

  .list--links .list__itemLink:is(:hover, :focus) {
    color: var(--colorNeutralDarker);
  }

  .list--links .list__itemLink:focus {
    outline: 1px dotted;
  }


  /* ===============
    #NAV
=============== */
  /* === nav ===
    __list
    __listItem
    __itemLink
    __element

    --sub
*/

  .nav__list {
    list-style-type: none;
    display: flex;
    justify-content: flex-end;
  }

  .nav--sub .nav__list {
    font-size: 0.8em;
    padding-right: 0;
    border-top: 1px solid;
    margin-top: 0.618rem;
    flex-direction: row;
    flex-wrap: wrap;
  }

  @media screen and (min-width: 768px) {
    .nav--sub {
      display: flex;
      justify-content: flex-end;
    }

    .nav--sub .nav__list {
      max-width: 50%;
    }
  }

.nav__listItem {
  margin-left: var(--baseSpacingHorizontal)
}

  /* ===============
    #icon
=============== */

  .icon::before {
    content: ' ';
    display: inline-block;
    vertical-align: -0.75em;
    line-height: 1;
    width: 2em;
    height: 2em;
    background-repeat: no-repeat;
    margin-right: 0.618em;
  }

  article .icon::before {
    display: none;
  }

  /* ===============
    #article
=============== */

  .article--collapsible .article__title {
    display: inline-block;
  }

  .article--collapsible .article__content {
    padding-left: 1.618rem;
  }
}
/* ===============
    #animation
=============== */

@keyframes fadeInOut {
  0% {
    color: rgba(0, 0, 0, 0.01);
  }

  50% {
    color: rgba(55, 55, 55, 1);
  }

  100% {
    color: rgba(0, 0, 0, 0.01);
  }
}

@keyframes setSlideUp {

  from {
    transform: translateY(0);
  }
  to {
    transform: translateY(calc(0em - (var(--bigTitleSize)  * var(--animatedSetCount))));
  }
}

@layer objects {
  .animation--setSlidesUp {
    --animatedSetItemHeight: calc(var(--biggestTitleSize) * 1.2);
    --animatedSetCount: 5;
    --animatedSetDelay: 4s;

    overflow: hidden;
    height: var(--animatedSetItemHeight);
  }

  .animation__set {
    animation-name: setSlideUp;
    animation-duration: calc(var(--animatedSetDelay) * var(--animatedSetCount));
    animation-timing-function: steps(var(--animatedSetCount), jump-start);
    animation-delay: var(--animatedSetDelay);
    animation-iteration-count: 1;
    animation-direction: alternate;
    animation-fill-mode: backwards;
  }

  .animation__item {
    height: var(--animatedSetItemHeight);
    animation-name: fadeInOut;
    animation-duration: var(--animatedSetDelay);
    animation-timing-function: ease-out;
    animation-iteration-count: var(--animatedSetCount);
  }
}

@layer components {
  /* ====================
    GLOBAL COMPONENTS
==================== */

  /* ==========
    #GlOBAL #HEADER
 ========== */
  /* === g-header ===
    __hgroup
    __title
    __titleLink
    __subtitle
    __element
*/

  .g-header,
  .g-footer {
    display: grid;
    grid-template-rows: auto auto;
    grid-template-columns: repeat(var(--globalColumns), auto);
  }

  .g-header {
    --biggestTitleSize: 2.2rem;

    grid-template-areas: 'branding branding branding' 'nav nav nav';
  }

  .g-header__hgroup {
    grid-area: branding;
  }

  .g-nav {
    grid-area: nav;
  }

  .g-header__title {
    text-align: center;
    line-height: 1;
    padding: 5px 10px;
    border: 5px solid;
    margin-bottom: 0;
  }
  
  @media screen and (min-width: 768px ) {
    .g-header__title {      
      text-align: left;
      display: inline-block;
    }
  }

  .g-header__subtitles {
    font-family: var(--titleFontFamily);
    font-weight: var(--heaviestFontWeight);
    font-size: var(--bigTitleSize);
    line-height: var(--smallLineHeight);
  }

  .g-header__subtitleList {
    display: block;
  }

  .g-header__subtitle {
    display: block;
    text-align: center;
  }

  .g-header__titleLink {
    color: inherit;
    border-bottom: none;
  }

  .g-header__titleLink:is(:hover, :focus, :active) {
    border-bottom: transparent;
  }

  @media screen and (min-width: 768px) {
    .g-header {
      grid-template-areas: 'branding . nav' 'branding . nav';
    }

    .g-header__subtitle {
      text-align: left;
    }
  }

  /* ==========
    #GlOBAL #NAV
 ========== */

  /* === g-nav ===
    __list
    __listItem
    __listItemLink

*/

  .g-nav__list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    padding: 0;
    margin-right: 1rem;
  }


  .g-nav__listItem {
    text-align: right;
    line-height: 1;
    margin: 0.618em 1rem 0 0;
  }

  @media screen and (min-width: 768px) {
    .g-nav__list {
      display: block;
    }

    .g-nav__listItem {
      margin: 0 0 0.2em 0;
    }
  }


  /* ===============
   #GLOBAL #FOOTER
=============== */

  /* === g-footer ===
    __legal
    __links
    __link
    __element
    __element

*/

  .g-footer {
    grid-template-areas: 'legal legal legal' '. links .';
    border-top: 1px solid #d8d8d8;
  }

  .g-footer__legal {
    grid-area: legal;
    text-align: center;
  }

  .g-footer__links {
    grid-area: links;
    text-align: center;
  }

  .g-footer__link {
    font-size: 0.618em;
  }


  @media screen and (min-width: 768px) {
    .g-footer {
      grid-template-areas: 'legal . links' '. . .';
    }

    .g-footer__legal {
      text-align: left;
    }
    .g-footer__links {
      text-align: right;
    }
  }
  /* ===============
    #GlOBAL #MAIN
=============== */

  .g-main {
    animation-name: fadein;
    animation-duration: 0.75s;
    animation-timing-function: ease-in;
    animation-iteration-count: 1;
    animation-direction: linear;
  }

  .g-main {
    flex-direction: column;
  }
  /* ===============
      #GlOBAL #SECTION #HEADER
      .s-header
        __title
        __content
  =============== */

  .s-header__content a {
    font-weight: bold;
  }
}

@layer components {
  /* ====================
    COMPONENTS
==================== */


  /* ==========
     #WORKHISTORY
 ========== */

  /* === workHistory ===
    __header
    __company
    __duration
    __position

    --modifier
    --modifier
*/

  .workHistory__header {
    border-bottom: 0.25em solid var(--colorNeutralDarkest);
  }

  @media screen and (min-width: 768px) {
    .workHistory__header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
    }
  }

  .workHistory__company,
  .workHistory__duration {
    margin-bottom: 0;
  }

  /* ===============
    #POSITION
=============== */

  /* === position ===
    __header
    __title
    __duration
    __responsibilities
    __accomplishments
    __brag

    --modifier
    --modifier
*/

  .position {
    --textSize: inherit;

    font-size: var(--textSize);
    padding: 0.5rem 0 0 0.618rem;
    border-radius: 5px;
    background-color: rgba(220, 220, 220, 0.2);
    margin: 0.5rem 0 0 1rem;
  }

  .position__header {
    font-size: 0.618em;
    border-bottom: 0.25em solid var(--colorNeutralDarkest);
  }

  @media screen and (min-width: 768px) {
    .position__header {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
    }
  }

  .position__accomplishments  .list__item {
    list-style-type: '\2794 \2003';
    padding-left: var(--baseSpacingHorizontal);
  }

  .position__responsibilities {
    font-size: 0.8em;
  }

  .position__brag {
    font-weight: 700;
    padding-left: 0;
    margin-left: 0;
  }

  .position__brag .list__item {
    list-style-type: '\1F389 \2003';
    padding-left: var(--baseSpacingHorizontal);
  }

  .position__brag a {
    border-bottom-color: var(--baseLinkColor);
  }

  .position__brag a:focus {
    border-bottom-style: solid;
  }

  .position:nth-of-type(2) {
    --textSize: 0.9em;
  }
  .position:nth-of-type(3) {
    --textSize: 0.8em;
  }
  .position:nth-of-type(4) {
    --textSize: 0.7em;
  }
  .position:nth-of-type(5) {
    --textSize: 0.6em;
  }
  .position:nth-of-type(6) {
    --textSize: 0.5em;
  }


  /* ===============
    #PORTFOLIO
=============== */

  /* === portfolio ===
    __section
    __sectionHeader
    __sectionLink
    __sectionTitle
    __sectionDescription
    __footer
    __codeLinks

    --modifier
    --modifier
*/

  .portfolio {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
  }

  .portfolio .s-header {
    width: 100%;
  }

  .portfolio__section {
    display: flex;
    flex-wrap: wrap;
    flex-basis: 100%;
    justify-content: space-between;
  }

  @media screen and (min-width: 768px) {
    .portfolio__section {
      flex-basis: 45%;
    }
  }

  .portfolio__sectionHeader {
    width: 100%;
  }

  .portfolio__sectionLink {
    color: inherit;
    width: 100%;
    border-bottom: none;
  }

  .portfolio__sectionLink:is(:hover, :focus) {
    border-bottom: none;
  }
  
  .portfolio__sectionTitle {
    border-bottom-width: 4px;
    border-bottom-style: solid;
    border-bottom-color: var(--colorNeutralDarkest);
    transition: all .3s ease-in-out;
  }

  .portfolio__sectionTitle:is(.portfolio__sectionLink > *) {
    border-bottom-style:  var(--idleTextLineStyle);
  }

  .portfolio__sectionLink:is(:hover, :focus) .portfolio__sectionTitle {
    border-bottom-style: var(--interestTextLineStyle);
  }

  .portfolio__sectionDescription {
    font-style: italic;
  }

  .portfolio__footer {
    width: 100%;
  }

  .portfolio__codeLinks {
    position: fixed;
    bottom: 4.5rem;
    left: 0;
    z-index: 100;
    width: 12em;
  }

  .portfolio__codeLinks .list--links {
    color: transparent;
    padding: 0;
    flex-direction: column;
  }

  .portfolio__codeLinks .list__item {
    margin: 0.25em 0;
  }

  .portfolio__codeLinks .list__itemLink {
    padding: 0.5em 0.618rem 0.5em 0;
  }

  .portfolio__codeLinks .list__itemLink:is(:hover, :focus) {
    background-color: var(--colorNeutralLighter);
  }

  /* === portfolioItem ===
    __header
    __title
    __description
    __repoLink
    __demo

    --modifier
    --modifier
*/
  .portfolioItem {
    display: flex;
    font-size: 0.7em;
    padding: 0.618em 0 0 0;
    border-radius: 2px;
    background: rgba(110, 165, 193, 0.08);
    margin: 1.618em 1.618rem;
    flex-direction: column;
    flex-basis: 40%;
    flex-grow: 1;
    flex-shrink: 0;
    justify-content: space-between;
  }

  .portfolioItem__description a {
    border-bottom-color: var(--baseLinkColor);
  }

  .portfolioItem__description a:focus {
    border-bottom-style: solid;
  }

  .portfolioItem__repoLink {
    align-self: flex-start;
    font-weight: bold;
    margin: 0.618rem;
  }

  .portfolioItem__repoLink:is(:hover, :focus) {
    border-bottom-style: solid;
  }

  .portfolioItem__repoLink::after {
    content: '\21F0';
    position: absolute;
    display: inline-block;
    color: transparent;
    font-weight: normal;
    margin-left: 0;
    transition: color .15s ease-in-out, margin-left .25s ease-in-out;
  }
  
  .portfolioItem__repoLink:is(:hover, :focus)::after {
    color: inherit;
    margin-left: var(--baseSpacingHorizontal);
  }

  .portfolioItem__description li {
    line-height: var(--smallLineHeight);
  }

  .portfolioItem__demo {
    width: 98%;
    min-height: 600px;
    border: none;
    background: #fff;
    margin: 0 auto;
    box-shadow: 0 0 1px 1px rgba(55, 55, 55, 0.4);
  }

  .icon[href*='codepen']::before {
    background-image: url('/assets/img/codepen.svg');
  }

  .icon[href*='github']::before {
    background-image: url('/assets/img/github.svg');
  }

  .icon[href*='gulp']::before {
    background-image: url('/assets/img/gulp.svg');
  }

  .icon[href*='jsfiddle']::before {
    background-image: url('/assets/img/jsfiddle.svg');
  }

  .icon[href*='linkedin']::before {
    background-image: url('/assets/img/linkedin.svg');
  }

  .icon[href*='quora']::before {
    background-image: url('/assets/img/quora.svg');
  }

  .icon[href*='sass']::before {
    background-image: url('/assets/img/sass.svg');
  }

  .icon[href*='stack']::before {
    background-image: url('/assets/img/stack.svg');
  }

  .icon[href*='twitter']::before {
    background-image: url('/assets/img/twitter.svg');
  }

  .icon[href*='blog']::before {
    background-image: url('/assets/img/blog.svg');
  }

  .poison {
    visibility: hidden;
    overflow: hidden;
    text-indent: -9999vw;
    width: 0;
    height: 0;
  }
}

@layer trumps {
  /* ====================
    TRUMPS
==================== */

  .collapsed {
    overflow: hidden;
    padding: 0;
    height: 0;
    transition: all 0.3s ease-in;
  }

  .is-active {
    border-bottom: 1px solid !important;
  }
}

@keyframes unlock {
  0% {
    background-color: rgba(193, 110, 110, 0.1);
  }

  50% {
    background-color: rgba(193, 55, 55, 0.7);
  }

  100% {
    background-color: rgba(193, 110, 110, 0.1);
  }
}

@layer trumps {
  .is-unlocked {
    animation-name: unlock;
    animation-duration: 1s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: 2;
    animation-direction: linear;
  }
}