body{
	font-family: "Crimson Pro", serif;
}

@media screen and (min-width: 600px) {
	#wrapper{
		display: grid;
		grid-template-areas:
		"header header"
		"menu content"
		"footer footer";
		grid-template-columns: 1fr 3fr;
		gap: 3px;
	}
	#header{
		grid-area:header;
	}
	#menu{
		grid-area:menu;
		padding-right:15px;
	}
	#content{
		grid-area:content;
	}
	#footer{
		grid-area:footer;
	}
}

#wrapper{
	margin:auto;
	max-width:900px;
}

#header{
	padding:25px;
	background:#eee url(images/header-bg.jpg);
	background-size: cover;
	background-position: 50% 50%;
	text-align:center;
	box-shadow:0 0 15px #000 inset;
}

#logo{
	font-size:2em;
	color:#fff;
	text-decoration:none;
	text-shadow:2px 2px 7px #000;
}
#logo:hover{
	color:#cbe3c8;
	text-decoration:underline;
}

#ad_header{
	margin-top:25px;
	padding:15px;
	background:#000;
	color:#fff;
}
#ad_header a{
	color:#cbe3c8;
}

#menu a{
	display:block;
	padding:5px;
	color:#666;
	text-decoration:none;
}
#menu a:before{
	content:"\00BB";
	padding-right:5px;
}
#menu a:hover{
	background:#666;
	color:#fff;
}
#menu a:hover:before{
	color:#88a885;
}

#footer{
	padding:25px;
	background:#eee;
	text-align:center;
}

.warning{
    background:#7a0000;
    padding:20px;
    text-align:center;
    font-weight:bold;
	color:#fff;
}

.video-container{
    text-align:center;
    margin:40px 0 20px;
}

iframe{
    width:100%;
    max-width:800px;
    height:450px;
    border:none;
}

.cta{
    text-align:center;
    padding:40px 20px 80px;
}

.button{
    display:inline-block;
    background:#4CAF50;
    color:white;
    padding:15px 25px;
    text-decoration:none;
    border-radius:10px;
    font-size:18px;
}

.sharethis-inline-share-buttons{
	margin:20px 0;
}

/* ---- Pages ---- */

#calculator .proteinSource {
	float:left;
	padding-right:15px;
}

#calculator label{
	position:relative;
}

#calculator .aminoAcidProfile{
	position:absolute;
	top:23px;
	left:0;
	border:1px solid #999;
	padding:10px;
	background:#f2efe9;
	z-index:1000;
	display:none;
}

#calculate{
	clear:both;
}

        #contactForm {
            display: flex;
            flex-direction: column;
            gap: 15px;
        }

        #contactForm input,
        #contactForm textarea {
            padding: 12px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
        }

        #contactForm textarea {
            height: 150px;
        }

        #contactForm button {
            padding: 12px;
            background: #222;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
        }

        #contactForm button:hover {
            background: #444;
        }

.impact-calculator{

    max-width:800px;
    margin:auto;

}

.form-group{

    margin-bottom:25px;

}

label{

    display:block;
    margin-bottom:8px;
    font-weight:bold;

}

input,
select{

    width:100%;
    padding:12px;
    border:1px solid #ddd;
    border-radius:6px;
    font-size:16px;

}

button{

    background:#2E7D32;
    color:white;
    padding:15px 30px;
    border:none;
    border-radius:8px;
    font-size:18px;
    cursor:pointer;

}

button:hover{

    background:#256428;

}

.stat-grid{

    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
    gap:20px;
    margin-top:40px;

}

.stat-card{

    text-align:center;
    padding:25px;
    background:#fafafa;
    border-radius:12px;
    box-shadow:0 2px 10px rgba(0,0,0,.08);

}

.emoji{

    font-size:40px;

}

.total-impact{

    margin-top:50px;
    text-align:center;
    padding:35px;
    background:#2E7D32;
    color:white;
    border-radius:15px;

}

.total-impact h1{

    font-size:60px;
    margin:10px 0;

}