/* General section */

/* Color palette: #A0A0A1 #707071 #57575A #222228 #18163D #080635 */

html, body
{
	height: 100%;
	font-family: 'Montserrat', serif;
	font-weight: 300;
}

h1, h2, h3, h4, h5, h6
{
	font-family: 'Montserrat', sans-serif;
	font-weight: 400;
}

.small-caps
{
	font-variant: small-caps;
}

.contact-links.narrow
{
	display: block;
	margin-top: 1em;
}

.contact-links li
{
	display: inline;
	margin-left: 0.1em;
	margin-right: 0.1em;
}

.contact-links img
{
	width: 2.6em;
}

.contact-links.narrow a
{
	border-bottom: none !important;
}

.large
{
	display: none;
}

.narrow
{
	display: initial;
}

.download:before
{
	font-family: 'IcoMoon' !important;
	content: "\e933";
	margin-right: 0.2em;
}

.error-info
{
	border: 1px solid #AA0000;
	padding: 1em;
	text-align: center;
	color: #AA0000;
	font-size: 1.2em;
	background: rgba(255, 0, 0, 0.2);
	max-width: 50em;
	margin: auto;
}

.error-info:before
{
	content: '\ea0d';
	font-family: 'IcoMoon' !important;
	margin-right: 0.2em;
}

.warning-info
{
	border: 1px solid #777700;
	padding: 1em;
	text-align: center;
	color: #777700;
	font-size: 1.2em;
	background: rgba(255, 255, 0, 0.2);
	max-width: 50em;
	margin: auto;
}

.warning-info:before
{
	content: '\ea07';
	font-family: 'IcoMoon' !important;
	margin-right: 0.2em;
}

.success-info
{
	border: 1px solid #00AA00;
	padding: 1em;
	text-align: center;
	color: #00AA00;
	font-size: 1.2em;
	background: rgba(0, 255, 0, 0.2);
	max-width: 50em;
	margin: auto;
}

.success-info:before
{
	content: '\ea0c';
	font-family: 'IcoMoon' !important;
	margin-right: 0.2em;
}

.hp
{
	display: none !important;
}

.lang-selector
{
	list-style-type: none;
	text-align: center;
	margin-top: 1em;
}

.lang-selector li
{
	display: inline;
	font-size: 1.2em;
}

.lang-selector a
{
	color: #A0A0A1;
	text-decoration: none;
}

/* Header */

header
{
	height: 100%;
	width: 100%;
	text-align: center;
	background: #222228 url('../img/background-noise.png');
	color: #A0A0A1;
}

header #profile-picture
{
	margin-top: 10em;
	width: 8em;
	background: #707071;
	border-radius: 100%;
}

header h1
{
	font-size: 2em;
	margin-top: 1em;
}

header h2
{
	font-size: 1.1em;
	margin-top: 0.4em;
	margin-bottom: 1em;
	font-weight: 300;
}

header nav li
{
	padding-top: 0.4em;
	padding-bottom: 0.4em;
	font-size: 1.3em;
	font-variant: small-caps;
	width: 100%;
}

header nav li:hover
{
	background: #151521;
}

header nav a:before
{
	font-family: 'IcoMoon' !important;
	margin-right: 0.4em;
}

header nav .about-link:before { content: "\e923"; }
header .portfolio-link:before { content: "\e915"; }
header .cv-link:before { content: "\e907"; }
header .contact-link:before { content: "\e945"; }

header nav a
{
	color: #A0A0A1;
	text-decoration: none;
}

header nav a:hover
{
	color: #808081;
}

/* Content */

#content-wrapper section, #content-wrapper aside, #content-wrapper footer
{
	padding: 1.5em;
	box-shadow: 0px 2px 1px #909091 inset;
	text-align: center;
	color: #080635;
}

#content-wrapper footer
{
	background: #222228 url('../img/background-noise.png');
	color: #A0A0A1;
}

