html, body {
	margin: 0;
	padding: 0;
}

body {
	/* font-family: 'Fira sans', sans-serif; */
	font-family: 'Nunito', sans-serif;
	color: #333;
	background-color: #fff;
	margin: 10px;
	line-height: 20pt;
}

h2 {
	color: #7C1321;
	border-bottom: 2px solid #7C1321;
}

h2:hover {
	color: #13217C;
	border-bottom: 2px solid #13217C;
	cursor: pointer;
}

.main-container {
	margin: 0 auto;
	width: 1000px;
}

.header {
	display: flex;
	width: 100%;
	justify-content: space-between;
	height: 200px;
}

.header .contact table {
	border-spacing: 5px;
}

.contact table td {
	vertical-align: middle;
}

.section {
}

.section-block {
	padding-bottom: 15px;
	margin-left: 20px;
	margin-right: 20px;
}

.section .title {
	font-weight: bold;
	display: flex;
	width: 100%;
	justify-content: space-between;
}

.skill {
	padding-left: 20px;
}
.picture {
	position: relative;
	width: 200px;
}
.picture img {
	border-radius: 50%;
	position: absolute;
	top: 20px;
	left: 0;
}

.info > div {
	display: flex;
	align-items: center;
	height: 30px;
}

.grayscale {
	filter: grayscale(50%);
}

.grayscale:hover {
	filter:none;
}

@media (max-width: 1080px) {
	.main-container {
		width: 100%;
	}
	.header {
		display: block;
		width: 100%;
	}
	.title {
		flex-direction: column-reverse;
	}
	.date {
		color: #6c7693;
	}
	.description {
		padding-top: 5px;
	}
	.picture {
		position: relative;
	}
	.picture img {
		position: relative;
		top: auto;
		left: auto;
	}
	.header {
		height: auto;
	}
}

.underlying {
	position: relative;
	border-bottom: 1px dotted black;
}

.underlying-content {
	visibility: hidden;
	position: absolute;
	left: 0;
	bottom: 150%;
	z-index: 1;
	background-color: #eaeaea;
	background: linear-gradient(45deg, #eaeaea 0%, lightgrey 100%);
	/* box-shadow: 4px 4px 4px lightgrey; */
	/* border: 1px solid black; */
	padding: 4px;
	font-weight: normal;
	opacity: 0;
	transition: opacity 1s;
}

.underlying:hover .underlying-content {
	visibility: visible;
	opacity: 1;
}

.underlying:hover {
	font-weight: bold;
	cursor: pointer;
}

.underlying .underlying-content::after {
	content: " ";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: #7C1321 transparent transparent transparent;
}