@import url('https://fonts.googleapis.com/css2?family=Pompiere&family=Quicksand:wght@300..700&display=swap');

.pompiere-regular {
  font-family: "Pompiere", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.quicksand-<uniquifier> {
  font-family: "Quicksand", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
}

:root {
	--maincolor: #023047;
	--lightbackground: ivory;
	--darkaccent: ;
}

html {
	background-color: var(--maincolor);
	color: white;
}

header {
	font-family: "Pompiere";
	font-size: 150%;
	margin: 30px;
	text-align: center;
}

h1 {
	padding-left: 0px;
	text-align: center;
}

h1 img {
	width: 75px;
	height: auto;
	padding-left: 20px;
}

li {
	display: inline;
	padding: 5px;
	filter: drop-shadow(1px 1px 10px #fff);
}

section ul li {
	display: block;
}

main {
	font-family: "Quicksand";
	display: flex;
	flex-direction: column;
	color: var(--maincolor);
	background-color: var(--lightbackground);
	margin: 30px;
	padding: 30px;
	border-radius: 8px;
		a:link {
	color: var(--maincolor);
	}
		a:visited {
	color: pink;
	}
		a:hover {
	color: yellow;
	}
		a:active {
	color: pink;
	}
}

.highlight img {
	max-width: 150px;
	max-height: auto;
}

a:link {
	color: white;
}
a:visited {
	color: pink;
}
a:hover {
	color: yellow;
}
a:active {
	color: pink;
}

footer {
	font-family: "Pompiere";
	font-size: 150%;
	margin: 30px;
	text-align: center;
}


@media (min-width: 600px) {

	a img {
		max-width: 100px;
		max-height: auto;
	}

	body {
	
	}

	main {
		display: grid;
		grid-template-columns: repeat(5,auto);
		grid-template-rows: auto auto;
		height: 15vw;
	}

	.first {
		grid-column: 1 / span 1;
		grid-row: 1 / span 1;
	}

	.second {
		grid-column: 2 / span 1;
		grid-row: 1 / span 1;
	}

	.third {
		grid-column: 3 / span 1;
		grid-row: 1 / span 1;
	}

	.highlight img {
		max-width: 100px;
		height: auto;
		border-radius: 8px;
		filter: saturate(0%) contrast(150%);
		overflow: hidden;
		border: 1px solid black;
		text-align: center;
	}

	.highlight img:hover {
		filter: drop-shadow(5px 5px 10px #000);
		transform: scale(2.0);
	}

	}