style.css

@import url('https://fonts.googleapis.com/css?family=Old+Standard+TT|Scope+One|Cinzel:700,900|Alex+Brush|Qwigley|Heebo:300,500,800,900');
/*font-family: 'Heebo, Cinzel, Scope One, Old Standard TT' alterntive font is serif;*/

/*this is the main container of the content it is styled using percentages so easily adjusted*/
body{
	margin: auto;
	width: 80%;
	clear: both;
	text-align: left;
	font-family: "Scope One", "serif";
	color: black;
	font-size: 90%;/*base font size is 14px* so this percentage is useful instead of using several different sizes*/
	line-height: 1.5;
}

/*used for the heading*/
h1{
	font-family: "Alex Brush", "serif" ;
	font-size: 75px;
	z-index: 2;
	background-color: rgba(174, 196, 207, 0.2);
	color: #852f0d;
	border-radius: 5px 5px 0 0;
	text-align: center;
	line-height: 1.1;
	padding-top: 3px;
	margin-bottom: 0px;
	margin-top: 5px;
}

/*used for the sub-heading*/
h3{
	font-family: "Alex Brush", "serif";
	font-size: 180%;
	background-color: rgba(174, 196, 207, 0.2);
	color: gray;
	border-radius: 0 0 5px 5px;
	text-align: center;
	margin-top: 0px;
	margin-bottom: 15px;
	letter-spacing: 1px;
}

/*used for the section heading*/
h2{
	font-family:"Heebo", "serif";
	font-size: 190%;
	font-weight: 300;
	color: #808080; /*gray*/
	text-align: center;
	letter-spacing: 2.5px;
	line-height: 1;
	margin-top: 6px;
	margin-bottom:2px;
}

/*used for the article title heading*/
h4{
	font-family: "Heebo", "serif";
	font-weight: 300;
	font-size: 25px;
	padding:0px;
	margin-top:0px;
	text-align: center;
}
/*all images except about pic*/
img{
	width:100%;
	border-radius: 10px;
	float: center top;
}

/*navigation bar properties*/
a{
	font-family: "Heebo", "serif";
	font-weight: 300;
	text-decoration: none; /* removes lines form linked text*/
	color: #032429;
}

a:link, a:visited;{
	background-color: #40E0D0;
}

a:hover, a:active{
	color: #ffffff; /*white*/
}

/*This is for the drop down menu for recipes*/