#content-wrapper section:nth-child(odd), #content-wrapper aside:nth-child(odd)
{
	background: #F0F0F1 url('../img/background-noise.png');
}

#content-wrapper section:nth-child(even), #content-wrapper aside:nth-child(even)
{
	background: #EAEAEB url('../img/background-noise.png');
}

#content-wrapper h3
{
	margin-bottom: 0.5em;
	font-size: 3.2em;
}

#content-wrapper h4
{
	margin-bottom: 0.2em;
	margin-top: 0.3em;
	font-size: 1.6em;
}

#content-wrapper h5
{
	margin-bottom: 0.2em;
	margin-top: 0.1em;
	font-size: 1.4em;
}

#content-wrapper p
{
	font-size: 1.2em;
	margin-top: 0.6em;
	margin-bottom: 0.6em;
	line-height: 1.8em;
}

#content-wrapper a
{
	color: #18163D;
	text-decoration: none;
	border-bottom: 1px dotted #18163D; /* Prettier than the ugly text-decoration-style: dotted */
}

#content-wrapper footer a
{
	color: #808081;
	text-decoration: none;
	border-bottom: 1px dotted #808081;
}

#content-wrapper strong
{
	font-weight: 400;
}

#content-wrapper blockquote
{
	font-style: italic;
	margin-bottom: 0.75em;
	font-size: 1.5em;
	color: #626268;
	quotes: "\201C""\201D""\2018""\2019";
}

#content-wrapper blockquote .quote-content:before
{
	content: open-quote;
	font-size: 2.25em;
}

#content-wrapper blockquote .quote-content:after
{
	content: close-quote;
	font-size: 2.25em;
	float: right;
}

#content-wrapper blockquote .quote-author
{
	font-style: normal;
	color: #222228;
	font-size: 0.6em;
}

#content-wrapper footer p
{
	font-size: 1em;
	margin: 0;
	line-height: 1.5em;
	font-weight: 300;
}

#content-wrapper .button-list
{
	list-style-type: none;
}

#content-wrapper .button-list a
{
	margin-top: 0.5em;
	margin-bottom: 0.5em;
}

#content-wrapper .button-list a
{
	font-size: 2em;
	display: inline-block;
	border: 1px solid #8C8C8D;
	padding: 0.5em;
	border-radius: 0.2em;
	text-decoration: none;
}

#content-wrapper .button-list a:hover
{
	background: #B0B0B1;
}

#content-wrapper .projects-list
{
	text-align: center;
}

#content-wrapper .projects-list .preview-image
{
	max-width: 100%;
	height: auto;
	max-height: 8em;
}

#content-wrapper .projects-list p
{
	font-weight: 300;
	font-size: 1.2em;
	line-height: 1.2em;
}

#content-wrapper .projects-list a
{
	font-size: 1em;
	width: 50%;
	margin-top: 1em;
	margin-bottom: 1em;
}

#content-wrapper .field, #content-wrapper .field-half
{
	display: block;
	margin: auto;
	width: 100%;
}

#content-wrapper label, #content-wrapper input, #content-wrapper textarea
{
	display: inline-block;
}

#content-wrapper label
{
	width: 100%;
	margin-bottom: 0.2em;
	margin-top: 0.5em;
}

#content-wrapper form .errorlist
{
	color: #AA0000;
	list-style-type: none;
}

#content-wrapper input, #content-wrapper textarea
{
	width: 95%;
	border: 1px solid #8C8C8D;
	border-radius: 0.2em;
	padding: 0.5em;
	font-weight: 300;
	font-family: "Montserrat", sans-serif;
}

#content-wrapper textarea
{
	resize: none;
	height: 4em;
}

#content-wrapper input[type="submit"]
{
	margin-top: 1.5em;
	margin-bottom: 0.5em;
	width: auto;
}

#content-wrapper input[type="submit"]:hover
{
	background: #B0B0B1;
}

/* Responsive */

