body {
	background: url(https://images.unsplash.com/photo-1529663297269-6d349ec39b57?ixlib=rb-1.2.1&auto=format&fit=crop&w=1950&q=80);
	background-size: cover;
	background-position: center;
	color: white;
	background-repeat: no-repeat;
	background-attachment:fixed;
	/*background attachment fixes the pic so thaat the text scrolls up past it- mimicks a parralax effect*/
}

html {
	height: 100%;
}

ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
	/*Removes the bullet points, default padding and margin*/
	/*width: 200px;*/
	/*width was removed as it restricted the nav tabs, making them display in two columns of two rows*/
	background-color: #023260;
	/*Nav bar background color Millield light blue*/
	overflow: hidden;
	/*overflow:hidden is added to the ul element to prevent li elements from going outside of the list*/
	position: sticky;
	top: 0;
	/*sticky makes the navbar stick in place once it reaches the desired position in the viewport- set to top: 0 in this case*/
}

li {
	text-align: center;
	/*centers the text in the li elements*/
	float: left;
	/*Floats the li links so they display horizontally not vertically*/
}

li a {
	display: block;
	/*Displays the list links as block elements so the whole area is clickable. & Allows us to specify the width (and padding, margin, height, etc. if needed*/
	/*width: 60px;*/
	/*Block elements take up the full width available by default. We want to specify a 60 pixels width*/
	color: #E4E6EB;
	/*Millfield gray text*/
	padding: 8px 16px;
	/*pads out the nav links, top and bottom 8, left and right 16*/
	text-decoration: none;
}

li a.active {
	background-color: #001745;
	/*Millfield dark blue*/
	color: #E4E6EB;
	/*Millfield gray text*/
}

li a:hover:not(.active) {
	background-color: #001745;
	color: white;
	/*Creates a link color on hover- Millfield dark blue background, white text*/
	/*The not.active selector exempts the active (home) link from changing to gray when hovered*/
}

div {
	text-align: center;
}

.header {
	padding: 10px 0;
	background-color: #001745; /*url(https://images.unsplash.com/photo-1541166662916-67e8fe74fda9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80);*/
	opacity: 0.6;
}

#transition {
	align-content: center;
	text-align: center;
	transition: all 1s;
}

#transition:hover {
	letter-spacing: 0.15em;
	/*creates a transition effect where the letter spacing increases 0.15em over 1 sec*/
}

.primarycontent {
	padding-top: 5%;
	text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
				 0px 8px 13px rgba(0,0,0,0.1),
				 0px 18px 23px rgba(0,0,0,0.1);
	/*The text shadow styles the text within the div with id content, targeting the h1 and h3 together*/
	/*The commas mean we can apply separate shadow stylings simultaneuosly*/
	/*The pixels refer to the x offset, the y offset and the blur radius (then the rgba color) in that order.*/
}

.secondarycontent {
	padding-top: 5%;
}

hr {
	width: 40%;
	border-top: 1px solid #f8f8f8;
	border-bottom: 1px solid rgba(0,0,0,0.2);
	/*These faint borders style the hr subtly*/
}

.secondaryheader {
	background-color: #023260;
	padding: 20px 0;
	margin-top: 10%;
	opacity: 0.6;
	/*sets a margin at 10% gap from the top so it's not visible until scroll down*/
}

.info {
	padding: 5% 15% 5%;
	background-color: #023260;
	/*sets Millfield dark blue background for the info div*/
	
}

.footer {
	padding: 10px 0;
	background: url(https://images.unsplash.com/photo-1541166662916-67e8fe74fda9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80);
	opacity: 0.6;
	border-top: 2px solid gray;
}

a:link {
	text-decoration: none;
	/*Removes the underline from the nav bar links*/
}