@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap');

/*
// <uniquifier>: Use a unique and descriptive class name
// <weight>: Use a value from 100 to 900

.inter-<uniquifier> {
  font-family: "Inter", serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}
*/

html {
	font-size: 16px;
	line-height: 1.4em;
}

body {
	margin: 0px;
	min-height: 100vh;
	font-family: Inter, Helvetica, sans-serif;
	background-image: url("images/Kelp Island.jpg");
	background-position: center top;
	background-size: cover;
	background-attachment: fixed;
	display: grid;
	grid-template-columns: auto 800px auto;
	grid-template-rows: auto 1fr;
/* 	gap: 20px; */
}

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

a:hover {
	text-decoration: underline;
}

#container {
/* 	max-width: 800px; */
/* 	margin: auto; */
/* 	grid-column: 2 / span 1; */
}

header {
	grid-column: 1 / -1;
/*	position: sticky;
	top: 0px;*/
}

header {

	display: grid;
	grid-template-columns: inherit;
	color: white;
	text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
	background-color: rgba(0, 0, 0, 0.8);
}

header > div {
/* 	min-height: 180px; */
	grid-column: 2 / span 1;
	display: grid;
	padding: 30px 0px;
}

header nav {
	grid-row: 3;
	grid-column: 2 / span 1;
	text-align: right;
}

header h1 {
	font-size: 3rem;
	grid-row: 2;
	margin: 0px;
	line-height: 100%;
	align-self: end;

}

header h2 {
	font-size: 0.75rem;
	grid-row: 1;
	text-align: right;
	margin: 0px;
	line-height: 100%;
	align-self: start;
}

main {
	background-color: rgba(255, 255, 255, 0.8);
	border-radius: 5px;
	grid-column: 2 / span 1;
	padding: 40px;
	margin: 30px 0px 60px 0px;
	margin-trim: block;
}

main ul {
	list-style-type: square;
	margin-top: 0px;
}

main > ul {
	margin: 0px;
	padding: 0px;
	list-style-type: none;
/* 	padding: 40px; */
}

main > ul > li {
	margin-bottom: 1.5em;
}

footer {
	text-align: right;
}