@charset "UTF-8";

/*
 * Legal disclaimer for webfont licence
 *
 * Licence to use self-hosted webfonts for displaying dynamic text on specified website domains. Our package includes WOFF and WOFF2 font formats.
 *
 * Should the license page views limit be exceeded the license holder will be required to contact Lineto.com for an upgrade.
 * 
 * It is strictly prohibited to rename the font and to download or use these fonts in any other media. 
 * 
 * These Web fonts are licensed exclusively for the use on the following domain(s) and their subdomains:
 *
 * peyer-luzern.ch (monthly pageviews: <50K)
 *
 */


@font-face {
	font-family: "ModerneLLWeb-Regular";
	src: url("ModerneLLWeb-Regular.woff") format("woff");
}

@font-face {
	font-family: "ModerneLLWeb-Regular";
	src: url("ModerneLLWeb-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "ModerneLLWeb-Italic";
	src: url("ModerneLLWeb-Italic.woff") format("woff");
}

@font-face {
	font-family: "ModerneLLWeb-Italic";
	src: url("ModerneLLWeb-Italic.woff2") format("woff2");
}

/*
——————————————————————————————————————————
	reset       */

*,
*::before,
*::after {
	padding: 0;
	margin: 0;
	box-sizing: border-box;
	text-size-adjust: none;
}

/*
——————————————————————————————————————————
	scrolling       */

.scrolling {
	-webkit-overflow-scrolling: touch;
	/* enables momentum scrolling on ios */
	-ms-overflow-style: none;
	/* hides scrollbar in internet explorer 10+ */
	scrollbar-width: none;
	/* hides scrollbar in firefox */
}

.scrolling::-webkit-scrollbar {
	display: none;
	/* hides scrollbar in safari and chrome */
}

.scrolling::-webkit-scrollbar-thumb {
	display: none;
	/* hides scrollbar in safari on ios */
}

/*
——————————————————————————————————————————
*/

html,
h1 {
	font-family: "ModerneLLWeb-Regular", sans-serif;
	font-size: 1.2vw;
	line-height: 1.3;
	--blank-line: calc(1rem * 1.3);
	/* font-size × line-height */
	--color: rgb(35, 111, 225);
	color: var(--color);
}

h1 {
	font-family: "ModerneLLWeb-Italic", sans-serif;
	font-weight: normal;
	padding-left: 3rem;
}

p,
ul {
	padding-bottom: var(--blank-line);
}

.further-info {
	font-size: calc(1.2rem * 0.6);
	letter-spacing: 0.1rem;
	width: 60%;
}

.further-info li {
	padding-bottom: calc(var(--blank-line) * 0.25);
}

ul.further-info {
	list-style: none;
	padding-left: 3rem;
}

ul.further-info>li:before {
	display: inline-block;
	content: "→";
	width: 3rem;
	margin-left: -3rem;
}

ul.further-info>li:hover:before {
	padding-left: 1rem;
}

ul.further-info.back>li:before {
	content: "←";
}

/*
——————————————————————————————————————————
 */

a:link,
a:visited,
a:hover,
a:active,
a:focus {
	text-decoration: none;
	border-bottom: solid;
	border-bottom-width: 0.08rem;
	color: var(--color);
}

a:hover,
a:active,
a:focus {
	border-bottom: 0;
}

.further-info a:link,
.further-info a:visited,
.further-info a:hover,
.further-info a:active,
.further-info a:focus {
	border-bottom: 0;
}

/*
——————————————————————————————————————————
*/

body {
	overflow: hidden;
}

.container {
	display: grid;
	grid-template-columns: 5.5fr 0.5fr 1fr;
	grid-template-rows: 1fr;
	width: 61vw;
	margin: auto;
}

img {
	grid-column-start: 3;
	grid-row-start: 1;
	width: 100%;
	height: auto;
	margin-top: 4vw;
}

.content {
	height: 100vh;
	overflow: scroll;
	padding-top: 22vw;
	padding-right: 3vw;
}

.wrapper {
	padding-bottom: calc(2 * var(--blank-line));
}

.wrapper:last-child {
	padding-bottom: calc(10 * var(--blank-line));
}


/*
——————————————————————————————————————————
——————————————————————————————————————————
——————————————————————————————————————————
——————————————————————————————————————————
——————————————————————————————————————————
	narrow viewport       */

@media screen and (max-aspect-ratio: 1/1) {

	html,
	h1 {
		font-size: 4.25vw;
	}

	ul {
		list-style: none;
		padding-left: 1.5rem;
	}

	ul>li:before {
		display: inline-block;
		content: "—";
		width: 1.5rem;
		margin-left: -1.5rem;
	}

	.further-info {
		font-size: 3.2vw;
		width: 100%;
	}

	.further-info li {
		padding-bottom: calc(var(--blank-line) * 0.5);
	}

	body {
		overflow: scroll;
	}

	.container {
		grid-template-columns: 1fr;
		grid-template-rows: 2fr;
		width: 90vw;
	}

	.content {
		height: auto;
		padding-top: 33vw;
	}

	img {
		grid-column-start: 1;
		width: 33vw;
		margin-left: 50%;
		margin-top: 8vw;
	}

}