@media all and (orientation: landscape) and (max-width: 1024px)
{
	header #profile-picture
	{
		margin-top: 5em;
	}

	header nav li
	{
		display: inline;
		padding-left: 0.4em;
		padding-right: 0.4em;
		margin: 0;
	}

	header nav a:before
	{
		display: none;
	}

	header nav
	{
		position: absolute;
		bottom: 1em;
		width: 100%;
	}
}

@media all and (min-width: 850px)
{
	#content-wrapper .projects-list a
	{
		width: 40%;
		height: 18em;
		overflow: auto;
		min-width: 18em;
		max-width: 25em;
		margin-left: 1em;
		margin-right: 1em;
	}

	#content-wrapper .projects-list li
	{
		display: inline;
	}
}

@media all and (min-width: 1024px)
{
	.contact-links.large
	{
		width: 100%;
		display: block;
		margin-top: 4em;
		text-align: center;
		margin-bottom: 2em;
	}

	.contact-links.narrow
	{
		display: none;
	}

	.contact-links.large a
	{
		color: #A0A0A1;
		text-decoration: none;
	}

	.contact-links.large a:hover
	{
		color: #909091;
	}

	.large
	{
		display: initial;
	}

	.narrow
	{
		display: none;
	}

	header
	{
		position: fixed;
		width: 30%;
		text-align: left;
		overflow-x: hidden;
		overflow-y: auto;
	}

	header h1, header h2, header #profile-picture, header nav a, header blockquote
	{
		margin-left: 5%;
	}

	header nav li
	{
		font-size: 1.5em;
	}

	header #profile-picture
	{
		margin-top: 2em;
	}

	#content-wrapper
	{
		margin-left: 30%;
	}
	
	#content-wrapper section, #content-wrapper aside, #content-wrapper footer
	{
		padding: 3.5em;
		text-align: left;
	}
	
	#content-wrapper strong
	{
		/* font-weight: 300; */
	}

	#content-wrapper footer
	{
		text-align: center;
	}
	
	#content-wrapper h3
	{
		margin-bottom: 0.75em;
		font-size: 4em;
	}

	#content-wrapper h4
	{
		margin-bottom: 0.3em;
		margin-top: 0.4em;
		font-size: 2em;
	}

	#content-wrapper p
	{
		/* font-weight: 100; */
		font-size: 1.6em;
		margin-top: 0.8em;
		margin-bottom: 0.8em;
		line-height: 2.2em;
	}

	#content-wrapper blockquote
	{
		margin-bottom: 1em;
		font-size: 2em;
	}

	#content-wrapper blockquote:before
	{
		font-size: 3em;
	}

	#content-wrapper blockquote .quote-author
	{
		font-size: 0.8em;
		display: inline-block;
		width: 100%;
		text-align: right;
	}

	#content-wrapper form
	{
		width: 60%;
		margin: auto;
	}
}

@media all and (min-width: 1300px)
{
	header
	{
		width: 390px;
	}

	#content-wrapper
	{
		margin-left: 390px;
	}
}

/* Montserrat */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 100;
  src: local('Montserrat Thin'), local('Montserrat-Thin'), url('../fonts/montserrat/Montserrat-Thin.ttf') format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 300;
  src: local('Montserrat Light'), local('Montserrat-Light'), url('../fonts/montserrat/Montserrat-Light.ttf') format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  src: local('Montserrat Regular'), local('Montserrat-Regular'), url('../fonts/montserrat/Montserrat-Regular.ttf') format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  src: local('Montserrat Bold'), local('Montserrat-Bold'), url('../fonts/montserrat/Montserrat-Bold.ttf') format('truetype');
}
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 900;
  src: local('Montserrat Black'), local('Montserrat-Black'), url('../fonts/montserrat/Montserrat-Black.ttf') format('truetype');
}

/* IcoMoon */
@font-face
{
	font-family: 'IcoMoon';
	src: url('../fonts/icomoon/IcoMoon.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
} /* https://icomoon.io/#preview-free */