/*

Default Style

• Contains Absolute CSS Variables
• Visually hides HTML Structure headings
• Sets basic element visual styles

*/





/* ------------------ CSS Variables ------------------ */
.html
{
    /* ------------ Level 1 - Absolutes ------------ */
    
    
    /* Superhero Blue */
    --color--superhero-blue: hsl(200, 100%, 50%) /* #00aaff */;
    
    
    /* Go Green Color */
    --color--go-green: hsl(120, 82%, 44%) /* #14cc14 */;
    --color--go-green-dark: hsl(120, 82%, 39%);
    
    
    /* Panda Blue */
    --color--panda-blue: hsl(215, 100%, 45%) /* #005fe6 */;
    --color--panda-blue-dark: hsl(215, 100%, 40%) /* #0054cc */;
    
    
    /* Chikka Orange */
    --color--chikka-orange: hsl(30, 100%, 50%) /* #ff7f00 */;
    
    
    /* Record Red */
    --color--record-red: hsl(0, 91%, 50%) /* #f20c0c */;
    
    
    /* Uhog Green */
    --color--uhog-green: hsl(120, 82%, 38%);
    --color--uhog-green-dark: hsl(120, 82%, 33%);
    
    
    /* Black */
    --color--black: hsl(0, 0%, 0%);
    
    
    /* Gray */
    --color--gray: hsl(0, 0%, 50%);
    
    
    /* White */
    --color--white: hsl(0, 100%, 100%);
    
    
    /* Off White */
    --color--off-white: hsla(0, 100%, 100%, .9);
    
    
    /* Off Black */
    --color--off-black: hsl(0, 0%, 15%);
    --color--off-black-a: hsla(0, 0%, 0%, .85);
    
    
    /* Transparent Black */
    --color--transparent-black: hsla(0, 0%, 0%, .5);
    
    
    /* Transparent White */
    --color--transparent-white: hsla(0, 100%, 100%, .5);
    
    
    
    
    
    
    /* Dash of Darkness */
    --dash-of-darkness--color: hsl(0, 0%, 98%);
    --dash-of-darkness--color-a: hsla(0, 0%, 0%, .0325);
    
    /* Black Eighth */
    --black-eighth--color: hsla( 0, 0%, 0%, .125 );
    
    /* Black Fourth */
    --black-fourth--color: hsla( 0, 0%, 0%, .25 );
    
    /* Black Half */
    --black-half--color: hsla( 0, 0%, 0%, .5 );
    --black-half--color-a: hsla( 0, 0%, 0%, .5 );
    
    /* White Eighth */
    --white-eighth--color: hsla( 0, 0%, 98%);
    --white-eighth--color: hsla( 0, 0%, 100%, .125 );
    
    /* White Fourth */
    --white-fourth--color: hsla( 0, 0%, 100%, .25 );
    
    /* White Half */
    --white-half--color: hsla( 0, 0%, 100%, .5 );
    --white-half--color-a: hsla( 0, 0%, 100%, .5 );
    
    /* Dimensions */
    --dimension--md: 3rem;
    
    
    /* Framework */
    --wbp-pri-color: var(--color--superhero-blue);
    
    --wbp-accent-pri-color: var(--color--panda-blue);
    --wbp-accent-pri-color--dark: var(--color--panda-blue-dark);
    
    --wbp-accent-sec-color: var(--color--uhog-green);
    --wbp-accent-sec-color--dark: var(--color--uhog-green-dark);
    
    --wbp-negative-pri-color: var(--color--record-red);
    
    --highlight-pri-color: var(--color--go-green);
    
    --light-max-color: white;
    --gray-max-color: gray;
    --dark-max-color: black;
    
    --placeholder-reverse-color: var(--color--transparent-white);
    
    --transition-duration: .125s;
    --transition-easing: ease-in-out;
    
    /* Reverse Color Combo */
    --pri-bg-reverse-color: var(--wbp-pri-color);
    --pri-fg-reverse-color: var(--light-max-color);
    
    --sec-axn-bg-color: hsla(0, 0%, 75%, .25);
    --sec-axn-fg-color: hsla(0, 0%, 0%, .75);
    
    
    --link-generic--color: var(--color--panda-blue);
    --link-generic--color--hover: var(--color--panda-blue-dark);
    
    
    
    /* Spacing */
    --corner-radius--sm: .125em;
    
    --content-gutter--sm: 1rem;
    --content-gutter--md: 2rem;
    --content-gutter--lg: 4rem;
    
    --spacing--toggle-allowance: var(--elem-dimension--md);
    
    --spacing--x-gutter: 1rem;
    --spacing--section-y-gutter: 1rem;
    --spacing--content-y-gutter: .5em;
    
    --spacing--heading-y-gutter: 1em;
    
    
    
    
    
    
    
    /* Copyright */
    --copyright-info-fg-color: var(--color--transparent-black);
    
    
    
    /* Aspect Ratio */
    --aspect-ratio--16-9: calc( ( ( 9 / 16 ) * 100% ) );
    --aspect-ratio--4-3: calc( ( ( 3 / 4 ) * 100% ) );
    
    --ratio--16-9: calc( (9/16) * 100 );
    
    /* Main Menu */
    --main-menu-func--height: 100%;
    --main-menu-func--max-width: 30rem;
    
    
    
    
    
    /* ------------ Level 2: Generics ------------ */
    
    /* Main Color */
    --main-color--pri: var(--color--superhero-blue);
    --main-color--sec: var(--color--uhog-green);
    
    /* Accent Color */
    --accent-color--pri: var(--color--panda-blue);
    --accent-color--sec: var(--color--chikka-orange);
    
    /* Background Color */
    --bg-color: var(--dash-of-darkness--color);
    
    /* Foreground Color */
    --fg-color: var(--color--off-black);
    
    /* Image Placeholder Color */
    --image-placeholder--bg-color: var(--color--off-black-a);
    
    
    /* Foreground Color - Reverse (use with a dark background) */
    --fg-color--reverse: var(--color--white);
    
    /* Faint Color */
    --faint-color--pri: var(--color--transparent-black);
    
    /* Border Color */
    --border-color: var(--black-half--color-a);
    
    /* Gutter */
    --gutter-x--base: 1rem;
    --gutter-x--xsm--multiplier: .25;
    --gutter-x--sm--multiplier: .5;
    --gutter-x--md--multiplier: 1;
    --gutter-x--lg--multiplier: 1.5;
    
    --gutter-x--xsm: calc( var(--gutter-x--base) * var(--gutter-x--xsm--multiplier) );
    --gutter-x--sm: calc( var(--gutter-x--base) * var(--gutter-x--sm--multiplier) );
    --gutter-x--md: calc( var(--gutter-x--base) * var(--gutter-x--md--multiplier) );
    --gutter-x--lg: calc( var(--gutter-x--base) * var(--gutter-x--lg--multiplier) );
    
    /* Spacing */
    --spacing-y--base: 1rem;
    --spacing-y--xsm--multiplier: .25;
    --spacing-y--sm--multiplier: .5;
    --spacing-y--md--multiplier: 1;
    --spacing-y--lg--multiplier: 1.5;
    
    --spacing-y--xsm: calc( var(--spacing-y--base) * var(--spacing-y--xsm--multiplier) );
    --spacing-y--sm: calc( var(--spacing-y--base) * var(--spacing-y--sm--multiplier) );
    --spacing-y--md: calc( var(--spacing-y--base) * var(--spacing-y--md--multiplier) );
    --spacing-y--lg: calc( var(--spacing-y--base) * var(--spacing-y--lg--multiplier) );
    
    --spacing-relative-y--base: 1em;
    
    --spacing-relative-y--sm: calc( var(--spacing-relative-y--base) * var(--spacing-y--sm--multiplier) );
    --spacing-relative-y--md: calc( var(--spacing-relative-y--base) * var(--spacing-y--md--multiplier) );
    --spacing-relative-y--lg: calc( var(--spacing-relative-y--base) * var(--spacing-y--lg--multiplier) );
    
    /* Font Size */
    
    --font-size--sm: .875em;
    --font-size--md: 1.125em;
    --font-size--lg: 1.5em;
    
    /* Element Dimensions */
    --elem-dimension--md: var(--dimension--md);
    
    /* Transition */
    --transition--generic: all .125s ease-in-out;
    
    /* Aspect Ratio */
    --aspect-ratio--hd: var(--ratio--16-9);
    
    /* Buttons */
    --button--pri--bg-color: var(--accent-color--pri);
    --button--pri--fg-color: var(--fg-color--reverse);
    
    --button--padding: .5em 1em;
    --button--min-width: 10em;
    
    
    /* ------------ Level 3 - Specifics ------------ */
    
    /* Main Header - Colors */
    --main-header--bg-color: var(--main-color--pri);
    
    /* Button - Colors */
    --button--bg-color: var(--accent-color--pri);
    --button--fg-color: var(--fg-color--reverse);
    
    /* Selection - Colors */
    --selection--bg-color: var(--main-color--sec);
    --selection--fg-color: var(--fg-color--reverse);
    
    /* Section - Spacing */
    --section--spacing: var(--spacing-y--md) var(--gutter-x--md);
    --section--spacing-x: var(--gutter-x--md);
    --section--spacing-y: var(--spacing-y--md);
    
    /* Content - Spacing */
    --content--spacing: .75em var(--gutter-x--md);
    --content--spacing-x: var(--gutter-x--md);
    --content--spacing-y: var(--spacing-relative-y--sm);
    
    /* Object - Spacing */
    --object--spacing-x: var(--gutter-x--md);
    --object--spacing-y: var(--spacing-y--md);
    --object--spacing-y--sm: var(--spacing-y--sm);
    --object--spacing--md: var(--spacing-y--md) var(--gutter-x--md);
    
    /* Component - Spacing */
    --component--spacing-x: var(--gutter-x--md);
    --component--spacing-y: var(--spacing-y--md);
    --component--spacing--md: var(--spacing-y--md) var(--gutter-x--md);
    
    /* Content - Font Size */
    --content--font-size: var(--font-size--md);
    
    /* Caption - Font Size */
    --caption--font-size: var(--font-size--sm);
    
    /* Copyright Info - Colors */
    --copyright-info--fg-color: var(--faint-color--pri);
    
    /* Generic Text - Colors */
    --generic-text--fg-color: var(--main-color--sec);
    
    /* List - Spacing */
    --list--spacing--xsm: var(--spacing-y--xsm) var(--gutter-x--xsm);
    --list--spacing-y--xsm: var(--spacing-y--xsm);
    
    /* Table - Spacing */
    --table--spacing: var(--spacing-y--md) var(--gutter-x--md);
    
    /* Web Product - Colors */
    --wbp--bg-color: var(--bg-color);
    --wbp--fg-color: var(--fg-color);
    
    /* Links - Colors */
    --links--fg-color: var(--accent-color--pri);
    
    /* Main Nav */
    --main-nav--bg-color: var(--color--white);
    
    /* Sub Nav - Toggle Button - Colors */
    --sub-nav-func-root--toggle-button--fg-color: var(--fg-color);
    --sub-nav-func-branches--toggle-button--fg-color: var(--fg-color);
    
    /* Main Header Aside - Colors */
    --main-header-aside--bg-color: var(--wbp--bg-color);
    
    /* Main Menu - Colors */
    --main-menu-func--fg-color: var(--wbp--fg-color);
    
    /* Go to Start Nav - Colors */
    --go-start-nav-func--fg-color: var(--wbp--fg-color);
    
    /* Input Text - Border Color */
    --input-text--border-color: var(--border-color);
    
    /* Image - Color */
    --image--bg-color: var(--image-placeholder--bg-color);
    
    /* Element Dimensions */
    --elem--width--md: var(--elem-dimension--md);
    --elem--height--md: var(--elem-dimension--md);
    --elem--dimension: var(--elem-dimension--md);
    
    /* Active Area Dimensions */
    --active-area--dimension--md: var(--elem-dimension--md);
    --active-area--width--md: var(--elem-dimension--md);
    --active-area--height--md: var(--elem-dimension--md);
    
    /* Main Logo - Dimensions */
    --main-logo--height: 2.25rem;
    
    /* Label - Spacing */
    --glabel--spacing: var(--gutter-x--md);
    
    /* Author Avatar - Dimensions */
    --author-avatar--width: var(--elem-dimension--md);
    --author-avatar--height: var(--elem-dimension--md);
    
    /* Commenter Avatar - Dimensions */
    --commenter-avatar--width: calc( var(--elem-dimension--md) - 1rem );
    --commenter-avatar--height: calc( var(--elem-dimension--md) - 1rem );
    
    /* Dismiss Icon - Dimensions */
    --dismiss-icon--width: .75rem;
    --dismiss-icon--height: .75rem;
    
    /* Text Spacing */
    --glabel--between--spacing: .3em;
    
    /* Overlays */
    --overlay--light: var(--color--white);
    --overlay--dark: var(--color--black);
    
    /* Note */
    --note--font-size: var(--font-size--sm);
    --note--fg-color: var(--font-size--sm);
    
    /* Go to Content Nav */
    --go-content-nav--bg-color: var(--button--pri--bg-color);
    --go-content-nav--fg-color: var(--button--pri--fg-color);
    
    /* Easy Access Nav - Main Nav - Colors */
    --easy-access-nav-func--main-nav--fg-color: var(--color--black);
    
    /* Sub Nav - Colors */
    --easy-access-nav-func--sub-nav--bg-color: var(--color--white);
    --easy-access-nav-func--sub-nav--fg-color: var(--color--black);
    
    /* Easy Access Nav - Sub Nav - Indicator - Colors */
    --easy-access-nav-func--navi--root--indicator: var(--black-eighth--color);
    
    --easy-access-nav-func--navi--current-ancestor--indicator: var(--black-fourth--color);
    --easy-access-nav-func--navi--branch--indicator: var(--black-eighth--color);
    
    /* Easy Access Nav - Sub Nav - Border Color */
    --easy-access-nav-func--sub-nav--border-color: var(--black-eighth--color);
    
    /* Easy Access Nav - Indicator - Dimensions */
    --easy-access-nav-func--indicator--height: .125rem;
    --easy-access-nav-func--indicator--width: .125rem;
}





