body{
	font-family: "Roboto Slab", 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{
	max-width:900px;
}

#header{
	padding:25px;
	background:#666 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:#999;
	text-decoration:underline;
}

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

#menu .heading{
	background:#000;
	color:#fff;
	text-align:center;
}

#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:orange;
}

.sharethis-inline-share-buttons{
	margin-top:6px;
}

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

/* ---- 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;
}

.protein-calculator{
    max-width:500px;
    margin:auto;
    padding:20px;
    /*border:1px solid #ddd;*/
    border-radius:10px;
    font-family:Arial,sans-serif;
}

.protein-calculator label{
    display:block;
    margin-top:15px;
    font-weight:bold;
}

.protein-calculator input,
.protein-calculator select{
    width:100%;
    padding:10px;
    margin-top:5px;
    box-sizing:border-box;
}

.protein-calculator button{
    margin-top:20px;
    width:100%;
    padding:12px;
    font-size:16px;
    cursor:pointer;
}

.protein-calculator #result{
    margin-top:25px;
    padding:15px;
    background:#f5f5f5;
    border-radius:8px;
    font-size:18px;
}

        #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;
        }