/*whole page****************************************************************************************/
 body {
 	margin: 0;
 	background-color: #a8b4b9;
 }

@font-face {
 	font-family: Roboto-bold;
 	src: url(fonts/Roboto-Bold.ttf);
 }

@font-face {
 	font-family: Roboto-regular;
 	src: url(fonts/Roboto-Regular.ttf);
 }

@font-face {
 	font-family: Roboto-light;
 	src: url(fonts/Roboto-Light.ttf);
 }

@font-face {
 	font-family: OpenSans-bold;
 	src: url(fonts/OpenSans-Bold.ttf);
 }

a {
	color: black;
	text-decoration: none
}

div#container {
 	height: 100vh;
 	display: flex;
 	flex-flow: column wrap;
 	justify-content: space-between;
 }		

 /*header****************************************************************************************/
header {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	height: 7%;
 	background-color: rgba(58, 89, 105, 0.7);
 }

header > div {
	flex-grow: 2;
	font-family: Roboto-regular;
	font-size: 1.6em;
	padding: 0 0 0 0.5em;
}
 nav {
	flex-grow: 1;
 	display: flex;
 	justify-content: space-around;
 }

 nav > div {
 	font-family: Roboto-bold;
 	text-transform: uppercase;
 	font-size: 1.6em;
}

header a {
	color: white;
}

nav .active {
	text-shadow: 2px 2px 2px #4d4d4d;
}

nav > div:hover, header > div:hover {
	text-shadow: 2px 2px 2px #4d4d4d;
}

 /*main ****************************************************************************************/

main {
	width: 100%;
	align-self: flex-start;
	flex-grow: 1;
}

main > div {
	padding: 2em 0 0 2em;

}

div#block {
	background-color: rgba(243, 244, 245, 0.3);
	margin: 2em 0 0 3em;
	padding: 0.1em 1em 1em 1.2em;
	width: 70%;
}

#block > h1 {
	font-family: OpenSans-bold;
	font-size: 2.7em;
	margin-top: -0.8em;
}

div#list {
	font-family: Roboto-light;
	font-size: 1.6em;
	padding-left: 1.5em;
}

#list > div {
	margin: 0.8em 0 0 0;
}




/*footer****************************************************************************************/
footer {
	width: 100%;
	align-self: flex-end;
	height: 3%;
	text-align: center;
	font-family: Roboto-light;
}


/*responsiveness*/

/*equal size header*/
@media (max-width: 750px){
	header > div, nav > div {
		font-size: 1.2em;
	}

	main > div > h1 {
		font-size: 2em;
	}

	header > div {
		flex-grow: 1;
	}
}

/*remove company name*/
@media (max-width: 550px){
	header > div {
		display: none;
	}

	header > div, nav > div {
		font-size: 1.2em;
	}

	main > div > h1 {
		font-size: 1.4em;
	}

	div#list {
		font-size: 1em;
	}

	div#block {
		margin: 1em 0 0 2em;
	}

}