@charset "utf-8";

/* <FONTS> */

@import url('https://fonts.googleapis.com/css?family=Lato');

/* <RESET> */

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	/*line-height: 1;*/
	line-height: 1.2; /* Default in most browsers */
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
/* Custom */
pre {
	font-family: monospace;
}
strong {
	font-weight: bold;
}
em {
	font-style: italic;
}

/* <VARIABLES> */

:root {
	--golden-ratio: 1.618;
	--golden-ratio-percent-smallest: 38.2%;
	--golden-ratio-percent-largest: 61.8%;

	--gutter-default: 20px;
	--gutter-xlarge: calc(2 * var(--gutter-default));
	--gutter-large: calc(1.5 * var(--gutter-default));
	--gutter-medium: 15px;
	--gutter-thin: 7px;
	--gutter-xthin: 4px;

	--color-highlight: rgb(61, 89, 133);
	--color-highlight-dark: rgb(13, 10, 40);
	--color-text: #24292e;
	--color-text-alt: white;
	--color-text-light: #7d8085;
	--color-link: var(--color-highlight);

	--text-size-small: 12px;
	--text-size-medium: 14px;
	--text-size-default: 16px;
	--text-size-big: 19px;
	--text-size-xbig: 22px;
	--text-size-xxbig: 28px;
}

/* <FLAGS> */

[data-lang]::before {
	content: '';
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	margin-right: 0.35em;
	margin-left: 0.15em;
	background-size: cover;
	background-repeat: no-repeat;
	vertical-align: top;
	box-sizing: border-box;
	border: 3px solid transparent;
}

[data-lang='ch']::before { background-image: url('img/flags/ch.svg'); }
[data-lang='de']::before { background-image: url('img/flags/de.svg'); }
[data-lang='en']::before { background-image: url('img/flags/en.svg'); }
[data-lang='en_GB']::before { background-image: url('img/flags/en.svg'); }
[data-lang='en_US']::before { background-image: url('img/flags/us.svg'); }
[data-lang='es']::before { background-image: url('img/flags/es--no-coat-of-arms.svg'); }
[data-lang='fr']::before { background-image: url('img/flags/fr.svg'); }
[data-lang='fr_AL']::before { background-image: url('img/flags/al.svg'); }
[data-lang='it']::before { background-image: url('img/flags/it.svg'); }

span[data-lang] {
	font-weight: bold;
	font-style: italic;
}

/* <EXTRAS> */

::selection {
	background-color: var(--color-highlight);
	color: white;
}

/* <GENERAL> */

*:focus { outline: 0; }

html {
	font-size: var(--text-size-default);
}

body {
	color: var(--color-text);
	font-family: Lato, Helvetica, Arial, sans-serif;
	margin: 0;
	padding: 0;
	line-height: 1.2;
}

a {
	text-decoration: none;
	cursor: pointer;
	color: var(--color-link);
}

a:hover {
	text-decoration: underline;
}

.centered {
	max-width: 800px;
	margin: auto;
	box-sizing: border-box;
}

.side-info {
	color: var(--color-text-light);
	font-style: italic;
}

/* <HEADER> */

.header {
	background-color: var(--color-highlight-dark);
	border-bottom: 3px solid var(--color-highlight);
	box-sizing: border-box;
	color: white;
	margin-bottom: var(--gutter-default);
}

.header__container {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	padding: var(--gutter-default);
	/*background-color: pink;*/
}

.header__photo {
	width: 150px;
	height: 150px;
	object-fit: cover;
	object-position: center;
	border-radius: 50%;
	border: var(--gutter-xthin) solid white;
	margin-bottom: var(--gutter-default);
	background-color: var(--color-text-light);
}

.header__info {
	text-align: center;
}

.header__info h1 {
	font-size: var(--text-size-xxbig);
	font-weight: bold;
}

.header__info h2 {
	font-size: var(--text-size-xbig);
	font-weight: bold;
	font-style: italic;
}

@media all and (max-width: 375px) {

	.header__info h2 {
		font-size: var(--text-size-big);
	}
}

.header__info p {
	margin: 0.5em 0;
}

