.fog {
    background-color: black;
    height: 210px;
    width: 100%;
    margin: -8px;
    opacity: 0.66;
    position: absolute;
}

.headerimage {
    height: 210px;
    width: 100%;
    margin: -8px;
    position: absolute;
    background-image: url(../img/designer2.png);
    background-repeat: no-repeat;
}


header {
    /*display: flex;*/
    width: 100%;
    float:right;
}

    header img {
        width: 150px;
        position: absolute;
    }

    header > * {
        /*   flex-grow: 1; */
    }

    header h1 {
        margin-left: 1rem;
    }

    header a {
        text-decoration: none;        
        opacity: .7;
        color: #FFFFFF;
    }

/* "Hide" checkbox -- moves it off screen*/
#menu-btn {
    position: absolute;
    top: -100%;
    left: -100%;
}

/* Hide hamburger for bigger screens */
.menu-icon {
    visibility: hidden;
}

.menu {
    /*display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 500px;
    margin-right: 2rem;*/

    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 500px;
    /* margin-right: 2rem; */
    margine-left: auto;
    /* margin-left: 714px; */
    /* margin-left: auto; */
    /* width: 90%; */
    /* margin-right: auto; */
    margin-left: auto;
    /* background-color: red; */
    height: 62px;
}


/* Set width for mobile/smaller screen size. */
/* I set it big here so I don't have to shrink the screen so much */
/* for testing purposes */
@media screen and (max-width: 1100px) {


    h1 {
        grid-area: title;
    }

    header {
        display: grid;
        grid-template-areas:
            "title   title   hamburger"
            "nav     nav     nav";
     /*   width: 90%;
        margin-right: auto;
        margin-left: auto;*/
    }

        header a {
            text-decoration: none;
            opacity: 1;
            color: black;
        }



    header div .fog {
        background-color: black;
        opacity: 0.66;
        height: 140px;
    }

    

    .menu a {
        text-decoration: none;        
    }

    .menu-btn {
        display: none;
    }

    .menu-icon {
        grid-area: hamburger;
        cursor: pointer;
        display: flex;
        justify-content: flex-end;
        align-items: baseline;
        /*padding: 30px 20px 30px 0;*/
        padding: 30px 0px 30px 0;
        position: relative;
        user-select: none;
        visibility: visible;
        -webkit-tap-highlight-color: transparent;
    }

    .navicon {
        background: #FFF;
        display: block;
        height: 2px;
        width: 18px;
        position: relative;
    }

        .navicon:before {
            top: 5px;
        }

        .navicon:after {
            top: -5px;
        }

        .navicon:before, .navicon:after {
            background: #FFF;
            display: block;
            width: 100%;
            height: 100%;
            content: '';
            position: absolute;
            transition: all .2s ease-out;
        }

    .menu {
        grid-area: nav;
        max-width: unset;
        max-height: 0;
        transition: max-height .2s ease-out;
        overflow: hidden;
        height: fit-content;
        margin: 0;
        padding: 0;
        /*background-color: #fff;*/
        display: flex;
        flex-direction: column;
    }

        .menu a {
            padding: 20px 20px;
            position: relative;
            border-right: 1px solid #f4f4f4;
            background-color: #c6a383;
            width: 100%;
            text-align: center;
            -webkit-tap-highlight-color: transparent;
        }
        .menu a:link {
            text-decoration: none;
        }


    .menu-btn:checked ~ .menu {
        border-radius: 10px;
        max-height: fit-content;
        width: fit-content;
        position: fixed;
        /* float: left; */
        /* position: absolute; */
        /* margin: 0 0 0 10%; */
        /* width: 90%; */
        margin-left: auto;
        /* background-color: red; */
        margin-top: 50px;
        /* margin-left: auto; */
        right: 15px;
    }

    .menu-btn:checked ~ .menu-icon .navicon {
        background: transparent;
    }

        .menu-btn:checked ~ .menu-icon .navicon:before {
            transform: rotate(-45deg);
        }

        .menu-btn:checked ~ .menu-icon .navicon:after {
            transform: rotate(45deg);
        }

        .menu-btn:checked ~ .menu-icon .navicon:before,
        .menu-btn:checked ~ .menu-icon .navicon:after {
            top: 0;
        }
}
        /*.container {
    width: 90%;
    margin-right: auto;
    margin-left: auto;
}