@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,700);

/* in css we target elements in our page. the targetted element is called 
a selector. After the selector we open the rule block with curly braces. Inside the curly 
braces we write styles. Styles are made up of two parts: property and value
*/


body {
	/* declaring the font-family requires us to have a fallback in place in case the primary one isn't avalable */
		font-family: "Roberto", sans-serif;
		/*font size is 16px in browsers by default*/
		font-size: 16px;
		/*line height is a multiplier of the font size */
		line-height: 1.8;
		/*change the color which cascades*/
		color: #383838;
		/* align text */
		text-align: center;
		margin: 0;
}

header {
		background-image: url(../images/splash3.jpg);
		background-position: center bottom;
		background-repeat: no-repeat;
		background-size: cover;

}

h1 {	/*padding pushes the edges of the box away from the content*/
		padding: 30px 0 40px 0;
		/*remove the defualt browser styles*/
		margin: 0
		/**/

}

nav {
		background-color: #ffd700;
		padding: 20px 0 20px 0;

}
/*this is a nested selector it will only select anchor tags in the nav tag*/

nav a {
	text-transform: uppercase; 
	font-weight: 700;
	color: #444444;
	padding: 10px 20px 10px 20px;
	text-decoration: none;


}

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
}

.trigger {
	display: none;
}
.currentLink {
    color: #ffffff;
}

section {
	/*this targets 4 sides like shorthand*/
	padding: 0 40px;
	/*margin auto on the left and right automatically centers the element*/
	margin: 60px auto 60px auto;
	/*we constrain the width of the section*/
	width: 640px;
}
h2 {
	font-size: 35px;
	margin: 40px 0 0 0 ;
	text-transform: uppercase;
	font-weight: 400;
	line-height: 1.3;
}
h3 {
	font-size: 16px;
	margin-bottom 30px
	color #a3a3a3
	text-transform: uppercase;
	font-weight: 400;
}
blockquote,
h4 {
	font-size: 22px;
	font-weight: 300;
	margin: 20px 0;
}

textarea {
	width: 100%;
	margin: 10px 0 10px 0;
	padding: 10px;
	border: 3px solid #cccccc;
	border-radius: 3px;
}
textarea {
	/* can the textare be resizeb by the user */
	resize: vertical;
	height: 100px;
}


footer {
	background-color: #ffd700;
	padding: 40px 0;
	font-size: 14px;

}
/*Here we target a class which is done with a full stiop and the class name*/
.quote {
	background-color: #ffd700;
	padding: 40px;
	margin-top: 0;
}
.textleft {text-align: left;
}

img,
iframe {
	/*these elements will grow with the size of their parent comtainer or element until they reach 100% or their own size*/
	max-width: 100%;
}

/*this is a media query which allows us to apply styles only when certain screen widths and heights are met*/
@media screen and (max-width: 760px) {

/*block elements have a width of auto by default - reverting back to default*/
 	section {
 		width: auto;
 		padding: 0 3%;
 	}
 	h1 {
 		padding: 100px 20px 40px 20px;
 	}
 	h2 {
 		font-size: 30px

 	}
 	/*force the anchor tags to act like block elements and sit on top of each other rather than inline*/
 	nav a {
 		display: block;
 	}
 	h4,
 	blockquote {
 		font-size: 16px;
 	}
 	footer {
 		padding-left: 3%;
 		padding-right: 3%;
 	}

/*instead of relying on javascript to control the style of the navigation,
 we're going to do it in our css, just as a separation of concerns */
 	.navigation-wrapper {
	max-height: 0;
	overflow: hidden;
	}
	/*this will only be used when an element has both of 
	the classes at the same time*/
	.navigation-wrapper.open {
	max-height: 260px;
	}

 	.trigger {
 		display: block;
 		position: absolute;
 		right: 20px;
 		top: 20px;
 	}
}