#years-old {
	display: inline;
}

#current-age {
	display: none;
}

.header__info:hover #years-old {
	display: none;
}

.header__info:hover #current-age {
	display: inline;
}

/* <MAIN> */

main {
	padding: var(--gutter-default);
	/*background-color: darkseagreen;*/
}

.main__section {
	margin-bottom: var(--gutter-xlarge);
	/*background-color: orange;*/
}

.main__section h2 {
	background-color: var(--color-highlight);
	display: inline-block;
	font-size: var(--text-size-big);
	font-weight: bold;
	color: var(--color-text-alt);
	text-transform: uppercase;
	padding: var(--gutter-xthin);
	margin-bottom: var(--gutter-medium);
}

.main__section > *:not(h2) {
	padding-left: var(--gutter-medium);
}

.key-experience:not(:last-child) {
	margin-bottom: var(--gutter-medium);
}

.key-experience h3 {
	font-size: var(--text-size-big);
	font-weight: bold;
}

.key-experience__context {
	display: flex;
	flex-direction: column;
	margin-bottom: var(--gutter-xthin);
}

.key-experience__context .organization {
	font-style: italic;
}

.key-experience__context .when-where {
	font-size: var(--text-size-medium);
}

.key-experience__detail {
}

.key-experience__detail.tags {
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	align-items: flex-start;
	flex-wrap: wrap;
}

.key-experience__detail.tags li {
	display: inline-block;
	color: var(--color-text-alt);
	background-color: var(--color-highlight);
	padding: var(--gutter-xthin) var(--gutter-thin);
	margin: calc(var(--gutter-xthin) / 2);
	border-radius: var(--gutter-xthin);
}

.cv-detailed {
	font-weight: bold;
}

.main__section.education [data-lang]::before {
	margin: 0;
}

.main__section.languages li,
.main__section.contact li {
	line-height: 1.5em;
}

.main__section.contact li.email a {
	font-weight: bold;
}

/* <CONTACT> */

.main__section.contact li::before {
	margin-right: 0.35em;
	margin-left: 0.15em;
	display: inline-block;
	width: 1.5em;
	height: 1.5em;
	text-align: center;
}

.main__section.contact li.email::before { content: '✉️'; }
.main__section.contact li.address::before { content: '🏠️'; }
.main__section.contact li.github::before {
	content: '';
	background-image: url('img/github-octocat.svg');
	background-size: contain;
	background-repeat: no-repeat;
	vertical-align: top;
	box-sizing: border-box;
	border: 1px solid transparent;
}

/* <RESPONSIVE> */

/* print && min-width 1100px */
@media print, (min-width: 1100px) {

	.centered {
		max-width: 1300px;
	}

	.header {
		margin-bottom: calc(var(--gutter-xlarge) + var(--gutter-medium));
	}

	.header__container {
		flex-direction: row;
		justify-content: flex-start;
		height: 130px;
		overflow: visible;
	}

	.header__photo {
		/*width: 190px;*/
		/*height: 190px;*/
		position: relative;
		bottom: -40px;
		margin-right: var(--gutter-default);
	}

	.header__info {
		text-align: left;
	}

	main {
		display: flex;
		flex-direction: row;
	}

	.main__layout-column {
		width: 50%;
	}

	.main__layout-column:last-child {
		/* With Flex it is distributed evenly, counts like a third column */
		margin-left: var(--gutter-xlarge);
	}
}

@media print {

	@page {
		size: auto;
		margin: 0mm;
	}

	.noprint {
		display: none;
	}

	html {
		font-size: 12px;
	}

	.header {
		margin-bottom: calc(var(--gutter-large));
	}

	.header__photo {
		width: 125px;
		height: 125px;
	}

	.header__info h1,
	.header__info h2 {
		font-weight: normal;
	}

	#years-old {
		display: inline;
	}

	#current-age {
		display: none;
	}

	.main__section {
		margin-bottom: var(--gutter-large);
	}


	.main__section h2 {
		font-size: 16px;
	}

	.key-experience h3 {
		font-size: 14px;
	}

	.key-experience__context .when-where {
		font-size: 10px;
	}
}