/* Custom additions on top of the "Eventually" template (HTML5 UP). Kept separate from main.css so the original template output stays untouched. */ /* The template centers body content vertically (justify-content: center) for its original single-screen "coming soon" design. With real content now taller than one screen, that centers the *overflow* symmetrically, which some browsers (Chrome, and mobile browsers) render by making the top portion of the page unreachable by scrolling. Start content at the top instead, like a normal page. */ body { justify-content: flex-start; } /* The animated background slideshow's active slide gets z-index:2 (see the template's own _bg.scss) -- the same level as real page content -- and since it's appended to by main.js after everything else, it wins stacking ties and can sit in front of content for click/scroll purposes, even though it's a decorative, semi-transparent backdrop. It also animates side-to-side, so which areas were affected varied over time. A purely decorative background should never intercept input. */ #bg { pointer-events: none; } #main { max-width: 640px; margin: 0 auto; } #main section.special { margin: 0 0 3em 0; } #main section.special:last-child { margin-bottom: 0; } .screenshots { margin: 2em 0 0 0; } .screenshots img { display: block; width: 100%; border-radius: 6px; margin: 0 0 1.5em 0; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); } .screenshots img:last-child { margin-bottom: 0; } #header .back-link { font-size: 0.9em; margin-top: 0.5em; } #policy h2 { margin-top: 1.5em; } #policy h3 { margin-top: 1.25em; } #contact a { color: #80B51B; } #contact a:hover { color: #80B51B !important; } /* Override the template's absolute-positioned footer (designed for a single-screen "coming soon" page) so it flows normally after the page content instead. On a longer content page, the absolute positioning anchors to the viewport height rather than the true document bottom, causing it to overlap content above it. */ #footer { position: relative; bottom: auto; left: auto; max-width: 640px; margin: 3em auto 0 auto; text-align: center; } #footer .copyright { text-align: center; } #footer .copyright li { margin-bottom: 0.5em; }