@charset "UTF-8";
/*
|--------------------------------------------------------------------------
| https://github.com/kevin-powell/fem-manage-landing-page-part-6/blob/master/style.css
| https://github.com/philipwalton/solved-by-flexbox/blob/master/assets/css/base/elements.css
|
Responsive Padding: https://matthewjamestaylor.com/responsive-padding
--padding: calc(8px + 1.5625vw);


|--------------------------------------------------------------------------
*/
:root {

    /* https://web.dev/learn/css/spacing#creating_consistent_spacing
    h1 {
      margin-left: var(--gutter);
      margin-top: var(--spacing);
    }
    */
    counter-reset: article-sum;

    --color-text: #2b2c30;
    --color-heading: #242424;
    --color-border: #e5e5e5;
    --color-background: #f8f8f8;

    --color-link: #01487c;
    --color-link-hover: #0469b4;

    --color-button: #1955ae;
    --color-button-hover: #0469b4;

    --old-color-link-hover: #1955ae;
    --old-color-link: #1955ae;

    --color-light-blue: #419dfa;
    --color-blue: #1e87f0;
    --color-blue2: #0f7ae5;

    --gutter: 20px;
    --spacing: 1em;
    --max-text-width: 75ch;
    --gap: 1rem;
    --padding-block: 1rem;
    --padding-inline: 1rem;
    --padding: 1rem;
    --margin-block: 1rem;
    --margin-inline: 1rem;
    --margin: 1rem;

    --dark-blue: #005e9a;

    /** Gray colors */
    --white: #ffffff;
    --gray-01: #f9f9f9; /* search-field-background, gray button background, background */
    --color-gray-02: #f5f5f5;
    --gray-02: #f2f2f2; /* background-gray-buttons,  */
    --gray-03: #eeeeee;
    --color-gray-30: #e5e5e5;
    --gray-04: #cccccc;
    --gray-05: #acacac; /* placeholder-text */
    --gray-06: #6b6b6b;
    --gray-07: #5a5d64;
    --gray-08: #3d3d3d; /* light-gray-small-icons */
    --gray-09: #2b2c30; /* text color */
    --gray-10: #242424; /* heading color */
    --black: #1d1d21;
}

/** 768px = 48em */
@media only screen and (min-width: 768px) {
    :root {
        --gap: 2rem;
        --padding: 1.5rem;
        --margin: 1.5rem;
    }
}

/**  https://github.com/kevin-powell/fem-from-scratch/blob/main/style.css*/
/*
.skip-to-main:not(:focus) {
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

.skip-to-main {
    position: absolute;
    background: var(--background-accent-main);
    padding: 1rem;
    border-radius: var(--border-radius-2);
}
*/

/** font-sizes: (default: 16px)
  --fs-300: 0.8125rem;
  --fs-400: 0.875rem;
  --fs-500: 0.9375rem;
  --fs-600: 1rem;
  --fs-700: 1.875rem;
  --fs-800: 2.5rem;
  --fs-900: 3.5rem;

50%     = 0.5rem    = 8px
62.5%   = 0.625rem  = 10px
75%     = 0.75rem   = 12px
81.25%    0.8125rem = 13px
87.5%   = 0.875rem  = 14px
93.75   = 0.9375    = 15px
100%    = 1.0rem    = 16px
112.5%  = 1.12rem   = 18px
125%    = 1.25REM   = 20PX

 1.875rem
 2.5rem
 3.5rem

 **/

/** breaking points:
360px (absolute smallest size),
Breaking Points (always use unit em on MediaQueries)
360px (absolute smallest size),
480px = 30em,
512px = 32em,
544px = 34Eem,
576px = 36em,
640px = 40em,
768px = 48em,
960px = 60em,
992px = 62em,
1024px = 64em
1152px =  72em
1200px = 75em,
1216px = 76em
1280px = 80em,
1400px = 87.5em,
1440px = 90em
1472px = 92em
1536px = 96em
1600px = 100em


*/
/* https://gs.statcounter.com/screen-resolution-stats/mobile/worldwide */
/** TXXX
--verydarkgray: #2b2c30;
--dark-gray: #5a5d64;
--dark-gray-text: #262632;
--light-gray-border: #eeeeee;

RED BUTTON
--red button: #e45257;
--red button hover: #e13c42;
white text
white text hover

GRAY BUTTON
gray button: #f8f8f8;
gray button hover: #eeeeee;
darker gray text
red button text at hover
*/