:root {
	--color-white: white;
	--color-blue: #66f;
	--color-red: #f66;
	--color-text: #333;
	--color-shadow: #666;
	--color-green: #4a4;
	--color-yellow: #b3b062;
	--gradient: linear-gradient(45deg, var(--color-blue), var(--color-red));

	--border-radius: 1em;
}

/**
 * Layout
 */
html, body {
	min-height: 100vh;
	font-family: sans-serif;
	color: var(--color-text);
}

body {
	background: var(--gradient) fixed;
}

footer {
	color: var(--color-white);
	font-weight: lighter;
	padding: 1em;
	display: flex;
	justify-content: space-between;
	box-sizing: border-box;
}

footer a {
	color: var(--color-white);
	text-decoration: underline;
}

article {
	background: var(--color-white);
	padding: 1.5em 1em;
	box-shadow: 0 0 5px 1px var(--color-shadow);
	box-sizing: border-box;
	display: flex;
	flex-flow: row wrap;
	margin-top: 2em;
}

section {
	flex: 1 100%;
}

.section-avatar img {
	width: 200px;
	border-radius: var(--border-radius);
}

/**
 * Contact section
 */
.section-contact li {
	margin: 5px 5px 10px;
}

.section-contact i {
	width: 1em;
	text-align: center;
	margin-right: 1em;
}

.section-contact i:before {
	background: var(--gradient);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.section-title h1, .section-title h2 {
	margin-top: 0;
	margin-bottom: .5rem;
}

.section-title {
	margin-bottom: 1rem;
}

/**
 * Misc and helpers
 */
h1, h2, h3, h4 {
	margin: .3em 0 .5em;
}

h1 {
	font-size: 3rem;
	font-weight: lighter;
}

h2 {
	font-size: 2rem;
}

h3 {
	font-size: 1.3em;
}

h4 {
	font-size: 1.1em;
}

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

a:hover {
	text-decoration: underline;
}

.accent {
	font-weight: bold;
}

.emphasis {
	font-style: italic;
}

.nobr {
	white-space: nowrap;
}

.sup {
	vertical-align: super;
	font-size: .8em;
	line-height: .5em;
}

p {
	line-height: 1.5em;
	text-indent: 1em;
	text-align: justify;
	margin-bottom: .5em;
}

/**
 * Positive / negative / neutral lists
 */

.list li, .list__item {
	border-left: 3px solid;
	padding-left: .8em;
	margin-bottom: .5em;
	line-height: 1.5em;
}

.list--positive li, .list .list__item--positive {
	border-left-color: var(--color-green);
}

.list--negative li, .list .list__item--negative {
	border-left-color: var(--color-red);
}

.list--neutral li, .list .list__item--neutral {
	border-left-color: var(--color-yellow);
}

/**
 * Timeline
 */
.timeline {
	border-left: 3px solid var(--color-red);
	padding: 1em 20px 0;
	margin-bottom: 1em;
}

.timeline .timeline__entry {
	margin-bottom: 1em;
	position: relative;
}

.timeline__entry__title {
	margin-bottom: 1em;
}

.timeline__entry__details {
	list-style: disc;
	margin-left: 1em;
}

.timeline__entry__details li {
	margin-bottom: .5em;
}

.timeline .timeline__entry[data-date]:before {
	content: attr(data-date);
	display: block;
	font-style: italic;
	margin-bottom: .5em;
}

.timeline .timeline__entry:after {
	content: '';
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--color-white);
	border: 3px solid var(--color-red);
	display: block;
	position: absolute;
	top: 1px;
	left: -27px;
}

.section-assessment__container {
	display: flex;
	flex-flow: row wrap;
}

.section-assessment__container__section {
	flex: 1 100%;
}

@media all and (min-width: 400px) {
	h3, h4 {
		margin: 1em 0 .8em;
	}

	article {
		padding: 1.5rem;
	}
}

@media all and (min-width: 700px) {
	h1, h2 {
		margin: 1em 0 .8em;
	}

	.section-avatar, .section-contact {
		flex: 0 0;
	}

	.section-avatar {
		margin-right: 2rem;
	}

	.section-contact {
		flex-grow: 1;
	}

	.section-contact h3 {
		margin-top: 0;
	}
}

@media all and (min-width: 900px) {
	.section-assessment__container__section {
		flex: 1 50%;
		box-sizing: border-box;
		padding-right: 3rem;
	}
	article, footer {
		width: 900px;
		align-self: center;
		margin-left: auto;
		margin-right: auto;
	}

	.menu-button {
		display: none;
	}

	article {
		border-radius: 1em;
		padding: 2rem;
	}
}

@media print {
	body {
		background-image: none;
	}

	footer {
		display: none;
	}

	article {
		border: none;
		box-shadow: none;
		width: 100%;
	}

	a[href^="http"]:after {
		content: " [" attr(href) "]";
	}

	.section-contact i:before {
		background: none;
		-webkit-background-clip: unset;
		-webkit-text-fill-color: unset;
	}
}