body, header, nav, main, footer, h1, div, img, ul, figure, figcaption, section, article, aside, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
}


/*contact*/

#ble {
    float:right;
}
.bla {
float: left;
border:solid 4px #321809;
padding: 2em;
margin: 0 auto;
width: 23em;
}

#form {
    margin-top: 2%;
    background-color: #f5f1ee;
    color: #8a4810;
    font-size:1.25em;
    width:300;
padding: 2em;
margin: 0 auto;
position: relative;
    max-width: 350px;
    margin: 2% auto;
    float:center;
    height: 592px;
}

fieldset legend {
    font-weight: bold;
    font-size: 1.25em;
}

label {
    display: block;
    padding-top: 3%;
}

 h1 {
    text-align: center;
    color: #562d0f;
}

fieldset, input, select, textarea  { 
    margin-bottom: 3%;
    font-size: 1em;
}


label {
    display: block;
    padding-top: 3%;
}

form #submit {
    margin: 0 auto;
    border: none;
     display: block;
      padding: 2%;
    background-color: #8a4810;
    color: #ffffff;
    font-size: 2em;
    border-radius: 10px;
    font-family: 'Courier New', Courier, monospace;
    box-align: center;
    
}

 #submit:hover  {
background-color:#321809;
}

fieldset {
    width:100%;
}
/*gallery*/
.blah {
color: white;
}
/* story */

.menu {
    background-color: #8a4810;
    color:#f5f1ee;
    border:solid 7px #f5f1ee;
     max-width: 350px;
     height: 650px;
    margin: 2%;
    float: left;
padding: 2em;
margin: 0 auto;
    
}

/* index */

.three {
    display: none;
}
.ind {
    color:#562d0f;
}

h2 {
    color: #8a4810;
}
p {
    color: #562d0f;
    font-size: 1.5em;
}

.inde {
    color: #562d0f;
    font-size: 1.5em;
}
#story, #awards {
    margin: 0 3%;
}

 #awards {
        width: 40%;
        float: left;
        
    }

    #story {
         width: 40%;
        float: right;
        
    }

    .one {
        min-width: 230px;
    }
    /* unsorted */
header{
display: none;
}

.mobile {
    display: block;
}


.tablet-desktop {
    border: 8px solid #321809;
     position: absolute;
}

.indexnav {
border: 8px solid #321809;
     position: absolute;
      float:left;
    width: 20%;
    height: 100%;
    background-color:#321809;
    font-family: 'francois one', sans-serif;
    font-size: 2em;
    text-decoration: none;
    display: block;
    height: 1730px;
}

.menunav {
    border: 8px solid #321809;
     position: absolute;
      float:left;
    width: 20%;
    height: 100%;
    background-color:#321809;
    font-family: 'francois one', sans-serif;
    font-size: 2em;
    text-decoration: none;
    display: block;
    height: 2150px;
}

.gallerynav {
    border: 8px solid #321809;
     position: absolute;
      float:left;
    width: 20%;
    height: 100%;
    background-color:#321809;
    font-family: 'francois one', sans-serif;
    font-size: 2em;
    text-decoration: none;
    display: block;
    height: 1050px;
}

.contactnav {
    border: 8px solid #321809;
     position: absolute;
      float:left;
    width: 20%;
    height: 100%;
    background-color:#321809;
    font-family: 'francois one', sans-serif;
    font-size: 2em;
    text-decoration: none;
    display: block;
    height: 1750px;
}

main {
    background-color: #f5f1ee;
    color: #565656;
    border: 8px solid #321809;
    display:block;
    margin: auto;
    float:right;
    width:75%;
    padding: 20px;
    text-align: center;
}

/* nav */

nav ul {
    list-style-type: none;
    text-align: center;
    display:block;
    float:left;
    width: 80%;
    height: 100%;
    
}

