.resume {
	font-style: italic;
	text-align: center;
	margin: 2em;
}

.panel {
	display: flex;
	flex-wrap: wrap;
	margin: 2em 3px 1em 0;
	border: 1px solid var(--panel-bordercolor);
	background-color: var(--panel-bgcolor);
	box-shadow: 3px 3px 5px #bdbdbd;
	color: var(--color);
	--border-color: var(--panel-bordercolor);
}

.color1 {
	--color: #2f2928;
	--panel-bgcolor: rgba(254, 247, 240, 0.5);
	--panel-bordercolor: #efe0d2;
}

.color2 {
	--color: #2b3034;
	--panel-bgcolor: rgba(248, 247, 251, 0.5);
	--panel-bordercolor: #d3dee3;
}

.color3 {
	--color: #212b21;
	--panel-bgcolor: rgba(254, 245, 245, 0.5);
	--panel-bordercolor: #faf0f8;
}

.color4 {
	--color: #363239;
	--panel-bgcolor: rgba(250, 245, 254, 0.5);
	--panel-bordercolor: #ded6e9;
}

.side {
	padding: .5em;
	margin: .5em;
	min-width: 16em;
}

.side > h2 {
	margin-top: 0;
	color: var(--color);
}

.rowReverse {
	flex-direction: row-reverse;
}

.seeMoreArea {
	display: flex;
	justify-content: center;
	margin: 1.5em 0 .5em 0;
}

.seeMoreBtn {
	border: 1px solid var(--border-color);
	border-radius: 2px;
	background-color: buttonface;
	color: buttontext;
	font-size: 80%;
	text-decoration: none;
	padding: .4em .7em;
}

@media (max-width: 30em) {
	main {
		padding: 0;
	}

	.panel {
		margin: 0;
		border-left: none;
		border-right: none;
	}
}