@charset "UTF-8";
/*
|--------------------------------------------------------------------------
| Typography
|--------------------------------------------------------------------------
*/
:focus {
  outline: none;
}
/** Use the default user interface font in all browsers (opinionated). */

/*
|--------------------------------------------------------------------------
| Flexible Units (ems, rems) for Responsive Layouts
| ---------------------------------------------------------------------------
| Example using rem for scalable font sizes
| https://www.freecodecamp.org/news/breakpoints-for-responsive-web-design/
| ---------------------------------------------------------------------------
*/

/** Headings */
h1,
h2,
h3,
h4 {
    color: var(--color-heading);
    letter-spacing: 0.125em;
    white-space: normal;
    line-height: 1;

    font-weight: 700;
}

h1::before {
    content: "";
    display: inline-block;
    position: relative;
    top: calc(-0.1 * 1em);
    vertical-align: middle;
    height: calc(4px + 0.7em);
    margin-right: calc(5px + 0.2em);
    border-left: calc(5px + 0.1em) solid var(--color-light-blue);
    /*  border-left: calc(5px + 0.1em) solid #e5e5e5;  */
}

h1 {
    padding-bottom: calc(5px + 0.1em);
    border-bottom: calc(0.2px + 0.05em) solid var(--color-border);

    display: block;
    width: 100%;
    margin-top: 2rem;

    font-size: 2rem;
}
h2 {
    font-size: 1.6rem;
    border-bottom: 1px solid #e5e5e5;
}
header > h2 {
    margin-top: 20px;
}
h3 { font-size: 1.4rem; }
h4 { font-size: 1.2rem; }
/*
h2, h3, h4 {
    margin: 2.0rem 0 0.8rem 0;
}
*/

h1, h2, h3, h4, h5, h6 {
    margin: 0 0 20px 0; /** top right bottom left */
}
/* Add margin if adjacent element */
* + h1,
* + h2,
* + h3,
* + h4 {
    margin-top: 40px;
}



@media only screen and (min-width: 640px) { /* 512px = 32em */
    h1 { font-size: 2.4rem; }
    h2 { font-size: 1.8rem; }
    h3 { font-size: 1.5rem; }
    h4 { font-size: 1.3rem; }
    /*
    h2, h3, h4 { margin: 2.5rem 0 1rem 0; white-space: nowrap; }

     */
}
@media only screen and (min-width: 960px) {
    h1 { font-size: 2.8rem; }
    h2 { font-size: 2rem; }
    h3 { font-size: 1.65rem; }
    h4 { font-size: 1.4rem; }
    /*
    h2, h3, h4 { margin: 2.5rem 0 1rem 0; white-space: nowrap; }

     */
}
/*
|--------------------------------------------------------------------------
| Paragraph
https://developer.mozilla.org/en-US/docs/Web/CSS/break-inside
|--------------------------------------------------------------------------
*/
p,
ul,
ol,
dl,
pre,
address,
figure {
    margin: 0 0 20px 0;
}
/* Add margin if adjacent element */
* + p,
* + ul,
* + ol,
* + dl,
* + pre,
* + address,
* + figure {
    margin-top: 20px;
}
p { /**  recommended a value between 60-75ch (recommended: 66ch) */
    margin-top: 0;
    margin-bottom: 1.25rem;
    /*
    break-after: column;
     */
}
p:not(:last-child) {
    margin-bottom: 1.5rem;
}
p:not([class]) {
    opacity: 0.7;
}


/*
p:not([class]) {
    opacity: 0.7;
    max-width: 32ch;
}
*/
/*
|--------------------------------------------------------------------------
| links
| -------------------------------------------------------------------------
| Important to set properties in this order: :hover, :focus, :active
|--------------------------------------------------------------------------
*/
a,
a:link,
a:visited {
    outline: none;
    background-color: transparent;
    color: var(--color-link);
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap;
    line-height: inherit;
    transition: all 0.25s ease-out;
}
/*
|--------------------------------------------------------------------------
| Pseudo-classes :hover, :focus, :active
| -------------------------------------------------------------------------
| Typically, a user will first hover over an element, then bring it to focus, then activate it.
| So, the best way to order your pseudo-class styles are :hover then :focus then :active
|--------------------------------------------------------------------------
*/
a:hover,
a:focus,
a:active {
    color: var(--color-link-hover);
}

/* button */
/** ### FANCY UNDER LINK ### */
ul > li > a,
a[href^="https:"],
footer a {
    position: relative;
}

ul > li > a:before,
a[href^="https:"]::before,
footer a::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #2980b9;
    transform-origin: center;
    transform: translate(-50%, 0) scaleX(0);
    transition: transform 0.3s ease-in-out;
}

ul > li > a:hover::before,
a[href^="https:"]:hover::before,
footer a:hover::before {
    transform: translate(-50%, 0) scaleX(1);
}

footer a[href^="https:"]::after {
    color: white;
    padding-left: 0.6rem;
    font-family: 'Material Symbols Outlined';
    content: 'open_in_new';
    font-variation-settings:
            'FILL' 1,
            'wght' 600
}