/* ------------------ Visually Hidden ------------------ */
.visually-hidden,
.go-ct-nav---h,
.main-info---h,
.main-actions---h,
.search-term-crt---h,
.search-term-crt-search-flabel,
.search-form-axns---h,
.main-hr-aside---h,
.main-ct-hr-aside---h,
.main-ct-aside---h,
.main-fr-aside---h,
.entry-md---h,
.entries---h,
.entry---h,
.post-hr-aside---h,
.post-meta---h,
.post-pub-mod---h,
.post-pub---h,
.post-pub-d-t-stamp---h,
.post-mod---h,
.post-mod-d-t-stamp---h,
.published-post-author---h,
.post-author---h,
.post-categories---h,
.categories---h,
.post-tags---h,
.tags---h,
.comments-axns-snip---h,
.comments-population---h,
.comment-crt-ability---h,
.post-content---h,
.go-start-nav---h,
.comment-md---h,
.comment-hr-aside---h,
.comment-meta---h,
.comment-pub---h,
.comment-pub-d-t-stamp---h,
.published-com-commenter---h,
.commenter---h,
.comment-crt-hd---h,
.signed-in-acct---h,
.post-excerpt---h,
.sub-post-content---h,
.search---h,
.widget---h,
.widget-content---h,
.multisite---h,
.site-preview---h,
.site-main-info---h,
.comment-content---h,
.comments---h,
.main-banner---h,
.main-post-title---h,
.reserved-rights---line,
.copyright---line .delimiter---txt
{
    position:absolute;margin:-1px;padding:0;width:1px;min-width:auto;height:1px;min-height:auto;overflow:hidden;clip:rect(0,0,0,0);border:0;word-wrap:normal;
}





