:root {
	--bg-color: #F4E9D7;
	--container-color: #6FA4AF;
	--accent1-color: #B8C4A9;
	--accent2-color: #D97D55;
	--text-margin: 10px;
	--min-width: 300px;
	--content-width: clamp(var(--min-width), 90vw, 800px);
	--menu-padding: calc(10px + max((100vw - 1200px)/2, 0px));
}

body {
	margin: 0px;
	min-height:100vh;
	display: flex;
	flex-direction: column;
	background-color: var(--bg-color);
	font-family: "arial";
	min-width: var(--min-width);
}

header, footer {
	color: var(--bg-color);
	background-color: var(--container-color);
	padding: 0px var(--menu-padding);
}

footer {
	margin-top: auto;
	text-align: center;
}

main {
	margin: 0 auto;
	width: var(--content-width);
}

h1 {
	text-align: center;
}

a {
	color: var(--accent2-color);
	text-decoration: none;
}

a:hover {
	color: #F96E5B;
}

#header-name {
	color: var(--bg-color);
	font-size: 2.5rem;
}

#link-banner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	background-color: var(--accent1-color);
	padding-left: var(--menu-padding);
	padding-right: var(--menu-padding);
	border-radius: 0px 0px 6px 6px;
}

.icon {
	height: 1.25rem;
}

.flat-list {
	display: flex;
	margin: 0px;
	padding: 0px;
}

ul.flat-list > li {	
	list-style: none;
	margin: 5px;
}

.fancy-list > li {
	border-top: 3px solid var(--accent1-color);
	border-bottom: 3px solid var(--accent1-color);
	list-style-type: none;
	border-radius: 40px 40px 40px 40px;
	padding: 10px;
}

.project-card {
	padding: 5px;
	border-bottom: 2px solid var(--accent1-color);
}

@media screen and (max-width: 450px){
	header {
		text-align: center;
	}	
}