html {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}

#wrapper {
  max-width: 960px;
min-width: 300px;
  margin: 0 auto;
 justify-content: center;
}
body {
	line-height: 1.4;
	font-size: 125%;
	font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "serif";
	margin: 0 auto;
}
header {
	padding: 20px;
	color: #ffffff;
	text-align: center;
	background-image: url("../images/header.jpg");
	background-size: cover;
    background-position: center;
}
h1{
	font-family: "Brush Script MT";
	font-size: 425%;
	color: #FFFFFF;
	text-shadow: 1px 1px 10px black;
	letter-spacing: 7px;
	flex-wrap: wrap;
	text-wrapping: wrap;
}
h2{
    font-size: 28px;
    color: #2F251B;
    font-family: "Baskerville";
    text-align: center;
}
h3{
    font-size: 24px;
    color: #2f251b;
    font-family: "Baskerville";
    text-align: center;
}
h4{
    font-size: 24px;
    color: #2f251b;
    text-decoration: shadow;
    font-family: "Baskerville";
}
header p {
	text-align: center;
}
nav{
	width: 100%;
	background-color: #496443;
	text-align: center;
	padding: 0px;
	display: flex;
	flex-wrap: wrap;
    justify-content: center;
}
nav a{
	padding: 14px 16px;
	color: #ffffff;
	text-size: 150px;
	display: inline-block;
    text-decoration: none;
}
nav a:hover{
	color:white;
	background-color:#a19f86;
}
main, footer{
	clear:both;
	width: 100%;
}
a { 
	color: #496443;
	text-decoration: none;
	text-align: center;
	display: inline-block;
	padding: 25px;
}
header, nav, main, aside, article, footer{
	width: 100%;
	padding: 5px;
	text-align: center;
    display: block;
}
footer {
	text-align: center;
	color: #FFFFFF;
	background-color: #496443;
	min-height: 175px;
}
ul {
	list-style-type: none;
    background-color: #f1f1f1;
    background-size: 100%;
    padding: 20px;
    width: 100%;
    border-radius: 20px;
}
img {
    max-width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 10px;
}
#logo{
	float: left;
    max-width: 50px !important;
}
#portrait{
    float: left;
}
#aboutarticle{
    background-color: #f1f1f1;
    border-radius: 20px;
    padding: 15px;
}
a[href]{
    background-color: #496443;
    color: #FFFFFF;
    font-size: 22px;
    padding: 8px 16px;
    display: inline-block;
    text-decoration: none;
    border-radius: 20px;
}
a[href]:hover{
    color:white;
	background-color:#a19f86;
}
.w3-button{
    padding: 5px 10px 10px;
    color: #FFFFFF;
    font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "serif";
    background-color:#2F251B;
    text-align:center;
    width: 100px;
    border-radius: 20px;
    font-size: 15px;
}
.w3-display-left{
    float: left;
}
.w3-display-right{
    float: right;
}
.w3-display-container{
    width: 100%;
    min-height: 400px;
}
.recipeform{
    background-color: #f1f1f1;
    padding: 40px;
    text-align: left;
    border-radius: 10px;
    box-shadow: 10px 10px #496443
}
.intro{
    background-color: #f1f1f1;
    border-radius: 20px;
    padding: 5px;
    box-shadow: 5px 5px #2F251B;
}
#blogpost{
    width: 100%;
    height: auto;
    max-width: 150px;
}
.collapsible{
    background-color: #2F251B;
    cursor: pointer;
    text-align: center;
    font-size: 25px;
    color: #FFFFFF;
    padding: 5px;
    border-radius: 20px;
    box-shadow: 5px 10px #496443;
}
.active, .collapsible:hover{
    background-color: #a19f86;
}
.content{
    display: none;
    background-color: #ffffff;
    text-align: left;
}
@media screen and (max-width:700px){
	nav.navbar{
		float: none;
	}
	h1{
	line-height: 80px;
    }
	nav a{
		width: auto;
		display: flex;
        flex-wrap: wrap;
	}
	nav{
		width: 100%;
		display: flex;
		text-align: center;
}
	a{
		padding: 7px 15px;
		text-align: center;
		float: none;
		overflow: hidden;
		display: inline-block;
		text-justify: auto;
		}
		
aside, article{
	display: flex;
	flex-wrap: wrap;
	float: left;
    padding-left: 15px;
    padding-right: 15px;
}
    .ps1col{
        width: 25%;}
    .ps2col{
        width: 50%;
 }
    .ps3col{
        text-align:center; 
        width: 100%;}
    .ps4col{
        width: 100%;
         }
}

footer{
    clear:both;
}

@media print{
	nav, footer {
		display: none;}
	#wrapper, main{
		width: 100%;
		margin: 0;
	}
	body{
		font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "serif" !important;
		line-height: 1;
	}
	main:before{content: "Please see madebymrecipes.com for the latest version of this information.";
	border: thin dotted;
	padding: 5px;}
	a[href*='//']:after, a[href*='mailto']:after{
		content:"["attr(href)"]";
		font-size: .75em;
		font-weight: normal;
		word-wrap: break-word;
	}
	*{ background-color:#FFF !important;
	background-image: none !important;
	color: #000 !important;}
	}


@media screen and (min-width:700px){
    .blogcolumn1{width: 20%; float:left;}
    .blogcolumn5{width: 100%; float: left;}
}