:root { --black: #000000; --logoBlue: #022F55; --red: #C0392B; --grey: #ECECEC; --darkGrey: #4F4F4F; --white: #FFFFFF; }

@font-face { font-family: "cairo-regular"; src: url(schriften/cairo/Cairo-Regular.ttf); }
@font-face { font-family: "cairo-semi-bold"; src: url(schriften/cairo/Cairo-SemiBold.ttf); }

@font-face { font-family: "roboto-regular"; src: url(schriften/roboto/Roboto-Regular.ttf); }

* { padding: 0; margin: 0; font-family: "roboto-regular"; line-height: 1.5; font-size: 1rem; }

header { background-color: var(--black); color: var(--white); }
header::after { content: ""; display: table; clear: both; }
header div.nav_container { width: 80%; max-width: 1200px; margin-left: auto; margin-right: auto; }
header div.nav_container img.icon { height: 50px; float: left; margin: 15px 0px 10px 0px; }
header div.nav_container nav { float: right; }
header div.nav_container nav ul { list-style: none; }
header div.nav_container nav ul li { display: inline-block; margin-left: 50px; padding: 25px 0px; position: relative; }
header div.nav_container nav ul li a { font-family: "cairo-semi-bold"; color: var(--white); text-decoration: none; }
header div.nav_container nav ul li a:hover { color: var(--grey); }
header div.nav_container nav ul li a::before { content: ""; display: block; height: 5px; width: 0%; border-radius: 2px; background-color: var(--white); position: absolute; top: 0px; transition: all ease-in-out 250ms; }
header div.nav_container nav ul li a:hover::before { width: 100%; }
header div.big_nav_container { width: 100%; position: absolute; top: 0px; left: 0px; height: 300px; background-color: var(--black); z-index: 2; }

body { background-color: var(--grey); }
.container { background-color: var(--white); width: 100%; }

div.content { margin-left: auto; margin-right: auto; width: 80%; max-width: 1200px; }
div.content h1 { font-family: "cairo-semi-bold"; font-size: 3.6rem; }
div.content h2 { font-family: "cairo-semi-bold"; font-size: 1.8rem; }
div.content h3 { font-family: "cairo-regular"; }
div.content section { padding-top: 50px; padding-bottom: 50px; display: block; }

div.content section.screenshot_section { min-height: 600px; }
div.content section.screenshot_section img.screenshot { width: 100%; max-width: 300px; float: left; margin: 0px 50px 50px 0px; filter: drop-shadow(0px 0px 20px rgba(0,0,0,0.4)); }

.titles_with_top_padding h3 { padding-top: 20px; }
.titles_with_top_padding h4 { padding-top: 10px; }

img.app_store_logo { height: 50px; margin-top: 20px; }

a { color: var(--logoBlue); }

footer { background-color: var(--grey); margin: 0px; padding: 50px; text-align: center; clear: both; color: var(--darkGrey); }
footer a { color: var(--darkGrey); }
footer img { width: 100px; }

@media screen and (max-width: 1000px) {
  div.content h1 { font-family: "cairo-semi-bold"; font-size: 2.0rem; display: block; }
  div.content h2 { font-family: "cairo-semi-bold"; font-size: 1.5rem; }
  div.content section.screenshot_section img.screenshot { display: block; float: none; transform: rotate(-2.5deg); }
}