:root {
    --pdSmall:2px; /** backward compatibility */
    --blog_card_gap:var(--pdSmall);
}

.BlogCardGrid {
    display:grid;
    grid-template-columns: repeat( auto-fit, minmax(250px, 1fr) );
    grid-gap: var(--blog_card_gap);
}


:root {
    --rgbPrim:100,100,100;
    --blog_card_shadow:var(--rgbPrim);
}

.BlogCard {
    display:inline-block;
    padding: 4px;
    box-shadow: -1px 2px 3px rgba(var(--blog_card_shadow), 0.3), -1px 2px 6px rgba(var(--blog_card_shadow), 0.1);
}

.BlogCard h3 {
    margin:0;
    margin-top: 0;
    /* var(--pdSmall); */
    margin-bottom: 4px;
}
.BlogCard nav {
    margin-left: 4px;
    word-break:break-word;
    text-overflow:clip;
    overflow:hidden;
}

.BlogCard a::before {
    content: "- ";
}

.BlogCard {

}

.PageWrap {
    width:100%;
    min-height:100%;

    display:flex;
    flex-direction:column;  
    justify-content:center;
    align-items:center;
}

.MainWrapper {
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:100%;
    align-items:center;
    flex:1;
}

.MainContent {
    min-width:58%;
    max-width:1280px;
    width:100%;
    flex:1;
    
    background:var(--cContent);
    box-shadow: var(--bs1);
    padding-bottom:  var(--pdContainer);
    /* display:grid; */
    /* grid-template-columns: repeat(16, 6.25%); */
    /* grid-template-rows:auto; */
}
.MainContent > h1 {
    margin-top: calc(var(--pdContainer) / 2);
}
.HeaderWrapper {
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:100%;
    align-items:center;
}

.HeaderContent {
    min-width:58%;
    max-width:1280px;
    width:100%;
}
/* .FooterWrapper {
    display:flex;
    flex-direction:column;
    width:100%;
    max-width:100%;
    align-items:center;
}

.FooterContent {
    min-width:58%;
    max-width:1280px;
    width:100%;

    background:var(--cFoot);
} */


.ArticlesOverview {
    --cLinkPrim: var(--cPrim);
    --cLinkSnd: transparent;
}
.ArticlesOverview .BlogList {
    --pdChild: 4px;
}
.ArticlesOverview {
    --pdChild: 8px;
    /* margin: 0 var(--pdChild); */
}

#main a {
    border-bottom: none;
}
* { 
    box-sizing: border-box; 
}

img {
    max-width:100%;
}

p, section {
    margin: 0 calc( var(--pdChild) / 2);
    padding: 0 calc(var(--pdChild) / 2);
}


a {
    color: var(--cLinkPrim);
}

p {
    max-width: var(--wPara);
}

a, a:visited {
    text-decoration: none;
    border-bottom: solid 2px var(--cLinkSnd);
}
a:hover, a:focus, a:active {
    --cLinkPrim: var(--cSnd);
    --cLinkSnd: var(--cPrim);
}


blockquote {
    border: solid 1px var(--cDarkBlue);
    margin:10px;
    padding:2em;
    background: var(--cWhite);
    color: var(--cBlack);
    text-decoration: none;
    border-bottom: solid 2px var(--cGreen);
    max-width: var(--wQuote);
}

hr {
    border-color: var(--cLine);
}


/** From type-scale.com & fontpair.co */

html {font-size: 112.5%;} /*18px*/

body {
    font-family: var(--bFont);
    font-weight: 400;
    line-height: 1.65;
}

p {margin-bottom: 1.15rem;}

h1, h2, h3, h4, h5, h6 {
    /* margin: 2.75rem 0 1.05rem; */
    margin: 2.75rem var(--pdChild) 1.05rem;
    font-family: var(--hFont);
    font-weight: 400;
    line-height: 1.15;
}

h1 {
    margin-top: 0;
    font-size: var(--fsh1);
}

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

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

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

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

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

small, .text_small {font-size:var(--fssmall);}


pre, code:not([class]){
    margin: 0 1px;
    padding:0 2px;
    /* max-height:600px; */
    background: var(--cLightGrey);
    overflow-x:auto;
}

code:not([class]){
    display:inline;
    color: var(--cCodeInline);
}

