body {
	background-image: url("../img/Backdrop.jpg") ;
    background-repeat: no-repeat;
	background-size: cover;
	color: #f1f1f1;
	text-align: center;
	image-align: center;
    font-weight: bold;
	}
		
/*Apply custom fonts*/
@font-face 
	{font-family: Athelas;
	src: url(font/Athelas/Athelas-Bold.ttf);
	}
/*Style the nav-bar*/
ul	{
	list-style-type: none;
	margin: 0;
	padding: 0;
	overflow: hidden;
	background-color: white;
	}
	
ul {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
	}
	
li {
    float: left;
	}

li a {
		display: block;
		padding: 8px;
	}
	
.active {
    background-color: #4CAF50;
	}

/*Sets the grid for all pages except Menu, which uses a different variation  of embedded code*/
	* {
		box-sizing: border-box;
	}

	.header {
		grid-area: header;
		padding: 30px;
		text-align: center;
		font-size: 20px;
	}

	.grid-container {
		display: grid;
		grid-template-areas: 
		'header header header header header header' 
		'left left middle middle right right' 
		'footer footer footer footer footer footer';
		grid-column-gap: 10px;
	} 

	.left,
	.middle,
	.right {
			padding: 10px;
	}

	.left {
		grid-area: left;
	}

	.middle {
		grid-area: middle;
	}

	.right {
		grid-area: right;
	}
	.footer {
		grid-area: footer;
		background-color: #f1f1f1;
		padding: 10px;
		text-align: center;
	}

	/*Responsive layout - makes the three columns stack on top of each other instead of next to each other.  Will mainly be for mobile devices
	@media (max-width : 599px ){
		.grid-container  {
			grid-template-areas: 
			'header header header header header header' 
			'left left left left left left' 
			'middle middle middle middle middle middle' 
			'right right right right right right' 
			'footer footer footer footer footer footer';
	}*/