/*whole page****************************************************************************************/
 body {
 	margin: 0;
 	background-image: url("img/background@full.jpg");
 	background-size: 100vw;
 }

@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: 1;
	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 ****************************************************************************************/
em {
	font-style: none;
}
main {
	width: 100%;
	align-self: flex-start;
	flex-grow: 1;
}

main > div {
	padding: 0.5em 0 1em 2em;
	background: rgb(255,255,255, 0.5);
	background: linear-gradient(90deg, rgba(255,255,255,0.6418942577030813) 77%, rgba(0,212,255,0) 100%);
	width: 70%;

}

main > div > h1 {
	font-family: OpenSans-bold;
	font-size: 2.7em;
}

main > div > p {
	font-family: Roboto-light;
	font-size: 1.6em;
	width: 70%;
}

.highlight {
	font-family: Roboto-bold;
	color: #3a5969;
}

a#button {
	display: inline-block;
	padding: 0.8em;
	border-radius: 1.2em;
	font-family: Roboto-bold;
	text-transform: uppercase;
	background-color: #3a5969;
	color: white;
	-webkit-box-shadow: 2px 2px 8px -3px #000000; 
	box-shadow: 2px 2px 8px -3px #000000;
}

a#button:hover{
-webkit-box-shadow: inset -1px -1px 7px -1px #000000; 
box-shadow: inset -1px -1px 7px -1px #000000;
}

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


/*responsiveness*/
@media (max-width: 960px){
	body {
	 	background-image: url("img/background@0.5x.jpg");
	 	background-size: 100vw;
	 }
}

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

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

	main > div > p {
		font-size: 1.2em;
	}

	#button {
		font-size: 0.8em;
	}

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

/*remove company name*/
@media (max-width: 600px){
	body {
	 	background-image: url("img/background@0.3x.jpg");
	 	background-size: 100vw;
	 }

	header > div {
		display: none;
	}

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

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

	main > div > p {
		font-size: 1em;
	}

	#button {
		font-size: 0.8em;
	}
}

@media (max-width: 350px){
	div#container {
	 	flex-flow: row wrap;
	 }

	header {
		width: 100vw;

	}

}