pre {
    margin: var(--mgCodeBlock);
    padding: var(--pdCodeBlock);
    border-top: var(--sBorderFade);
    border-right: var(--sBorderFade);
    border-bottom: var(--sBorder);
    border-left: var(--sBorder);
    max-width:100%;
    line-height: 1.0;
    box-shadow: var(--bs2);
}


html, body {
    height:100%;
    width:100%;
    padding:0;
    margin:0;

    background:var(--cHtml);
    color:var(--cTxtPrim);

    font-size: var(--fsRoot);
}
body #main {
    font-size: var(--fsLarge);
}   

main, header {
    padding:0;
    margin:0;
    width:100%;
    display:flex;
    flex-direction:column;
}


main {
    flex: 1;
}


/* header styles */
header {

    --cTxtPrim: var(--cSndBright);
    --cTxtSnd: var(--cPrim);

    background:var(--cHead);
    border-bottom: var(--sHeadBorder);
    padding: var(--pdSmall);
}
header a {
    --cLinkPrim: var(--cSndBright);
    --cLinkSnd: var(--cWhite);
    border-bottom: none;
    color: var(--cWhite);
    display:inline-block;
}
header a:hover, header a:active, header a:focus {
    color: var(--cSndBright);
}

header h1 {
    font-weight:600;
    display:inline-block;
    height:100%;
    margin:0;
    padding:0;
    margin-right: var(--pdSmall);
}

header a > h1, header a:visited > h1{
    text-decoration:none;
    color: var(--cTxtPrim);
    height:100%;
    padding: var(--pdLogo);
    display:inline-block;
    margin-bottom: var(--pdHeadBtm);
}

header a:hover > h1 , header a:active > h1, header a:focus > h1 {
    text-decoration: none;
    color: var(--cTxtSnd);
    background: var(--cTxtPrim);
}
header nav {
    --cLinkPrim: var(--cTxtPrim);
    display:inline-block;
}
header nav a {
    padding-left: var(--pdSmall);
    padding-right: var(--pdSmall);
}

footer {
    margin:0;
    width:100%;
    padding: var(--pdContainer);
    margin:0;
    text-align:center;
    background:var(--cFooterBG);
    font-size: var(--fsSmall);
    color: var(--cGrey);
}
footer a {
    color: var(--cGrey);
    border-bottom:none;
}
footer a:hover, footer a:focus, footer a:active{
    color: var(--cBlack);
}
footer p, footer .logo {
    max-width:none;
    padding:0;
    margin: 0;
    margin-bottom: var(--pdSmall);
}


ol ol li, ul ol li{
    list-style-type:lower-alpha;
}



/* @font-face { */
/*     font-family: Kaushan; */
/*     src: url("/res/font/kaushan.otf"); */
/*      [> format("opentype"); <] */
/* } */
/* @font-face { */
    /* font-family: EB Garamond; */
    /* src: url("/res/font/EBGaramond12-Regular.otf"); */
     /* [> format("opentype"); <] */
/* } */

/* @font-face { */
/*     font-family: Dancing Script; */
/*     src: url("/res/font/DancingScript-Regular.otf"); */
/*      [> format("opentype"); <] */
/* } */

/**
 * StackOverflow.com light style
 *
 * @stackoverflow/stacks v0.56.0
 * https://github.com/StackExchange/Stacks
 */

.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em;
  color: #2f3337;
  background: #f6f6f6;
}

.hljs-comment {
  color: #656e77;
}

.hljs-keyword,
.hljs-selector-tag,
.hljs-meta-keyword,
.hljs-doctag,
.hljs-section,
.hljs-selector-class,
.hljs-meta,
.hljs-selector-pseudo,
.hljs-attr {
  color: #015692;
}

.hljs-attribute {
  color: #803378;
}

.hljs-name,
.hljs-type,
.hljs-number,
.hljs-selector-id,
.hljs-quote,
.hljs-template-tag,
.hljs-built_in,
.hljs-title,
.hljs-literal {
  color: #b75501;
}

.hljs-string,
.hljs-regexp,
.hljs-symbol,
.hljs-variable,
.hljs-template-variable,
.hljs-link,
.hljs-selector-attr,
.hljs-meta-string {
  color: #54790d;
}

.hljs-bullet,
.hljs-code {
  color: #535a60;
}

.hljs-deletion {
  color: #c02d2e;
}

.hljs-addition {
  color: #2f6f44;
}

.hljs-emphasis {
  font-style: italic;
}

.hljs-strong {
  font-weight: bold;
}

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

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

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

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

