header {
    position: fixed;
    width: 100vw;
    padding-top: 20px;
    z-index: 5;
}

header img {
    width: 100px;
}

header ul {
    list-style: none;
    padding-left: 0;
}

.logo-wrapper {
    display:flex;
    align-items: center;
    justify-content: space-between;
}

.mobile-nav-toggle.is-open .hamburger.blue-line {
    transform: rotate(45deg) scaleX(1) translate(1px, 10px);
}
.mobile-nav-toggle.is-open .hamburger.green-line {
    transform: rotate(0) scaleX(0);
    
}
.mobile-nav-toggle.is-open .hamburger.orange-line {
    transform: rotate(-45deg) scaleX(1) translate(7px, -16px);
}

.hamburger {
    display: block;
    height: 2px;
    width: 35px;
    border: none;
    margin: 10px 0;
    transform: rotate(0) scaleX(1) translate(0,0);
    transition: transform 350ms ease-in;
}

.hamburger.orange-line {
    background-color: rgba(var(--orange), 1);
}
.hamburger.green-line {
    background-color: rgba(var(--green), 1);
}
.hamburger.blue-line {
    background-color: rgba(var(--blue), 1);
}

.menu-wrapper {
    display: flex;
}
header li a {
    text-decoration: none;
    color: rgb(var(--blue));
    font-weight: bold;
    text-transform: uppercase;
}

@media screen and (max-width: 1023px) {
    .logo-wrapper {
        position: relative;
        z-index: 101;
        padding: 15px 30px 10px;
        border-radius: 10px;
        background-color: rgba(var(--light), 0.45);
        border: 3px solid rgba(var(--green, 1));
        margin: 0 16px;
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 6px 2px rgba(var(--blue), 0.1);
        transition: background-color 350ms ease-in-out 50ms;
    }
    header.is-open .logo-wrapper {
        background-color: rgba(var(--light), 0.9);
        border: 3px solid rgba(var(--light, 1));
    }
    .menu-wrapper {
        position: absolute;
        flex-direction: column;
        gap: 26px;
        width: 100vw;
        height: 100dvh;
        top: 0;
        left: 100%;
        z-index: 100;
        background: rgba(var(--green));
        margin: 0;
        padding: 140px 36px;
        overflow: hidden;
        transform: translate(0, 0);
        opacity: 0;
        transition: transform 350ms ease-in, opacity 0ms ease-in 350ms; // going out transition
    }
    .menu-wrapper.is-menu-open {
        opacity: 1;
        transform: translate(-100%,0);
        transition: transform 350ms ease-in 0ms, opacity 0ms ease-in 0ms; // coming in transition
    }

    header li a {
        font-size: 36px;
    }
}

@media screen and (min-width: 1024px) {
    header nav {
        display: flex;
        justify-content: space-between;
        max-width: 90vw;
        margin: 0 auto;
        padding: 15px 30px 10px;
        background-color: rgba(var(--light), 0.65);
        border-radius: 10px;
        border: 3px solid rgba(var(--green, 1));
        backdrop-filter: blur(10px);
        box-shadow: 0 4px 6px 2px rgba(var(--blue), 0.1);
    }
    .logo-wrapper {
        width:fit-content;
    }
    .mobile-nav-toggle {
        display: none;
    }
    .menu-wrapper {
        gap: 20px;
    }
}