body {
	font-family: Josefin Sans;
	font-size: 16px;
	
	background-color: #004D9D;
	color: #ffffff;
}

a {
	/* need to specify a colour for our links */
	color: #ffffff;
	/* this removes the default underline */
	text-decoration: none;
}

a:hover {
	color: #dddddd;
}

section {
	height: 100vh;
	background-image: url("sally_1.jpg");
	/* our background image will cover the full width and height
	of our section without skewing or repeating the image */
	background-size: cover;

	/* this will fix the background to the viewport 
	rather than to the section, creating a reveal effect as we scroll */
	background-attachment: fixed;
}

header {
	/* using fixed position allows us to precisely position an element
	in relation to the browser viewport  */
	position: fixed;
	top: 20px;
	left: 20px;
}

footer {
	position: fixed;
	bottom: 20px;
	left: 20px;
}

h1 {
	font-size: 24px;
	/* margins are the go-to property for when we want to 
	create space between elements on our page */
	margin-bottom: 5px;
}

	/* this will select only the a tags that are inside the footer tags */
footer a {
	margin-right: 5px;
}

/* this will apply styles to any element in our html which
has a 'class' attribute of '.image_' */
.image_2 {
	background-image: url("sally_2.jpg");
}

.image_3 {
	background-image: url("sally_3.jpg");
}

.image_4 {
	background-image: url("sally_4.jpg");
}