html, body
{
  background-color : #283953;
  background-image: url("background.png");
  background-repeat: repeat-x;
  color : #fff;
  font-size: 16px;
  font-family : 'Awery';
 
  margin: 0;
	padding: 0;
	height: 100%;
	text-align: center ;
	min-height: 100vh;
	min-width: 220px;

}
 
 
 /* Header */

header
{
	display: flex;
	flex-direction: column;
	text-align: center;
	vertical-align: middle;
	align-items: center;
	justify-content: space-evenly;
	flex-wrap: wrap;
	padding: 0 5vw 0;
	padding: calc (3vw + 1em) 5vw calc(1vw + 1em);
}
	header h1
	{
		margin: 0;
	}
		header h1 img,
		header h1 picture
		{
			width: 68vw;
			max-width: 800px;
		}
	header #subtitle
	{
		padding: 0 0 0;
		margin: 0 0 0;
		font-size: 1.4em;
		font-style: italic;
	}
		header #subtitle a,
		header #subtitle a:focus,
		header #subtitle a:hover
		{
			color: #8e808f;
		}
	header nav#Menu
	{
		display: flex;
		text-align: center;
		align-items: center;
		justify-content: space-evenly;
		width: 80vw;
		max-width: 1024px;
		font-family: 'Montserrat', sans-serif;
		text-transform: uppercase;
	}
	header nav#Menu a,
	header nav#Menu span.current
	{
		display: inline-block;
		margin: 0.4em;
		padding: 0.3em 0.4em;
		width: 280px;
		color: #222;
		font-size: 1.6em;
		font-weight: 300;
	}
		header nav#Menu a:focus,
		header nav#Menu a:hover
		{
			color: #d187cb;
		}
	header nav#Menu span.current
	{
		color: #71529b;
		font-weight: bold;
		position: relative;
	}
	header nav#Menu span.current:after
	{
		content: '';
		position: absolute;
		display: block;
		bottom: 0;
		left: 35%;
		width: 30%;
		height: 2px;
		background: #71529b;
	}
@media (max-width: 1480px)
{
	header nav#Menu a,
	header nav#Menu span.current
	{
		font-size: 1.28em;
	}
}
@media (max-width: 960px)
{
	header nav#Menu a,
	header nav#Menu span.current
	{
		width: 220px;
	}
	header h1 img,
	header h1 picture
	{
		width: 88vw;
	}
}
@media (max-width: 512px)
{
	header nav#Menu
	{
		flex-direction: column;
		font-size: 1.4em;
	}
		header nav#Menu a,
		header nav#Menu span.current
		{
			margin: 0.2em;
			padding: 0.14em 0.2em;
			width: auto;
		}
	header h1 img,
	header h1 picture
	{
		width: 256px;
		max-width: 90vw;
	}
}
@media (max-width: 299px)
{
	header
	{
		padding: 1em 0.2em 1em;
	}
		header nav#Menu
		{
			width: 100vw;
			max-width: 600px;
		}
}



a:link {color: #fff;}
a:visited {color: #fff;}
a:hover {color: #fff;
		font-weight:bold;}
		
		
		
#description
{
	max-width: 100vw;
	justify-content: space-evenly;
	margin-left: auto;
    margin-right: auto;
}

.container
{
	display: inline-block;
	margin-left: auto;
    margin-right: auto;
	  font-size: 22px;
}
.container a
		{
			text-decoration: none;
		}
.container a:hover img
		{
			opacity: 0.8;
		}
.container-text	
{
	margin: 5px 0 30px;	
}

/* Home Icons */

#HomeLinks
{
	padding: 0 8vw 0;
	margin: 50px 0 0;
}

.homeIcons
{
	display: grid;
	grid-template-columns: repeat(4,1fr);
	justify-content: space-evenly;
}
@media (max-width: 60em)
{
	.homeIcons
	{
		grid-template-columns: repeat(2,1fr);
	}
}
@media (max-width: 32em)
{
	.homeIcons
	{
		grid-template-columns: repeat(1,1fr);
	}
}

	.homeIcons a
	{
		text-align: center;
	}

		.homeIcons a img
		{
			max-width: 110px;
			max-height: 110px;
			height: auto;
			transition: opacity 0.6s cubic-bezier(0.2,0,0,1);
		}

		.homeIcons a:hover img
		{
			opacity: 0.8;
		}

		.homeIcons a span
		{
			display: block;
			font-size: 1.6em;
			line-height: 1;
		}

.Icon
{
	max-width: 110px;
	height: auto;
	transition: opacity 0.6s cubic-bezier(0.2,0,0,1);
}
	.Icon a
	{
		max-width: 110px;
		height: auto;
		transition: opacity 0.6s cubic-bezier(0.2,0,0,1);
	}
		
		
footer
{
	background-color : #0e131d;	
	padding: 20px 0 30px;
}

.footer-text
{
	margin: 0;	
}