html, body, input, textarea, button, select, ul, ol, li, h1, h2, h3, a, p, hr {
	background-color: transparent;
	border: 0;
	color: inherit;
	list-style: none;
	margin: 0;
	outline: none;
	padding: 0;
	text-decoration: none;
}

@font-face {
	font-family: 'Meta Pro Black';
	src: url('fonts/MetaPro-Black.eot');
	src: url('fonts/MetaPro-Black.eot?#iefix') format('embedded-opentype'),
						url('fonts/MetaPro-Black.woff2') format('woff2'),
						url('fonts/MetaPro-Black.woff') format('woff'),
						url('fonts/MetaPro-Black.ttf') format('truetype'),
						url('fonts/MetaPro-Black.svg#MetaPro-Black') format('svg');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Meta Pro Book';
	src: url('fonts/MetaPro-Book.eot');
	src: url('fonts/MetaPro-Book.eot?#iefix') format('embedded-opentype'),
						url('fonts/MetaPro-Book.woff2') format('woff2'),
						url('fonts/MetaPro-Book.woff') format('woff'),
						url('fonts/MetaPro-Book.ttf') format('truetype'),
						url('fonts/MetaPro-Book.svg#MetaPro-Book') format('svg');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

:root {
	--color-csp: #d61d7d;
	--font-size: calc(1.2rem + 0.7vw);
	--font-size-slogan: calc( var(--font-size) * 1.3);
	--font-size-name: calc( var(--font-size) * 2.3);
	--lh-factor: 1.4;
}

/*! reset */

* {	box-sizing: border-box; }

body {
	align-items: center;
	font-family: 'Meta Pro Book';
	display: flex;
	flex-direction: row;
	place-items: center;
	width: 100vw;
	height: 100vh;
}

.left,
.right {
	display: flex;
	flex-direction: column;
	padding: 40px 40px;
	gap: 40px;
	height: 100vh;
	width: 50vw;
}

.left {
	background-image: url(/src/img/portrait-martin-iten.webp);
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	justify-content: end;
	position: fixed;
}

.right {
	position: absolute;
	left: 50vw;
}

.right img {
	width: 200px;
}

.logo-csp {
	text-align: center;
}

/* - - -  P - - - */

p {
	font-size: var(--font-size);
	line-height: calc(var(--font-size) * var(--lh-factor));
}

.color-csp {
	color: var(--color-csp);
}

.slogan {
	color: white;
	font-size: var(--font-size-slogan);
	line-height: calc( var(--font-size-slogan) * var(--lh-factor));
	text-shadow: 1px 1px 5px black;
}

.name-wrapper {
	background-color: var(--color-csp);
	display: inline-flex;
	padding: 10px 20px;
	width: fit-content;
}

.name-inner {
	justify-content: center;
	display: flex;
	color: white;
	font-family: 'Meta Pro Black';
	font-size: var(--font-size-name);
	line-height: unset;
	margin-bottom: calc( var(--font-size-name) * -0.2 );
}

@media only screen and (max-width : 850px) {

	body {
		flex-direction: column;
	}

	.left {
		min-height: 100vh;
	}

	.left,
	.right {
		padding: 40px 20px;
		position: relative;
		left: auto;
		gap: 20px;
		width: 100vw;
	}

}

@media only screen and (max-width : 340px) {
	:root {
		--font-size: calc(1rem + 0.7vw);
	}
}