header {
    width: 80%;
    height: fit-content;
    display: flex;
    justify-content: space-between;
    padding: 1rem 10%;
    z-index: 100;
    background-color: var(--header);
    position: fixed;
    top: 0;
}

html {
    scroll-behavior: smooth;
}



nav {
    font-family: "Montserrat", sans-serif;
}

@media screen and (orientation: landscape) {
    #header-logo img {
        height: 4rem;
    }

    nav {
        display: flex;
        align-items: center;
    }

    nav a,
    nav div {
        text-decoration: none;
        color: var(--main);
        font-size: 1.3cqi;
        font-weight: 600;
        position: relative;
        padding: 1rem 1.35rem;
    }

    .has-dropdown {
        transition: 0.3s ease-in-out;
    }

    .has-dropdown:hover {
        background-color: var(--complement);
        color: var(--main);
    }

    .has-dropdown:hover>.dropdown {
        transform: scaleY(1);
    }

    .dropdown {
        position: absolute;
        width: max-content;
        display: flex;
        flex-direction: column;
        background-color: var(--complement);
        margin-top: 1rem;
        left: 0rem;
        overflow: hidden;
        padding: 0;
        transition: 0.3s ease-in-out;
        transform: scaleY(0);
        transform-origin: left top;
    }

    .dropdown a {
        width: max-content;
        color: var(--main);
        padding: 1rem;
        width: 100%;
        transition: 0.2s ease-in-out;
    }

    .dropdown a:hover {
        background-color: #bb7d26;

    }






    #open-mobile-menu,
    #close-mobile-menu {
        display: none;
    }

    #header-language-selector {
        position: fixed;
        top: 1.3rem;
        right: 5%;
        background-color: var(--complement);
        padding: 1rem;
        color: var(--bg);
        font-size: 1.3cqi;
        border-radius: 100%;
        cursor: pointer;
        transition: 0.2s ease-in-out;
    }

    #header-language-selector:hover {
        background-color: #bb7d26;
    }

}



@media screen and (orientation: portrait) {
    header {
        width: 90%;
    }

    nav {
        position: fixed;
        right: -100%;
        top: 5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        width: 100%;
        gap: 1rem;
        background-color: var(--header);
        padding-bottom: 1rem;
        transition: 0.3s ease-in-out;
    }

    .has-dropdown,
    .dropdown {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .dropdown {
        transition: 0.3s ease-in-out;
        background-color: var(--complement);
        transform: scaleY(0);
        transform-origin: left top;
        max-height: 0;
        padding: 0;
        gap: 1rem;
        margin-top: 0rem;
    }

    .dropdown.visible {
        transform: scaleY(1);
        padding: .5rem 0;
        margin-top: 0.5rem;
        max-height: 100vh;
    }

    .dropdown a {
        color: var(--main);
    }

    #header-logo img {
        height: 3rem;
    }

    #close-mobile-menu {
        display: none;
    }


    nav a,
    nav div {
        text-decoration: none;
        color: var(--main);
        font-size: 1.4rem;
        font-weight: bold;
        position: relative;
    }

    #header-language-selector {
        position: absolute;
        top: 0;
        right: 4vw;

        background-color: var(--complement);
        padding: 1rem;
        color: var(--bg);
        font-size: 1rem;
        border-radius: 100%;
        cursor: pointer;
        transition: 0.2s ease-in-out;

    }
}