/* prevent promblems with different browser*/

*{box-sizing: border-box;}

body {
    font-family: 'Ubuntu', sans-serif;;
    font-size: 16px;
    font-weight: 300;
    margin: 0;
    background-color: #efefef;
}

/* header stuff */
header {
    background-color: #f0c100; 
    padding: 1rem 2vw;
    display: flex;
    align-items:flex-end;
}
header div { 
    padding-left: 1vw;
}

header h1 {
    margin: 0;
    color: #f00b00; 
}
header p {
    margin: 0;
    color: #f00b00; 
    letter-spacing: .5px;
}

/* nav stuff */
/*small screen*/
@media only screen and (max-width:600px) {
    nav {
        background-color: #db8100;
        }
    nav ul {
        list-style-type: none;
        padding: 0 2vw;
        margin: 0;
        display: block;
        text-align: center;
}
    nav a {
        font-size: 1.1rem;
        text-decoration: none;
        color: #a33500;
        font-weight: 700;
        display: block;
        padding: .83rem 2rem;
    }
    nav li.active a{
        background-color: #f00b00;
        color: #f0ee00;
        background-image: linear-gradient(to bottom,#f00b00, #bc0900 )
    }
    nav a:hover {
        color: #f0ee00;
    }

} /*end of the media query*/
/*big screen*/
@media only screen and (min-width:601px) {
    nav {
        background-color: #db8100;
        }
    nav ul {
        list-style-type: none;
        padding: 0 2vw;
        margin: 0;
        display: flex;
        }
    nav a {
        font-size: 1.1rem;
        text-decoration: none;
        color: #a33500;
        font-weight: 700;
        display: block;
        padding: .83rem 2rem;
        }
    nav li.active a{
        background-color: #f00b00;
        color: #f0ee00;
        background-image: linear-gradient(to bottom,#f00b00, #bc0900 )
        }
    nav a:hover {
        color: #f0ee00;
        }
} /*end of the media query*/


/*main stuff*/
main {
    padding: 1rem 2vw;
}
main h1 {
    color: #a33500;
}
main h2 {
    color: #f00b00;
    margin-bottom: .2rem;   
}
main p {
    color: #a33500;
    margin: 0 0 .3rem 0;   
}
main ul {
    padding: .5rem 3vw;
    background-color: #f0c100;
}
main dl dt{
    color: #a33500;
    font-weight: 700;
}
main dl dd{
 color: #db8100; 
   font-size: .9rem;
}
main ul{
    list-style-type:square;
    color: #a33500;
}
main ol{
    list-style-type:square;
    color:#a33500;
}
main ul li{
    line-height: 125%;
    margin-bottom: .5rem;
    font-size: .9rem;
}
main address{
    color:#f00b00;
    font-style: normal;
    background-color: #f0c100;
    padding: .5rem;
    width: 12.5rem;
    border: 1px solid #a33500;
    border-radius: .5rem;
}
main a{
    color: #a33500;
}
main a:hover{
    color:#f0ee00;
}

figure.cheese {
    width: 100%;
    margin: 0;
}
figure.cheese img{
    width: 100%;
    height: auto;
}
figure.cheese figcaption{
    text-align: center;
    font-size: .8rem;
    color: #a33500;
}

.myForm fieldset {
    border: 1px solid #a33500;
    border-radius: 3px;
    margin-bottom: 1rem ;
}
.myForm legend {
    color:#a33500;
    font-size: .8rem;
}

.myForm label {
    margin: .5rem;
}

.myForm label, .myForm select,.myForm [type=radio], .myForm [type=text], .myForm [type=checkbox], .myForm [type=tel], .myForm textarea {
    display: block;
    color:#a33500;
}

.myForm [type=text], .myForm [type=tel], .myForm select, .myForm textarea{
border: solid 1px #a33500;
padding: .3rem;
width: 250px;
border-radius: .3rem;
font-family: 'Ubuntu', sans-serif;;
font-weight: 300;
}
.myForm textarea {
    height: 6rem;
}

.myForm :required {
    background-color: rgba(240,238,0,0.1);
}

.myForm [type=submit] {
    background-color: #f0c100;
    border: none;
    padding: 1rem 2rem;
    border-radius: 10px;
    color:#f00b00;
    margin: 1rem 0 0 1vw;
}

/*footer stuff*/
footer{
    background-color: #f0c100;
    text-align: center;
    color: #f00b00;
    padding: 1rem 0;
    font-size: .8rem;
    clear:both;
}
footer a{
    color: #f00b00;
}
footer a:hover{
    color:#f0ee00;
}

div.gallery {
    display: flex;
    flex-wrap: wrap;
}
div.gallery figure {
    margin: .5rem 2% 0 0;
}
div.gallery figcaption {
    text-align: center;
    font-size: .75rem;
    font-weight: 700;
    color: #b64e11;
    }
div.gallery img:hover{
    box-shadow: 0px 0px 10px rgb(0,0,0,1)
}

header, nav, main, footer {
    max-width: 64rem;
    margin: 0 auto;
}