: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
=====*/
    --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: rgb(47, 120, 193);                          /*   #2f78c1; hsl(210, 61%, 47%);  */
    --colorCoolDarker: rgb(41, 105, 168);                    /*  #2a6bac;  hsl(210, 61%, 41%) */

/*===== 
    #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;
        flex-direction: column;
        vertical-align: 1em;
        line-height: 1;
    }

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


/*==========
#Table
==========*/

table {
    font-size:  var(--smallTextSize);
}

caption {
    font-style: var(--alternateFontVoice);
    text-transform: capitalize;
    font-size:  var(--baseTextSize);
}

th, td {
    text-align: left;
    vertical-align: middle;
    line-height: var(--smallLineHeight);
    padding: .4em var(--baseSpacingHorizontal);
}

th {
    font-family: var(--titleFontFamily);
    font-weight: var(--heaviestFontWeight);
    font-size: var(--smallTitleSize); /*treat th in a body as h4*/
}

thead th,
tfoot th {
    font-size: var(--baseTitleSize); /*treat th in header/footer as h3*/
}