/* V1.0 */
/*Main Objects*/

body {
	max-width: 65em;
	margin: auto;
	padding: .5em;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	font-family: sans-serif;
}

header {
	grid-column: 1/7;
	grid-row: 1 / span 1;
	display: flex;
	justify-content: space-between;
}

article h2 {
	grid-column: span 4;
}

aside {
	grid-column: 1 / span 1;
}

article {
	grid-column: 2/7;
	grid-row: 2/auto;
	background-color: whitesmoke;
	border: solid 1px black;
	border-radius: .5em;
	margin: .5em;
	padding: .5em;
}

footer {
	grid-column: 1/7;
}

header, footer, aside {
	background-color: #084a7e;
	color: whitesmoke;
	padding: .5em;
	margin: .5em;
	border: solid black 1px;
	border-radius: .5em;
}

footer h4 {
	margin: .5em;
}

#version {
	text-align: center;
	margin: 0;
	padding: 0;
	font-size: .7em;
}

#version a{
	color: whitesmoke;
}



/*navigation elements*/

nav {
	background-color: whitesmoke;
	border: solid black 1px;
	border-radius: .5em;
	margin: 0.5em;
	padding: .5em;
}

#nav_main {
	position: sticky;
	top: 10px;
}

nav ul {
	list-style-type: none;
	margin: 0;
	padding: 0;
}

footer li {
	display: inline;
}

nav li {
	background-color: #084a7e;
	border-radius: .3em;
	margin: .2em;
	padding: .2em;
	text-align: center;
	width: 8em;
}

nav a {
	color: whitesmoke;
	text-decoration: none;
}

/*article content alignment*/

article {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
}

section {
	grid-column: 1/5;
}

/*button styling*/

button {
	background-color: #084a7e;
	color: whitesmoke;
	border: solid black 1px;
	border-radius: .3em;
	font-size: inherit;
	padding: .3em;
	text-align: center;
	width: 100%;
	cursor: pointer;
}

button:active {
	background-color: #05385f;
}

button:disabled {
	background-color: gray;
	cursor: auto;
}

header img {
	object-fit: contain;
	width: 15em;
	overflow: hidden;
}

/*Coockie opt in*/

#cookie_overlay {
	height: 100%;
	width: 0;
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	background-color: rgb(0, 0, 0);
	background-color: rgba(0, 0, 0, 0.7);
	overflow-x: hidden;
	transition: 0.5s;
}

#cookie_opt_in {
	position: fixed;
	left: 37.5%;
	top: 25%;
	min-height: 30%;
	max-width: 25%;
	border: solid 1px;
	border-radius: .3em;
	background-color: whitesmoke;
	display: none;
}

#cookie_opt_in p {
	margin: .5em;
	font-size: .8em;
}

#cookie_opt_in h3 {
	margin: .5em;
	padding: 1em;
	color: whitesmoke;
	background-color: #084a7e;
	border: solid 1px;
	border-radius: .3em;
}

#cookie_opt_in ul {
	list-style-type: none;
	width: 50%;
	margin: auto;
	margin-top: 2em;
	padding: 0;
}

#cookie_opt_in li {
	margin-bottom: .5em;
	
}

@media (max-width: 55em) {
	/*Main elements*/
	body {
		display: block;
		padding: .2em;
	}
	header, aside, footer {
		margin: .2em;
	}
	article {
		display: block;
		margin: .2em;
	}
	form {
		display: block;
	}
	h1 {
		margin: .1em;
	}
	header {
		display: block;
		text-align: center;
	}
	/*Nav*/
	nav {
		margin: .1em;
		padding: .1em;
	}
	#nav_main {
		position: static;
	}
	nav ul {
		margin: .1em;
		text-align: left;
	}
	nav li {
		margin: .1em;
		width: fit-content;
		display: inline-block;
	}
	nav li a {
		display: inline;
	}
	nav h1, h2, h3, h4, h5 {
		margin: .2em;
	}
	header img {
		display: none;
	}

	#cookie_opt_in {
		left: 10%;
		top: 25%;
		min-height: 30%;
		max-width: 80%;
	}

	#cookie_opt_in ul {
		width: 90%;
	}
}