li a:hover, .drop-down:hover .drop-btn {
	background-color: #AEC6CF;
	border-radius: 5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

li.drop-down {
	display: inline-block;
}

.drop-down-content{
	display: none;
	position: absolute;
	background-color: #f9f9f9;
	min-width: 160px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.drop-down-content a {
	color: black;
	padding: 10px 25px;
	text-decoration: none;
	display: block;
	text-align: left;
}

.drop-down-content a:hover{
	background-color: #f1f1f1
}

.drop-down:hover .drop-down-content{
	display:inline;
	background-color: rgba(174,198,207,0.58);
}
/*ends here*/

/*this is the navigation bar at the top of the page*/
.main-header nav{
	background-color: rgb(232, 140, 186);
	height: 40px;
	border-radius: 5px;
	-moz-border-radius:5px; /* allows firefox/mozilla browser to render the pages correctly*/
	-webkit-border-radius:5px;/*allows web browsers like safari/opera/chrome to render the pages correctly*/
}

.main-header nav ul{
	list-style: none;
	margin: auto;
}

.main-header nav ul li{
	float: left;
	display: inline;
}
.main-header nav a:link, .main-header nav:visited{
	display: inline-block;
	padding: 10px 27px;
	height:20px;
}
/*ends here*/

/*to see color when you move mouse over the tab*/
.main-header nav a:hover, .main-header nav a.active,
.main-header nav .active a:link, .main-header nav .active a:visited{
	background-color: #cfaecf;
	text-shadow: none;
}

.main-header nav ul li a{
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

/*this contains all content on the page except the header and the footer*/
.main-content{
	line-height: 25px;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
}

.content{
	width: 69%;
	height: auto;
	float: left;
}
/*ends here*/

/*every other paragraph is a ddifferent color (used purple)*/
content>p:nth-child(even){
	color: rgba(115, 0, 128, 0.66);
}
/*ends here*/

/*capitalize the first letter of every paragraph*/
content>p::first-letter{
	font-size: 200%;
	color: #8A2BE2;
}
/*ends here*/

/*Read More*/
input.read-more-state {
	display: none;
}

p.read-more-target {
	font-size: 0;
	max-height: 0;
	opacity: 0;
	transition: .20s ease;
}

input.read-more-state:checked ~ content.read-more-wrap p.read-more-target {
	font-size: inherit;
	max-height: 999em;
	opacity: 1;
}

input.read-more-state ~ label.read-more-trigger:before {
	content: "Read more";
	color: #8A2BE2;
}

input.read-more-state:checked ~ label.read-more-trigger:before {
	content: "read less";
	color: #8A2BE2;
}

label.read-more-trigger {
	cursor: pointer;
	display: inline-block;
}
/*ends here*/

.section{
	background-color: rgba(94, 64, 224, 0.06);
	border-radius: 5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	padding: 1% 1%;
	margin-top:8% ;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.top-content,.middle-content,.bottom-content{
	background-color: #eff3f6;
	border-radius: 5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	padding: 3% 5%;
	margin-top:3% ;
}

.post-info{
	font-style: italic;
	color: black;
	font-size: 90%;
}

.about-sidebar,.middle-sidebar,.bottom-sidebar {
	width: 21%;
	float: left;
	padding: 2% 3%;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
	border-radius: 5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
}

.about-sidebar{
	background-color: #AEC6CF;/*pastel blue*/
	margin: 5.2% 0 2% 3%;
}
.middle-sidebar{
	background-color: #cfaecf; /*medium purple*/
	margin: 2% 0 2% 3%;
}

.bottom-sidebar{
	background-color: rgb(232, 140, 186);/*cool deep pink*/
	margin: 2% 0 2% 3%;
}

.about-sidebar h2, .middle-sidebar h2, .bottom-sidebar h2{
	font-family: "Heebo", "serif";
	font-weight: 300;
	font-size: 25px;
	color: #510551;
}

img.imgsidebar{
	width: 60%;
	margin: auto;
	padding: 2% 20% 2% 20%;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.main-footer{
	width: 100%;
	height: 38px;
	float: left;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	background-color: rgba(232,140,186,1);
	margin: 2% 0 2% 0;
}

.main-footer p{
	text-align: center;
	font-size: 80%;
	width: 100%;
	margin: 10px;
}

/*MEDIA*/
@media only screen and (min-width: 150px)
and (max-width: 600px){

body{
	width: 90%;
	font-size: 94%;
}

h1{
	font-family:"Alex Brush", "serif";
	font-size: 60px;
	line-height: 0.9;
	padding-top: 6px;
	margin-bottom: 0px;
	margin-top: 5px;
}

h2{
	font-size: 150%;
}

h3{
	font-family: "Heebo", "serif";
	font-weight: 300;
	font-size:95%;
}

h4{
	font-size: 20px;
}

.main-header nav{
	height: 160px;
}

.main-header nav ul{
	padding-left: 0;
	width: 100%;
}

.main-header nav ul li{
	width: 100%;
	text-align: center;
}

.main-header nav a:link, .main-header nav:visited{
	padding: 10px 25px;
	height: 20px;
	display: block;
}

.drop-down-content{
	display: none;
	position: relative;
	background-color: #f9f9f9;
	min-width: 240px;
	box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.content{
	width: 100%;
	float: left;
	margin-top:2%;
}

.middle-sidebar, .bottom-sidebar{
	text-align: center;
	width: 89%;
	margin: 2% 0 2% 0%;
	padding: 6% 6%;
}
.about-sidebar{
	text-align: center;
	width: 89%;
	margin: 5% 0 2% 0%;
	padding: 6% 6%;
}

img.imgsidebar{
	width: 60%;
	margin-left: 9%;
	margin-right: 5%;
	padding-left: 10%;
	padding-right: 10%;
	box-shadow: 0px 8px 14px 0px rgba(0,0,0,0.2);
}

.main-footer p{
	width: 100%;
	font-size: 70%;
	text-align: center;
}

}