@media screen {
	@font-face {
		font-family: 'SymbolsNerdFont-Regular';
		src: url('../fonts/SymbolsNerdFont-Regular.ttf') format('truetype');
	}

	body, dialog {
		color: #fee3ba;
	}

	body>#interface {
		font-family: 'SymbolsNerdFont-Regular', Verdana, sans-serif;
		position: fixed;
		top: 0;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		width: 100%;
		height: 100vh;
	}

	#background2 {
		position: fixed;
		bottom: 0px;
		width: 100%;
		height: 150px;
		z-index: -1;
	}

	h1 {
		max-width: 1000px;
		margin: auto;
		padding-left: 20px;
	}

	a:link,
	a:visited {
		color: #fff1c6ad;
		text-decoration: none;
	}

	button {
		font: unset;
		background: transparent;
		border: 1px solid;
		border-radius: .5rem;
		color: unset;
	}

	nav {
		height: 100%;
		margin: 1rem;
	}

	nav ul {
		list-style-type: none;
		display: flex;
		gap: 0;
		padding: 0;
		margin: 0;
		text-align: center;
		justify-content: center;
		width: 100%;
		white-space: nowrap;
	}

	nav ul li {
		background: linear-gradient(0deg, rgba(0, 0, 0, 0.322), rgb(161 109 31 / 66%) 33%, rgba(19, 19, 19, 0.322));
		background-color: rgb(66, 21, 3);
		display: inline-block;
		cursor: pointer;
		padding: 1rem;
		border: 1px solid #2e1202;
		transition: all 0.5s ease, width 0.2s linear;
		overflow: hidden;
		font-size: 1.5rem;
	}

	nav ul li expand {
		display: inline-block;
		width: 0;
		overflow: hidden;
		transition: width 0.2s linear;
		font-size: 1rem;
		vertical-align: text-top;
	}

	nav ul li:hover expand {
		width: 120px;
	}

	nav ul li:first-child {
		border-radius: .5rem 0 0 .5rem;
	}

	nav ul li:last-child {
		border-radius: 0 .5rem .5rem 0;
	}

	nav ul li:hover {
		background-color: rgb(104, 78, 67);
	}

	body {}

	body div.content, dialog {
		max-width: 1000px;
		margin: .5rem auto;
		display: none;
		background: rgba(0, 0, 0, 0.75);
		padding: 1rem;
		border-radius: .5rem;
		box-shadow: 0 0 20px 0px #dfa43954;
		transition: transform .5s linear;
		grid-area: content;
	}	

	dialog {
		padding: 2em;
		max-width: 600px;
		text-align: center;
		position: fixed;
		bottom: 0;
	}

	body div.content.switch_out {
		transform: translateX(-100%) perspective(100rem) translateZ(-37rem) rotateY(90deg);
	}

	body div.content.switch_in {
		transform: translateX(100%) perspective(100rem) translateZ(-37rem) rotateY(-90deg);
	}

	body div.content.content_shown, dialog[open] {
		display: block;
	}

	#zeugnis img {
		height: auto;
		width: 30%;
	}

	#zeugnis .imgbig {
		position: absolute;
		left: 0;
	}

	.imgbig {
		height: auto !important;
		width: 100% !important;
	}

	#pic_1 {
		float: right;
		height: auto;
		width: 38%;
		margin: 16px 0 50px 50px;
	}

	#pic_2 {
		display: none;
	}

	ul li ul li {
		color: #fff1c6ad;
	}

	.next {
		text-align: right;
	}

	a {
		cursor: pointer;
		font-weight: bold;
	}

	.pinfo {
		margin-top: 16px;
	}

	.pinfo>ul>li h4 {
		display: inline-block;
		width: 180px;
		margin: 0;
	}

	form label {
		display: block;
	}

	.pinfo li.noscreen {
		display: none;
	}
}

@media screen and (orientation: portrait) {

	#lebenslauf>ul>li h4,
	#lebenslauf>ul>li>div,
	#zeugnis>ul>li h4 {
		display: block;
	}

	#zeugnis>ul>li {
		display: table-cell;
	}

	#lebenslauf>ul>li>p {
		display: block;
	}
}

@media screen and (orientation: landscape) {
	body {
		display: grid;
		grid-template: "header" auto
			"content" 1fr
			/ 1fr;
	}

	nav ul {}

	h1 {
		padding: 2em 1rem;
	}
}

@media print,
screen and (orientation: landscape) {

	#lebenslauf>ul>li h4,
	#lebenslauf>ul>li>div,
	#kontakt>ul>li h4,
	#kontakt>ul>li div,
	#zeugnis>ul>li {
		display: table-cell;
	}

	#zeugnis>ul {
		padding: 0;
	}

	#lebenslauf>ul>li>p,
	#kontakt>ul>li p {
		display: table-cell;
		width: 250px;
	}
}