a[href^="https:"]::after {
    color: #1c5ebf;
    padding-left: 0.6rem;
    font-family: 'Material Symbols Outlined';
    content: 'open_in_new';
    font-variation-settings:
            'FILL' 1,
            'wght' 600
}


/** ### ### */

/** link with no class
a:not([class]) {

}
*/

/*
|--------------------------------------------------------------------------
| other typography's
|--------------------------------------------------------------------------
*/

blockquote {
    margin: 20px 0;
    padding-left: 1.5rem;
    border-left: 5px solid #3575d3;
}

pre {
    color: #3575d3;
    -moz-tab-size: 4;
    tab-size: 4;
    overflow: auto;
    margin-top: 1rem;
    border-top: 2px solid var(--cl-border);
    border-bottom: 2px solid var(--cl-border);
    border-left: 0.2rem solid var(--cl-border);
}
/** Use the default monospace user interface font in all browsers (opinionated). */
code,
kbd,
samp,
pre {
    font-family: ui-monospace,
        /* macOS 10.10+ */ "Menlo",
        /* Windows 6+ */ "Consolas",
        /* Android 4+ */ "Roboto Mono",
        /* Ubuntu 10.10+ */ "Ubuntu Monospace",
        /* KDE Plasma 5+ */ "Noto Mono",
        /* KDE Plasma 4+ */ "Oxygen Mono",
        /* Linux/OpenOffice fallback */ "Liberation Mono",
        /* fallback */ monospace,
        /* macOS emoji */ "Apple Color Emoji",
        /* Windows emoji */ "Segoe UI Emoji",
        /* Windows emoji */ "Segoe UI Symbol",
        /* Linux emoji */ "Noto Color Emoji";
}

/*
nav > ul > li > a  {
    position: relative;
}

nav > ul > li > a::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #287ffe;
    transform-origin: center;
    transform: translate(-50%, 0) scaleX(0);
    transition: transform 0.3s ease-in-out;
}

nav > ul > li > a:hover::before {
    transform: translate(-50%, 0) scaleX(1);
}
*/


/** <span>Underline</span>

span {
    position: relative;
}

span::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: #1c5ebf;
    transform-origin: center;
    transform: translate(-50%, 0) scaleX(0);
    transition: transform 0.3s ease-in-out;
}

span:hover::before {
    transform: translate(-50%, 0) scaleX(1);
}
*/

/*
a[href^="mailto:"] {
    display: none;
    font: var(--fa-font-solid);
    content: "\f015";

}
a::before {
    content: "++++";
}
a[href^="tel:"]::before {
    content: "***";
}
*/
/*
a[href^="mailto:"]::before {
    display: none;
    font: var(--fa-font-solid);
    content: '\f007';

    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    font: var(--fa-font-solid);
    content: '\f0e0';


}
a[href^="tel:"]::before {
    font: var(--fa-font-solid);
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: '\f095';
}

 */
/*
[href^="mailto:"], [href^="tel:"]
 */
/*
a[href^="https:"]::before {
    font: var(--fa-font-solid);
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: '\f0c1';
    padding-right: 5px;
    transition: all .2s cubic-bezier(.7,0,.3,1);
}
a[href^="/"]::before {
    font: var(--fa-font-solid);
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: '#';
    padding-right: 5px;
    transition: all .2s cubic-bezier(.7,0,.3,1);
}

a[href^="mailto:"]::before {
    font: var(--fa-font-solid);
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: '\f0e0';
    padding-right: 5px;
    transition: all .2s cubic-bezier(.7,0,.3,1);
}
a[href^="tel:"]::before {
    font: var(--fa-font-solid);
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: '\f095';
    padding-right: 5px;
    transition: all .2s cubic-bezier(.7,0,.3,1);
}
a[href^="sms:"]::before {
    font: var(--fa-font-solid);
    display: inline-block;
    text-rendering: auto;
    -webkit-font-smoothing: antialiased;
    content: '\f7cd';
    padding-right: 5px;
    transition: all .2s cubic-bezier(.7,0,.3,1);
}
*/

/*
|---------------------------------------------------------------------------------------------------------------
| Add icon automatic before every external link
| https://css-tricks.com/almanac/selectors/a/attribute/
| https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
| i[data-value] Attribute exists
| [data-value="foo"] Attribute has this exact value
| [data-value*="foo"] Attribute value contains this value somewhere in it
| [data-value~="foo"] Attribute has this value in a space-separated list somewhere
| [data-value^="foo"] Attribute value starts with this
| [data-value|="foo"] Attribute value starts with this in a dash-separated list
| [data-value$="foo"] Attribute value ends with this *
|
| Attribute selectors
| https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors
|---------------------------------------------------------------------------------------------------------------
*/
/*
.logo {
    display: inline;
    padding-right: 1rem;
    border-right: 1px solid var(--gray-600);
    max-width: 150px;
}
*/