/* ------------------ Stuff ------------------ */
*,
:after,
:before
{
    box-sizing: border-box;
}

.html
{
    height: 100%;
}

.body
{
    min-height: 100%;
}





/* ------------------ Clearfix ------------------ */
.clearfix:before,
.clearfix:after,
.post-content---ct_cr:before,
.post-content---ct_cr:after
{
    content: " ";
    display: table;
}

.clearfix:after,
.post-content---ct_cr:after
{
    clear: both;
}





/* ------------------ Resets ------------------ */
abbr[title]
{
    text-decoration: none;
}

abbr[title]:hover
{
    border-bottom: 0;
}

label[for]:hover
{
    cursor: pointer;
}





/* ------------------ WordPress Required CSS Selectors ------------------ */
.wp-caption-text,
.sticky,
.screen-reader-text,
.gallery-caption,
.bypostauthor,
.aligncenter
{}





/* ------------------ Image ------------------ */
img
{
    max-width: 100%;
    height: auto;
}





/* ------------------ Preformatted Text ------------------ */
pre
{
    word-wrap: normal;
    word-break: normal;
    white-space: pre;
}





/* ------------------ Icons ------------------ */
.icon--vector,
.icon--raster
{
    display: inline-block;
    
    position: relative;
    
    width: 1rem;
    height: 1rem;
    
    vertical-align: middle;
    
    fill: currentColor;
}

.support--inlinesvg .icon--raster,
.support--no-inlinesvg .icon--vector
{
    display: none;
}





/* ------------------ Viewport Width: 768 ------------------ */
@media only screen and ( min-width: 48em )
{

    /* ------------------ Alignments ------------------ */
    .post-content---ct_cr > .alignleft
    {
        float: left;
    }

    .post-content---ct_cr > .alignright
    {
        float: right;
    }

    .post-content---ct_cr > .aligncenter
    {
        clear: both;
        margin-left: auto;
        margin-right: auto;
    }

}