body {
	/* Set the lightgray background color */
	background-color: #d1d1d1;
	/* Set the base font to black */
	color: #000;
	/* Set the base font size to 16px */
	font-size: 16px;
	/* Set the base font family to Courier New */
	font-family: "Courier New", Courier, monospace;
	/* Set the base line height to 1.2 */
	line-height: 1.2;
}

header {
	z-index: 99;
	background-color: #fff;
	/* Set padding to 24px */
	padding: 24px;
	/* Drop shadow */
	box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
	/* Header fixieren */
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
}

p {
	margin-bottom: 16px;
}

p:last-child {
	margin-bottom: 0;
}

.header-wrapper {
	/* Set header wrappers max-width to 1440px */
	max-width: 1440px;
	/* Center wrapper on screen */
	margin: 0 auto;
	display: flex;
	/* Center elements vertically */
	align-items: center;
	/* Space elements evenly */
	justify-content: space-between;
}

/* Bring logo items in a row */
.logo {
	display: flex;
	/* Set the space between the elements to 24px */
	gap: 24px;
}

/* Headings */
h1 {
	/* Set h1 font size to 32px */
	font-size: 32px;
	/* Set h1 font weight to bold */
	font-weight: bold;
	/* Upper case the text */
	text-transform: uppercase;
}

.page {
	display: block;
	position: sticky;
	background-color: #fff;
	/* Set width and height to A4 ratio in pixels */
	width: 794px;
	height: 1123px;
	/* Center page on screen */
	margin: 0 auto;
	/* Add bottom margin */
	margin-bottom: 100px;
	/* Drop shadow */
	box-shadow: 2px 2px 4px rgba(31, 31, 31, 0.5);
}

/* Set first child of pages margin-top to 120px */
.pages:first-child {
	margin-top: 120px;
}

.pages {
	margin-bottom: -60px;
}

/* Bring nav items in a row */
nav ul {
	display: flex;
	/* Set the space between the elements to 24px */
	gap: 24px;
}

/* Style the links in the nav ul */
nav ul li a {
	/* Set the font weight to bold */
	font-weight: bold;
	/* Set the text decoration to none */
	text-decoration: none;
	/* Set the color to black */
	color: #000;
	/* Uppercase the text */
	text-transform: uppercase;
}

/* Bring a "|" between the elements */
li:not(:last-child)::after {
	content: "|";
	margin-left: 24px;
	font-weight: bold;
}

/* Footer */
footer {
	font-size: 14px;
	/* Center footer-wrapper on screen */
	margin: 0 auto;
	margin-bottom: 24px;
	/* Set footer-nav max-width to 1440px */
	max-width: 1440px;
}

footer p {
	font-size: 16px;
	text-align: center;
	margin-bottom: 12px;
}

footer nav {
	display: flex;
	justify-content: center;
}

footer nav ul li a {
	/* Set the text decoration to none */
	text-decoration: none;
	/* Set the color to black */
	color: #000;
	/* Uppercase the text */
	text-transform: uppercase;
	font-weight: normal;
}

.page {
	transition: transform 0.3s ease-in-out;
}

/* IMAGE STYLES */
/* Set image sizes */
/* Set max-height of img inside header to 24px */
.logo img,
.social-icons img {
	max-height: 24px;
}

.logo p {
	font-weight: bold;
	text-transform: uppercase;
	align-self: center;
}

/* Use paper.png from img/ as background image for .page */
.page {
	background-image: url("../img/paper.png");
	background-repeat: repeat;
	background-size: 30%; /* Hier kann man die Körnung des Papiers einstellen */
}

.buffer {
	height: 550px;
	color: #00000000;
	background-image: none;
	background-color: #00000000;
	box-shadow: none;
}

/* Set the div="page space-page" height to 100px */
.space-page {
	height: 1px;
	color: #00000000;
	background-image: none;
	background-color: #00000000;
	box-shadow: none;
	margin-bottom: 0;
}

/* ************************************  */
/* 			STANDARD MOVIE PAGE STYLES 			 */
/* ************************************  */

/* Set movie-page-container paddings */
.movie-page-container {
	padding-top: 48px;
	padding-bottom: 48px;
	padding-left: 143px;
	padding-right: 79px;
}

/* Set page-number to align right */
.page-number {
	text-align: right;
}

/* Give year-published a position 84px from left */
.year-published {
	position: absolute;
	left: 84px;
}

/* Set movie-title uppercase and bold */
.movie-title {
	text-transform: uppercase;
	font-weight: bold;
	margin-bottom: 8px;
}

/* Set movie-description... */
.movie-description {
	margin-bottom: 27px;
}

/* Set credtits... */
.credits {
	padding-left: 92px;
	padding-right: 183px;
	margin-bottom: 27px;
}

/* Set position... */
.position {
	text-transform: uppercase;
	font-weight: bold;
	margin-bottom: 8px;
	margin-left: 63px;
}

/* Set name... */
.position-name {
	margin-bottom: 21px;
}

/* Set cut-to... */
.cut-to {
	text-align: right;
	text-transform: uppercase;
	font-weight: bold;
}

/* Set the images on the pages */
.movie-image {
	margin-top: 48px;
	max-width: 300px;
}

/* Align .movie-image centered */
.movie-image {
	margin-left: auto;
	margin-right: auto;
	display: block;
}

.ballouz-season-3 {
	max-width: 400px;
	position: absolute;
	left: 250px;
	bottom: 120px;
}

.schloss-einstein {
	max-width: 200px;
	position: absolute;
	right: 30px;
	top: 260px;
}

.ballouz-season-2 {
	max-width: 250px;
	position: absolute;
	left: 25px;
	top: 215px;
}

.du-sie-er-und-wir {
	max-width: 400px;
	margin-top: 80px;
}

.netflix {
	max-width: 125px;
	position: absolute;
	right: 100px;
	top: 260px;
}

.funnyface {
	max-width: 250px;
	position: absolute;
	left: 200px;
	bottom: 200px;
}

.der-maler {
	max-width: 500px;
	position: absolute;
	bottom: 80px;
}

.er-war-wieder-da {
	max-width: 280px;
	position: absolute;
	left: 200px;
	bottom: 80px;
}

.rotkaeppchen {
	max-width: 200px;
	position: absolute;
	right: 50px;
	top: 240px;
}

/* Cover page adjustments */
.cover-page-container {
	padding-top: 48px;
	padding-bottom: 48px;
	padding-left: 60px;
	padding-right: 60px;
}

.author-name {
	font-weight: bold;
	margin-bottom: 100px;
	text-align: center;
	text-transform: uppercase;
	text-decoration: underline;
}

.author-position {
	text-align: center;
	margin-bottom: 100px;
}

.florian-von-bornstaedt {
	display: block;
	max-width: 500px;
	margin: 0 auto;
	margin-bottom: 100px;
}

.agency-heading {
	font-weight: bold;
	margin-bottom: 8px;
}

.agency-block {
	position: absolute;
	left: 60px;
	bottom: 60px;
}

.biography-page-container {
	padding-top: 48px;
	padding-bottom: 48px;
	padding-left: 80px;
	padding-right: 80px;
}

.biography-heading {
	font-weight: bold;
	margin-bottom: 48px;
	text-align: center;
	text-transform: uppercase;
	text-decoration: underline;
}

.florian-von-bornstaedt-variant {
	max-width: 250px;
	position: absolute;
	right: 24px;
	bottom: 0;
}