/* Schriftarten importieren */
@font-face {
  font-family: "Oswald";
  src: url("/fonts/Oswald-Medium.ttf") format("ttf");
}
@font-face {
  font-family: "Nunito";
  src: url("/fonts/Nunito-SemiBold.ttf") format("ttf");
}

/* Styling */
html, body { margin: 0; width: 100%; height: 100%; }
body { position: relative; overflow: hidden; margin: 0; border: 0; }

h1 { font-family: 'Oswald', Arial, sans-serif; text-transform: uppercase; font-size: 50px; color: #FFF; line-height: 40px; padding: 0 0 20px; margin: 0 0 20px; border-bottom: 1px solid #FFF; }
h1 span { font-size: 40px; }
h2, h3, h4, ul, li { font-family: 'Oswald', Arial, sans-serif; color: #FFF; margin: 0; }
ul { margin-bottom: 15px; }
p { font-family: 'Nunito', Arial, sans-serif; font-size: 18px; margin: 0 0 15px; color: #FFF; }
a { font-family: 'Nunito', Arial, sans-serif; font-size: 18px; color: #FFF; text-decoration: none; transition: all 0.3s ease; }

#Content { overflow-x: hidden; overflow-y: scroll; background-image: url(img/20221014-coffee-beans.jpg); background-size: cover; background-position: center; width: 100%; max-width: 840px; height: calc(100vh - 80px); padding: 80px 20px 0 60px; box-shadow: 4px 4px 8px #000; float: left; position: relative; z-index: 5; }
#Content.main { max-width: 520px; padding: 80px 60px 0; }
#Content .contact a:hover { padding-left: 5px; }

#Content .info { height: calc(100vh - 160px); overflow-y: scroll; padding-right: 40px; }

#Image { width: calc(100% - 920px); height: 100vh; background-image: url(img/20221014-background.jpg); background-position: center; float: left; }
#Image.main { width: calc(100% - 640px); height: 100vh; }

.welcome { margin-bottom: 80px; }

.footer-links { position: relative; width: 100%; padding: 20px 60px 20px 0; z-index: 10; }
.footer-links a { display: inline-block; margin: 0 10px; }
.footer-links a:hover { font-size: 20px; }
.footer-links a:first-child { margin-left: 0; }
.footer-links a.back:before { content: ""; display: inline-block; width: 14px; height: 14px; background-image: url(img/20221014-arrow.png); background-size: contain; background-repeat: no-repeat; margin-right: 8px; }


@media all and (min-height: 650px) {
	#Content { overflow-y: hidden; }
	.footer-links { position: fixed; bottom: 0; left: 0; padding-left: 60px; }
}

@media all and (max-width: 920px) {
	h1, h1 span { font-size: 32px; }
	#Content { text-align: center; }
	#Content:not(.main) { float: none; width: 92%; padding-left: 4%; padding-right: 4%; }
	#Content:not(.main) .footer-links { padding: 20px 4%; }
}

@media all and (max-width: 640px) {
	#Content.main { float: none; width: 92%; max-width: none; padding-left: 4%; padding-right: 4%; }
	#Content.main .footer-links { padding: 20px 4%; }
}