@charset "UTF-8";
/*
|--------------------------------------------------------------------------
| Navbar

CSS UNDERLINE
https://cssfx.netlify.app/

|--------------------------------------------------------------------------
When position is set to absolute or fixed, the top property specifies the distance between the element's outer margin
of top edge and the inner border of the top edge of its containing block.
https://developer.mozilla.org/en-US/docs/Web/CSS/top

https://www.youtube.com/watch?v=8eFeIFKAKHw
https://codepen.io/james_zedd/pen/ZKVZWp



| Create a responsive navigation nav with no JS! - kevin powell
| https://www.youtube.com/watch?v=8QKOaTYvYUA&t=1786s
|
| Links with full background:
| https://dev.to/nicm42/links-inside-li-that-take-up-all-the-space-4c37
|
| https://github.com/kevin-powell/fem-manage-landing-page-part-6/blob/master/style.css
| https://developer.mozilla.org/en-US/docs/Web/CSS/Layout_cookbook/Split_Navigation
| https://github.com/kevin-powell/funky-nav/tree/main
|
| Responsive mobile menu with CSS only
| https://github.com/Ivy-Walobwa/responsive-pure-css-menu/blob/main/style.css
| https://www.makeuseof.com/responsive-navigation-bar-using-html-and-css/
| https://codepen.io/shieldsma91/embed/zLpbLX?height=316&theme-id=0&default-tab=result
| https://www.youtube.com/watch?v=S-JyJCVx_4Y
| https://github.com/mdn/learning-area/blob/main/html/introduction-to-html/document_and_website_structure/style.css
|--------------------------------------------------------------------------
*/
.nav-toggle-label img,
.lang img {
    border-radius: 50%;
    border: 6px solid #eeeeee;
    background-color: #eeeeee;
}
.nav-toggle-label img:hover,
.lang img:hover {
    border: 6px solid #e5e5e5;
}



.nav-toggle {
    display: none;
}

.nav-toggle-label {
    display: block;
}

.push {
    margin-left: auto;
}


.lang,
.logo,
.nav-toggle-label {
    display: flex;
    justify-content: center;
    align-items: center;
}

.logo,
.lang {
    border: 0 solid lightpink;
}

body > header {

    position: sticky;
    top: 0;
    width: 100%;
    z-index: 999;
    /*
    background-color:  #f8f8f8;

     */
    background-color: #f9f9f9;
    transition: background 250ms ease-in;
    border-bottom: 1px solid #e5e5e5;
    /*
    width: 100%;
    position: fixed;
    z-index: 999;
    overflow: hidden;
    height: auto;
    border-bottom: 1px solid #cccccc;
    background-color: #f8f8f8;
    transition: background 250ms ease-in;

     */
}
/*
body > header > .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}
*/
.nav-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: row;
}
nav {
    position: absolute;
    text-align: left;
    top: 100%;
    left: 0;
    width: 100%;
    transform: scale(1, 0);
    transform-origin: top;
    transition: transform 400ms ease-in-out;
    height: 0;
}

@media only screen and (min-width: 768px) {
    nav {
        height: 60px;
        transition: all 250ms ease-in;
    }
}

@media only screen and (min-width: 1200px ) {
    nav {
        /*
        height: 80px;
         */
        height: 80px;
        transition: all 250ms ease-in;
    }
}

nav ul {
    list-style: none;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    flex-direction: column;
}

nav li {
    display: inline;
    width: 100%;
}

nav  a {
    width: 100%;
    height: 100%;
    display: flex;
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
    text-transform: uppercase;
    font-weight: 600;
    background-color: transparent;
    /* padding: 0.25rem 1rem; */
    letter-spacing: 0.2rem;
    transition: all 250ms ease-in;
}

nav a:hover,
nav a:focus,
nav a:active {


    /*
    color: #287ffe;
    color: var(--gray-06);
background-color: var(--white);
     */
}

nav a.active {

    background-color: #f2f2f2;
}

.nav-toggle:checked ~ nav {
    transform: scale(1,1);
}

@media only screen and (min-width: 768px) {

    .nav-toggle-label {
        display: none;
    }

    nav {
        position: relative;
        transform: scale(1, 1);
        transition: initial;
        line-height: 40px;
        /*
        width: 450px;
        */
        width: 450px;
        background-color: initial;
        display: block;
        text-align: center;

        border: 0 solid lightcoral;
    }

    nav ul {
        flex-direction: row;
    }

    nav a {
        padding: 0;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
/*
.nav-toggle-label i.fa-solid {
    font-size: 125%;
    cursor: pointer;
    color: var(--gray-07);
    transition: color 150ms ease-in;
}

.nav-toggle-label i:hover.fa-solid {
    color: var(--gray-09);
}
 */