/*
    if .name -> it's for class; if name -> it's for tag; if #name -> it's from id
*/

body {
	width: 600px;
	/*
        0 = no top/bottom margin, auto = equal left/right margins to center the element horizontally
        in just "margin" it goes like this: top | right | bottom | left
    */
	margin: 0 auto;
	font-family: "Lucida Sans", sans-serif;
	color: #00376c;
}

header {
	border-bottom: 6px solid #7b7b7b;
	line-height: 80px;
	text-align: center;
	background-color: #c7e3ff;
	margin-bottom: 40px;
}

footer {
	text-align: center;
	background-color: #c7e3ff;
	margin-bottom: 40px;
	padding: 10px; /* if just "padding," then it is applied as <value> from each side */
}

/* apply CSS to multiple class (Story, Services, Locations) at once */
.story,
.services,
.locations {
	/*
        same here: top | right | bottom | left
        however, if some values are no set, the inversed side of it will be used as its value
    */
	padding: 10px 15px;
	margin-bottom: 40px;
	background-color: #e7e7e7;
}

a {
	color: #00376c;
	text-decoration: none;
}

a:hover {
	/* when howeving a tag, set the text-decoration to underline */
	text-decoration: underline;
}

h2 {
	border-bottom: 2px solid #7b7b7b; /* goes like: size | style | color */
	text-align: center;
}

h3 {
	color: #1577ff;
	border-bottom: 2px solid #1577ff;
	display: inline;
}

/* css with <selector1> <space> <selector2> -> means apply only to <selector2> when it's inside of <selector1> */
.services p,
footer p {
	font-style: italic;
}

img {
	width: 150px;
}