nav img {
    min-width:300px;
    width: 80%;
}
 nav li {
        font-size: 1.5em;
        font-family: 'Courier New', Courier, monospace;
        border-top: none;
        text-align:center;
        display:block;
        border: 8px solid #321809;
        background-color: #562d0f;
        position:sticky;
        width: 95%;
    }

   nav li a:hover {
        color: #321809;
        background-color: #f5f1ee;
        border: none;
    }

      nav li a {
        padding: 0.1em 0.75em;
        display: block;
        color: #fff;
        text-decoration: none;
        height: 100%;
    }

#tablet-desktop, nav {
    float:left;
    width: 20%;
    height: 100%;
    background-color:#321809;
}

/*hamburger menu*/ 
.menu-icon {
position: absolute;
color: #ffffff;
right: 0;
display: block;
top: 0;
text-decoration: none;
padding: 3%;
}

.mobile-nav a {
    color: #fff;
        font-size: 4em;
    text-decoration: none;
}

.mobile-nav li {
    width:100%;
    background-color:#321809;
}

#menu-links {
display: none;
text-align: center;
background-color: #321809;
width: 100%;
}

#menu-links :hover {
        color: #321809;
        background-color: #f5f1ee;
        border: none;
    }


/*logo*/
#logo {
border: 4px solid #562d0f;
min-width: 100%;
float: center;
}



.tablet-desktop {
        font-family: 'francois one', sans-serif;
    font-size: 2em;
    text-decoration: none;
    display: block;
}



/* Media Query for computer Viewport */
@media screen and (min-width: 1400px), print {

    .bla {
position: relative;
    max-width: 350px;
    margin: 2% auto;
}

    .frame  {
        opacity: 0.9;
    }
    
    .frame:hover {
        opacity: 1;
        box-shadow: 8px 8px 10px #f5f1ee;
        transform: translateY(10px);
    }
    
form {
        width: auto;

    }
    
    .form-grid {
        display: grid;
        grid-template-columns: auto auto auto;
        grid-gap: 20px; 
    }
    .frame {
    max-width: 350px;
    margin: 2% auto;
}

    .mobile, .mobile-nav{
        display: none;
    }

    header {
    display: none;
}

#gall {
    position: relative;
    max-width: 350px;
    margin: 2% auto;
}

#gall:hover {
        opacity: 1;
        box-shadow: 8px 8px 10px #f5f1ee;
        transform: translateY(10px);
}
}
/* Media Query for phone/tablet Viewport */
@media screen and (max-width: 1400px), print {

    #form {
    margin-top: 2%;
    background-color: #f5f1ee;
    color: #8a4810;
    font-size:1.25em;
    width:300;
padding: 2em;
margin: 0 auto;
position: relative;
    max-width: 350px;
    margin: 2% auto;
    float:center;
    height: 400px;
}

    form {
        
        margin: 0 auto;
        float: left;
    }

.frame {
    max-width: 250px;
    margin: 2% auto;
}

#gall {
    display:none;
    position: relative;
    max-width: 350px;
    margin: 2% auto;
}

.three {
    display:block;
    max-width: 350px;
    min-height: 100px;
}

.tablet-desktop {
    display: none;
}

.menunav {
    display: none;
}
.gallerynav  {
    display: none;
}
.indexnav {
    display: none;
}

.contactnav {
    display: none;
}

.two {
    display: none;
}
main {
    width:90%;
    box-align: center;
}
header {
    display: block;
    width: 100%;
    background-color:#321809;
    top: 0;
    height: 190px;
}

#logo {
    display: none;
}

#moblogo {
    width: 300px;
    border: 8px solid #562d0f;
    box-align: center;
}

/* Media Query for Large Desktop Viewports */
@media screen and (min-width: 1921px) {
    #logo {
max-width:460px;
}

#gall {
    position: relative;
    max-width: 250px;
    margin: 2% auto;
}

nav {
max-width:450px;
position:sticky;

}

header {
    display: none;
}

}
}