body{
    background-color:#FFFFFF;
    color:#0e0d0d;
    font-family: "Georgia";
    background-attachment: fixed;
    background-image: linear-gradient(#eeeeee, #ffffff);
    margin: 0px;
}

#wrapper {
    background: 992px;
}


head{
    background-color:#f3f7f3;
    color:#074405;
    font-family: "lucida handwriting";
    text-align: left;
}

header {
    background-color:#074405;
    color:#FFFFFF;
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 2;
    grid-column-end: 8;
}

h1{
    line-height: 140%;
    padding: .5rem;
    background-repeat: no-repeat;
    background-position: right;
    background-origin: content-box;
    padding-left: 1em;
    margin: 0;
    text-align: center;
}

header a {
    text-decoration: none;
    color: white;
}

header {
    text-align: left;
}


nav{
    background-color:white;
    font-weight: bold;
    position: sticky;
    top: 0;
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 8;
    display:flex;
}

nav ul {
    margin: 0px;
    padding: 0px;
    display: flex;
    flex-flow: row;
    flex-flow: nowrap;
    list-style-type: none;
}


nav ul li {
    width: 100%;
}

h2{
    color:#074405;
    font-family: "Georgia", "sans-seri";
}

h3 {
    font-size: medium;
}

h4{
    color: #074405;
}

h5{
    text-align: center;
}

.signin {
    position: absolute;
    top:0;
    right:10px;
}

.cart {
    position: absolute;
    top:1;
    right:10px;
}

main{
    padding-left: 2rem;
    padding-right: 2rem;
    grid-row-start: 4;
    grid-row-end: 5;
    grid-column-start: 2;
    grid-column-end: 8;
    background: #ffffff;
} 

footer{
    font-size:.90rem;
    font-style: italic;
    text-align: center;
    padding: 0.5rem;
    grid-row-start: 5;
    grid-row-end: 6;
    grid-column-start: 2;
    grid-column-end: 8;
    background-color: #074405;
}

nav a {
    text-decoration: none;
    color: #074405;
    padding: 1rem 1rem;
    display: inline-block;
    text-align: center;
}

nav a:hover {
    background-color: #181011;
}

* { box-sizing: content-box; }

#mj1 {
    height: 500px;
    background-image: url("mj1.jpg");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    grid-row-start: 3;
    grid-row-end: 4;
    grid-column-start: 1;
    grid-column-end: 9;
}

.mj1-text { 
    text-align: center;
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: larger;
}

.mj1-text button {
    border: none;
    outline: 0;
    display: inline-block;
    padding: 10px 25px;
    color: #074405;
    background-color: #ddd;
    text-align: center;
    cursor: pointer;
    font-size: medium;
}

.mj1-text  button:hover {
    background-color: black;
    color: white;
}


.column {
    float: left;
    width: 30%;
    padding: 5px;
}

img {
     width: 100%;
}


form {
    display: grid;
    grid-template-rows: auto;
    grid-template-columns: 200px 1fr;
    gap: 0.75rem;
    width: 100%;
}

input { 
    font-size: 1rem;
    padding: 10px;
    color: #666666;
    background-color: #fafafa;
    border: 0;
}

textarea{ 
    font-size: 1rem;
    padding: 10px;
    color: #666666;
    background-color: #fafafa;
    border: 0;
}

input:focus {
    background-color: #f0f0f0;
    outline: none;
}

textarea:focus {
    background-color: #f0f0f0;
    outline: none;
}

label {
    padding: 10px;
    text-align: right;
}

#mySubmit {
    width: 10rem;
    grid-column: 2/3;
}


@media only screen and (max-width: 992px) {
    #wrapper{ background: 992px;
    }
    
    .column {
        width: 768px;
      }
      
}

@media only screen and (max-width: 768px) {
    .column {
        width: 100%;
      }

      nav {
        flex-direction: column;
        position: static;
    }

    h3 {
        width: 400px;
    }


}