/* Hi! So... You're looking at my stylesheet, that's cool.
 * While this isn't the prettiest CSS, it creates a nicely readable site.
 * Also FYI, I can afford to front-load the font faces since everything
 * else is tiny. :D
 *
 * Take care! /Fredrik
 */

@font-face {
  font-family: 'Crimson Text';
  font-weight: 400;
  font-style: normal;
  src: url('/static/fonts/Crimson-Text-regular/Crimson-Text-regular.eot');
  src: url('/static/fonts/Crimson-Text-regular/Crimson-Text-regular.eot?#iefix') format('embedded-opentype'),
	   local('Crimson Text'),
	   local('Crimson-Text-regular'),
	   url('/static/fonts/Crimson-Text-regular/Crimson-Text-regular.woff2') format('woff2'),
	   url('/static/fonts/Crimson-Text-regular/Crimson-Text-regular.woff') format('woff'),
	   url('/static/fonts/Crimson-Text-regular/Crimson-Text-regular.ttf') format('truetype'),
	   url('/static/fonts/Crimson-Text-regular/Crimson-Text-regular.svg#CrimsonText') format('svg');
}

@font-face {
  font-family: 'Crimson Text';
  font-weight: 400;
  font-style: italic;
  src: url('/static/fonts/Crimson-Text-italic/Crimson-Text-italic.eot');
  src: url('/static/fonts/Crimson-Text-italic/Crimson-Text-italic.eot?#iefix') format('embedded-opentype'),
	   local('Crimson Text Italic'),
	   local('Crimson-Text-italic'),
	   url('/static/fonts/Crimson-Text-italic/Crimson-Text-italic.woff2') format('woff2'),
	   url('/static/fonts/Crimson-Text-italic/Crimson-Text-italic.woff') format('woff'),
	   url('/static/fonts/Crimson-Text-italic/Crimson-Text-italic.ttf') format('truetype'),
	   url('/static/fonts/Crimson-Text-italic/Crimson-Text-italic.svg#CrimsonText') format('svg');
}

:root {
	--color-display-heavy: #000;
	--color-display-normal: #333;
	--color-display-lighter: #444;
	--color-display-light: #999;
	--color-bg: #fff;
	--color-decoration: #fc1951;
}

@media (prefers-color-scheme: dark) {
	:root {
		--color-display-heavy: #eee;
		--color-display-normal: #d8d8d8;
		--color-display-lighter: #bbb;
		--color-display-light: #a8a8a8;
		--color-bg: #161111;
	}
}

html{
	text-rendering: optimizeLegibility;
}
html, body{
	margin: 0;
	padding: 0;
}
body{
	color: var(--color-display-normal);
	background: var(--color-bg);
	font: normal 112.5% / 1.4 'Crimson Text', "Hoefler Text", Constantia, Palatino, Georgia, serif;
}
p{
	margin: 1em 0;
}

a{
	color: var(--color-display-heavy);
	text-decoration: none;
	border-bottom: 1px var(--color-display-light) solid;
	margin-bottom: -1px;
}
a:visited{
	color: var(--color-display-lighter);
}
a:hover, a:focus{
	border-bottom-width: 3px;
	margin-bottom: -3px;
}
a:active{
	color: var(--color-decoration);
}

.container{
	padding:0 0.75em;
}

.header{
	text-align: center;
	margin: 2em 0;
	line-height: 1;
}
	.header h1{
		margin-bottom: 0;
	}
	.header p{
		margin-top: 0;
		font-size: 0.9444444em;
		letter-spacing: 1px;
	}

.splash{
	font-size:1.4444444em;
	line-height:1.2;
	text-align: center;
}
.that{
	border-bottom: 2px var(--color-decoration) solid;
}
.main .that{
	border-bottom-width: 1px;
}

.lookatme{
	color: var(--color-display-heavy);
	font-style: italic;

	margin-bottom: 3em;
}
.lookatme p:last-child{
	text-align: center;
}
h1{
	font-size: 2em;
}
h2{
	margin-bottom: 0;
	font-size: 1.16666666em;
}
h2 .context{
	color:var(--color-display-light);
}
h2+*, h3+*{
	margin-top: 0;
}
h3{
	font-size: 1.0555555em;
	margin-bottom: 0;
	font-style: italic;
}


.complementary{
	margin-top: 4em;
	padding: 0.5em;
	border-top: 1px solid var(--color-decoration);
	font-size: 0.8em;

	background-color: #222;
	color: #ddd;
}
.complementary a{
	color: #fff;
}
.complementary i{
	color:#fff;
}

.blabla{ /* :) */
	font-size: 0.88888em;
}

.cv h2{
	margin-top: 1.3em;
}
.period{
	font-style: italic;
	float: right;
}

.merits p{
	margin: 0;
}
.merits p:first-child{
}

.merits, .merits ul{
	padding: 0;
	list-style-type: none;
}
.merits li{
	clear: right;
	margin-bottom: 0.66666666em;
}

.merits ul, .merits p:not(.f){
	font-size: 0.88888em;
}
.merits ul li:before{
	content: "- ";
}
.merits ul li{
	margin: 0;
}

.extended {
	margin: 0.8em 1.25em 1em 0.75em;
	padding-left: 0.5em;
	border-left: 1px solid var(--color-display-light);
}
.extended p:not(:first-child) {
	text-indent: 2.25em;
}

.flowing{
	padding-left: 20px;
	list-style-type: circle;
}
.flowing li{
	margin-bottom: 0.1111111em;
}
.flowing ul li{
	margin: 0.25em 0;
}

.vcard{
	text-align: center;
	font-size: 0.875em;
}
.vcard img{
	float: left;
	max-width: 40px;
	display: none;
}
.vcard .locality:after{
	content: ",";
}
.vcard div, .vcard .fn{
	display: inline;
	margin-right: 0.5em;
}

@media screen and (-webkit-min-device-pixel-ratio: 2) {
}

/* SMALL-ish */
@media screen and (max-width: 666px) {
	body{
	}
	.lookatme{
		text-align: justify;
	}
	.lookatme{
		margin-bottom: 1.5em;
	}
}

/* BIG-ish */
@media screen and (min-width: 667px){
	.container{
		max-width: 560px;
		margin: 0 auto;
	}
	.cv .container{
		max-width: 630px;
	}
	.splash span{
		display: block;
	}
	p+h2{
		margin-top: 1.5em;
	}
}

@media screen and (min-width: 840px){
	body{
	}
	.main h2 .context{
		display: inline-block;
		font-size: 0.71444em;
		width: 9em;
		margin-left: -9em;
	}
}

@media print {
	body{
		background: #fff;
		color: #000;
		font-size: 87.5%;
		font-weight: normal;
	}
	h1{
		font-size:1.5em;
	}
	.header{
		margin-bottom: 0.5em;
	}
	h1,h2,h3{
		font-weight: normal;
		page-break-after: avoid;
	}

	a, a:visited{
		color: #000;
		text-decoration: none;
		border-bottom-color:#ddd;
	}

	a[href^=http]:not(.noprint):after{
		font-size: 92.857%;
		content:" <" attr(href) "> ";
	}

	a[href*=".pdf?dl=1"]{
		display: none;
	}
	a.noprint{
		border-bottom: 0;
		margin-bottom: 0;
	}

	*:not(a).noprint {
		display:none;
	}

	.vcard a{
		border-bottom: none;
	}

	/* Hide stuff */
	.header p, .complementary, .cv .splash, .cv .projects{
		display: none;
	}

	@page{
		margin:2cm 3cm;
	}
}