:root{
    --header-height: 15vh;
}
header {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    height: var(--header-height);
    
    padding-left: 4rem;
    padding-right: 4rem;

    padding-top: 1rem;
    padding-bottom: 1rem;
    position:sticky;
    top:0;
    background-color: inherit;
    z-index: 1000000;
}

#socialContainer{
    font-size: 2rem;
    display:flex;
    justify-content: end;
    gap: .8rem;

}

#telephoneNumber{
    display:flex;
    align-items: center;
    gap:0.8rem;
}

#logo_container {
    position: relative;
    margin-left: 2.5rem;
    margin-right: 2.5rem;
    height: calc(var(--header-height) - 2rem);
}
#logo_container>img{
    height: 100%;
    object-fit: contain;
}



#logo_container::before, #logo_container::after{
    content: '';
    height: 66%;
    border: 1px solid var(--gold-frame-color);
    display:block;
    position:absolute;
    width: 0px;
    top:50%;
    transform: translateY(-50%);

}

#logo_container::before{
    left: -2rem;
    
}

#logo_container::after{
    right: -2rem;
    
}

nav{
    height: 55px;
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--gold-frame-color);
    border-bottom: 1px solid var(--gold-frame-color);
    padding-left: 4rem;
    padding-right: 4rem;
    
    position:sticky;
    top: var(--header-height);
    background-color: inherit;
    z-index:1000000;
    
}

nav > a{
    padding: 8px 16px;
    border: 0px solid;
    border-radius: 2px;
    font-weight: 600;
    transition: background-color 0.3s ease-in-out;
}

nav > a:hover, nav a.activeLink{
    background-color: var(--highlighted-background-color);
}

#navHamburgerToggle{
    font-size: 1.5rem;
    transition: background-color 1s ease-in-out;
    padding: 1rem;
}
#navHamburgerToggle:hover{
    background-color: var(--highlighted-background-color);
}
#navHamburgerToggle:focus{
    background-color: var(--main-background-color);
}

#navHamburgerToggle.menuOpen:hover{
    background-color: var(--main-background-color);
}

/*Telephone and social media container changes flex container so there shouold be a little media query block here */
/*hide elements*/
#telephoneNumber_hamburger, #socialContainer_hamburger, #navHamburgerToggle{
    display: none;
}

@media(max-width: 720px) {
    /*Show elements*/
    #telephoneNumber_hamburger, #socialContainer_hamburger, #navHamburgerToggle{
        display: block;
        margin-top: 1rem;
        padding-left: 2rem;
    }

    #telephoneNumber_hamburger{
        margin-top: auto;
        margin-right: auto;
        padding-left: 2rem;
    }
    #socialContainer_hamburger{
        
        margin-right: auto;
        padding-bottom: 2rem;
    }

    #logo_container::before, #logo_container::after{
        content: none;
    }

    /*hide elements*/
    #telephoneNumber, #socialContainer, nav{
        display: none;
    }

    /*change flex settings for hamburger menu*/
    #telephoneNumber_hamburger{
        display: flex;
        align-items: center;
        gap: .8rem;
    }
    
    #header{
        justify-content: space-between;
    }

    #logo_container::before{
        left: -1rem;
        
    }
    
    #logo_container::after{
        right: -1rem;
        
    }

    #socialContainer_hamburger {
        display: flex;
        justify-content: center;
        gap: 1.5rem;
    }

    /*restructere the menu*/

    nav{
        flex-direction: column;
        justify-content: flex-start;
        width: 100%;
        padding-left: 0;
        padding-right: 0;
        background-color: var(--main-background-color);
        height: calc(100vh - var(--header-height));
        padding-top:1rem;
        position:sticky;
        top: var(--header-height);
    }
    nav a {
        width: 100%;
        text-align: center;
       
    }

    nav > a:hover {
        background-color: var(--highlighted-background-color);
       
    }

  
    /*open close animation*/
    header {
        transition: background-color 1s ease-in-out;
        padding-left: 1rem;
        padding-right: 1rem;
    }
    nav.menuOpen{
        display: flex;
        
        
        z-index: 1000;

        transform: translateX(-100%);
        animation: slideIn 1s forwards;  
    }
    nav.menuOpen.menuClose{
        position:absolute;
        
        animation: slideOut 1s forwards;  
    }

    /*header.menuOpen {
        background-color: var(--main-background-color);
    }
    header.menuOpen.menuClose {
        background-color: var(--highlighted-background-color);
    }*/

    @keyframes slideIn {
        from {
            transform: translateX(-100%);
            opacity: 0; 
        }
        to {
            transform: translateX(0);
            opacity: 1;
        }
    }

    @keyframes slideOut {
        from {
            transform: translateX(0);
            opacity: 1; 
        }
        to {
            transform: translateX(-100%);
            opacity: 0; 
        }
    }

}