body {
	width: 100vw;
	height: 100vh;
	background-color: var(--creme);
}

main {
	min-height: calc(100% - 40px - 56px - 50px); /* viewheight - paddingTop - footerheight - footermarginTop */
	padding-right: 250px;
	padding-left: 10px;
    padding-top: 40px;
	z-index: 1;
}


/*----- Header ---------------------------*/
header {
	position: fixed;
	top: 40px;
	right: 20px;
	font-size: var(--normal);
	text-align: right;
	font-family: "YetsonMono", serif;
	z-index: 100;
}

header ul, #logo, nav li a {
	font-family: inherit;
	color: inherit;
}

header img {
	padding-top: 11px;
	padding-bottom: 2px;
	width: 150px;
}

#logo {
	font-size: var(--medium);
	text-decoration: none;
	display: block;
}


/* Navigation */
#menu {
	margin: 0 30px 20px 20px;
	cursor: pointer;
	float: right;
}
#menu-text {
	margin: 0 1px 3px 1px;
	transition: 0.4s ease-in;
}

nav ul {
	display: flex;
	flex-direction: column;
	align-items: end;
}

nav li:has(a:hover) {
  list-style: disc;
}

nav li {
	padding-top: 4px;
	padding-bottom: 5px;
}

header div:has(> .photo-credit) {
  position: relative;
}

header .photo-credit {
	font-size: calc(var(--small) - 2px);
	position: absolute;
	right: -85px;
	bottom: -5px;
	color: rgb(128, 128, 128);
	transform-origin: 0 0;
    transform: rotate(-90deg);
}

/*----- Footer ---------------------------*/

footer {
	margin-top: 50px;
	padding: 10px;
	border-top: solid var(--black) 2px;
	z-index: 100;
	position: relative;
}

footer nav {
	position: relative;
	z-index: 100;
}

footer nav ul {
	flex-direction: row;
	justify-content: end;
}

footer ul li {
	display: inline;
	margin: 0 10px;
}

footer a {
	text-decoration: none;
	color:var(--brown);
	font-weight: normal;
}

.default {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

/*--- Desktop ---*/
@media only screen and (min-width: 500px) {
	.mobile {
		display: none;
	}
}


/*--- Tablet ---*/
@media only screen and (max-width: 900px) {
	main {
		padding-top: 10px;
	}
	header {
		top: 10px;
	}
	header img {
		width: 100px;
	}
}


/*--- Mobile ---*/
@media only screen and (max-width: 500px) {
	.mobile {
		display: initial;
	}
	.tablet {
		display: none;
	}
	.desktop {
		display: none;
	}
	p, table, th, td, .filmList {
		min-width: initial !important;
	}
	main {
		padding-right: 20px;
		padding-top: 80px;
	}
	header {
		right: initial;
		left: 10px;
		width: calc(100% - 10px - 10px);
		box-sizing: border-box;
		text-align: left;
		display: flex;
		justify-content: space-between;
		align-items: flex-start;
		flex-wrap: wrap;
	}
	header nav {
		max-width: fit-content;
	}

	header #logo, header a {
		box-shadow: 1px 1px 1px 1px rgba(0, 0, 0, 0.1);
		padding: 5px;
		background-color: var(--yellowHeader);
	}
	header #logo {
		margin-bottom: 5px;
		display: inline;
	}
	header nav ul {
		align-items: start;
		max-width: fit-content;
	}
	header nav li {
		max-width: fit-content;
	}
	header nav a {
		text-decoration: none;
	}
	footer ul li {
		margin: 0 0;
	}
}


@media only screen and (max-width: 350px) { 
	main {
		padding-top: 150px;
	}
}