@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&display=swap');

body {
	background: linear-gradient(90deg, #010710, #08080c);
	background-size: 400% 400%;
	animation: gradient 10s ease infinite;
	height: 100vh;
	font-family: "Rubik", sans-serif;
	font-style: normal;
	max-width: 660px;
	margin: auto;
	padding: 1em;
	color: #ccc;
}

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

footer {
	text-align: center;
	padding-bottom: 1em;
}

hr,
ul {
	margin-bottom: 2em;
}

h1 {
        font-size: 3.6em;
	margin-bottom: -0.1em;
}

h1,
h2 {
	font-family: "Merriweather", serif;
  	font-optical-sizing: auto;
  	font-style: normal;
	text-transform: uppercase;
	color: white;
}

ul {
	list-style: square	
}

img {
	display: block;
	margin: auto;
}

a:link {
	color: #ff6347;
}

a:visited {
	color: #fa8072;
}

a:hover,
a:focus {
	text-decoration: none;
	color: #fffafa;
	background-color: #b11031;
}

.project {
	padding-left: 6px;
	border-left: solid 6px #ffa500;
}

#map-img {
	max-width: 100%;
  	height: auto;
  	display: block;
}