/**
 * Remove the margin in all browsers.
 */

body {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */

/* h1 {
  font-size: 2em;
  margin: 0.67em 0;
} */

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

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

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

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

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

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

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

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

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

/**
 * 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, monospace;  */
  /* 1 */
  /* font-size: 1em;  */
  /* 2 */
}

/**
 * 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 {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

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

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

img {
  border-style: none;
}

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

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

button,
input,
optgroup,
select,
textarea {
  font-family: inherit; /* 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;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */

button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * 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 {
  border-style: none;
  padding: 0;
}

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

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 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 {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  padding: 0; /* 3 */
  white-space: normal; /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */

progress {
  vertical-align: baseline;
}

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

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"] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

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

[type="search"]::-webkit-search-decoration {
  -webkit-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 {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

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

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */

details {
  display: block;
}

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

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

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

template {
  display: none;
}

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

[hidden] {
  display: none;
}

.BlogCard a {
    border-bottom-color:transparent;
}


.BlogCard a:hover, .BlogCard a:focus, .BlogCard a:active {
    border-bottom-color: var(--cPrim);
}

:root {

/* colors */
    --cWhite: #FDFDFD;
    --cOffWhite: #DDD;
    --cBlack: #222;
    --cGreen: green; 
    --cRed: red;
    --cYellow: yellow;
    --cDarkBlue: darkblue;
    --cGrey: #bfbfbf;
    --cLightGrey: #f2f4f6;
    --cDarkGrey: #7a7a7a;

    --cPrim: #430081;
    --rgbPrim: 67, 0, 129;
    --cPrimDark: #38006d;
    --cSnd: #006300;
    --rgbSnd: 0, 99, 0;
    --cSndBright: #27a700;

    --cTxtPrim: var(--cBlack);
    --cTxtSnd: var(--cWhite);
    --cLinkPrim: var(--cPrim);
    --cLinkSnd: var(--cSndBright);


    --cHtml: var(--cOffWhite);
    --cHead: var(--cPrim);
    --cContent: var(--cWhite);
    --cFooterBG: var(--cDarkGrey);

    --cCodeInline: var(--cPrim);
    --cLine: var(--cSndBright);



/* complex styles, or uncategorized */
    --sHeadBorder: var(--pdHeadBtm) solid var(--cSndBright);
    --sBorder: 1px solid var(--cLine);
    --sBorderFade: 1px solid rgba(var(--rgbSnd), 0.3);


    /* --hFont: 'Dancing Script', cursive; */
    /* --hFont: 'Dancing Script', 'Kaushan', cursive; */
    --hFont: 'Dancing Script', 'Kaushan', "Times New Roman", fantasy, cursive, serif;
    /* Aria, Helvetica, Fantasy */
    /* --hFont: inherit; */
    --bFont: 'EB Garamond', serif;
    

/* Sizing, Spacing */
    --pdSmall: 0.5rem;
    --pdBase: 0.5rem 1rem;
    --pdChild: 1.0rem;
    --pdLogo: 0.2rem;
    --pdHeadBtm: 3px;
    --pdContainer: 2.5rem;
    --pdCodeBlock: 8px 8px 8px 24px;
    --mgCodeBlock: 8px 8px 8px 16px;


    /* font sizes */
    /* --fsRoot: 118%; */
    --fsRoot: 112%;
    --fsh1: 3.052em;
    --fsh2: 2.441em;
    --fsh3:1.953em; 
    --fsh4:1.563em;
    --fsh5:1.25em; 
    --fsh6:1.0em;
    --fssmall:0.8em; 
    --fsSmall:0.8em; 
    --fsMed: 1.0em;
    --fsLarge:1.2em;

    /* width/height sizes */
    --wPara: 40em;
    --wQuote: calc(var(--wPara) + 10em);


    /* box shadow / elevation */
    --bs1: -1px 2px 3px rgba(var(--rgbPrim), 0.3), -1px 2px 6px rgba(var(--rgbPrim), 0.1);
    --bs2: -1px 2px 4px rgba(var(--rgbPrim), 0.5), -1px 2px 8px rgba(var(--rgbPrim), 0.2);

}

@media only screen and (max-width: 600px) {
    :root {
        --pdChild: 12px;
        --pdBase: 0.5rem 0.5rem;
        --pdCodeBlock: 0 12px 0 2px;
        --mgCodeBlock: 6px 6px 6px 1px;
    }
}