header 
    {
        font-family: var(--headerFont), serif;
        z-index: 10;
        grid-area: header;
        display: grid;
        position: sticky;
        top: 0;
        background-color: var(--titleColor);
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
        grid-template-areas:
            "title"
            "main-nav";
    }

    .main-header
    {
        grid-area: title;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 1rem 2rem;
        box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.85);
    }

    .site-title
    {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
    }

    .logo 
        {
        height: 4rem;
        width: 4rem;
        border-radius: 50%;
        border: 1px solid green;
        background-image: url("/images/EMH_logo.png");
        background-size: cover;
        }

    .title-main
    {
        font-size: clamp( 1.5rem, 3vw, 2.5rem);
        text-shadow: 5px 5px 2px #000;
        letter-spacing: 1px;
        width: fit-content;
    }

    .title-sub
    {
        font-size: clamp(0.7rem, 1.2vw, 1.25rem);
        letter-spacing: 0.5px;
        padding-top: 0.5rem;
        font-style: italic;
        width: fit-content;
    }

    nav
    {
        grid-area: main-nav;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1rem;
        padding: 1rem 2rem;
        background-color: var(--titleColor);
        font-size: 1rem;
        border-top: 1px solid var(--fontColor);

        ul 
        {
            list-style: none;
            justify-content: start;
            display: flex;
            gap: clamp(1rem, 3vw, 3rem);
        } 
        
        a
        {
            text-decoration: none;
            color: var(--fontColor);
            font-weight: bold;
            transition: color 0.3s ease;
        }

        .active
        {
            color: rgb(232, 243, 146);
        }
    }

    nav a:hover
    {
        cursor: pointer;
        color:rgb(232, 243, 146);
    }

    .hamburger
    {
        display: none;
    }

    .menu {
        /* position: fixed;
        top: 105px;
        left: 20px; */
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 35px;
        height: 35px;
        background-color: white;
        border-radius: 50%;
        box-shadow: 0 0 20px rgba(black,0.2);
        transition: transform 250ms ease;
        cursor: pointer;
        z-index: 200;
        
        span {
            position: relative;
            display: block;
            width: 50%;
            height: 2px;
            background-color: var(--menuColor);
            float: left;
            transform-origin: center center;
            transition: transform 250ms ease;
            z-index: 200;
            
            &:nth-of-type(1) {
                transform: translateY(-5px);
            }
            
            &:nth-of-type(3) {
                transform: translateY(5px);
            }
        }
    }

    #menu {
        display: none;
        
        &:checked ~ .menu {
            background-color: white;
            transform: rotate(360deg);
            transition: transform 250ms ease;
            
            span {
                background-color: var(--menuColor);
                transition: transform 250ms ease;
                
                &:nth-of-type(1) {
                    transform: translateY(1px) rotate(45deg);
                }
                
                &:nth-of-type(2) {
                    display: none;
                }
                
                &:nth-of-type(3) {
                    transform: translateY(-1px) rotate(-45deg);
                }
            }
        }
    }

    .nav-menu
        {
            display: block;
        }




@media screen and (max-width: 768px)
    {
        .hamburger
            {
                display: block;
            }

        .nav-menu
            {
                display: none;
                transition: all 1s ease-out;
            }

        .nav-menu.active
            {
                display: block;
            }
        nav
            {
                flex-direction: column;
            }

        nav ul
            {
                flex-direction: column;
                gap: 1rem;
            }
    }