@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@100..900&display=swap');

body {
	position: relative;
	margin: 20vh 0 0 0;
	padding: 0;
	background: #f2f1ed;
	text-align: center;
    font-family: "Outfit", sans-serif;
    font-optical-sizing: auto;
    font-weight: 400;
    font-style: normal;
}

a {
	text-decoration: none;
	color: #406480;
}

#main {
	display: block;
	min-height: 100vh;
}

#content {
	margin: 0 auto;
	min-width: 300px;
	max-width: 1000px;
}

#projects {
	padding: 0;
}
	#projects li {
		list-style: none;
		display: inline-block;
		width: 300px;
		margin: 1em 0.5em;
		padding: 1em;
		text-align: left;
		background: rgba(255,255,255,0.7);
		border-radius: 20px;
	}
	#projects li a.fig {
		display: block;
		width: 300px;
		min-height: 300px;
		margin-bottom: 1em;
		background-repeat: no-repeat;
		background-size: cover;
		border-radius: 20px;
	}
	#projects li a span {
		visibility: hidden;
	}
	
footer {
	display: block;
	padding: 1em 1em 3em 1em;
	background: #212226;
	color: #cccbc8;
}

@media screen and (max-width: 400px) {
	body {
		margin-top: 0;
	}
	#projects {
		padding: 0;
	}
		#projects li {
			display: block;
			width: auto;
			padding: 1em;
			clear: both;
			font-size: 0.95em;
		}
		#projects li a.fig {
			display: block;
			width: 110px;
			float: left;
			min-height: 110px;
			margin: 0 0 1em -0.5em;
		}
		#projects li div {
			display: inline-block;
			max-width: 200px;
			margin-top: 0.3em;
		}
		#projects li div p {
			margin: 0 0 0.7em 0;
			padding: 0 1em;
		}
	
}