Make teaser sections always 100% viewport size and content sections variable length

app/assets/stylesheets/welcome.scss

@@ -116,26 +116,29 @@ p {
 	border-bottom: 2px solid rgb(255,255,255);
 }
 
-#content {
-	position: absolute;
-	top: 0px;
-	left: 0px;
-	width: 100%;
-	height: 100%;
-}
 #section1 .content, #section3 .content, #section5 .content {
 	color: rgb(214,206,204);
 }
 #section2, #section4, #section6 {
 	background-color: rgb(255,255,255);
+	padding: 2em 0 2em 0;
 }
 #section1 {
-	background: image_url("me.jpg") fixed;
-	background-position: center top;
+	background: image_url("me.jpg") center top fixed;
 }
 #section3 {
-	background: image_url("waldschrat.jpg") fixed;
-	background-position: center top;
+	background: image_url("waldschrat.jpg") center top fixed;
+}
+#section1, #section3, #section5 {
+	height: 100vh; // make this responsive...
+}
+.content {
+	position: relative;
+	width: 90%;
+	top: 50%;
+	left: 50%;
+	transform: translate(-50%, 0);
+	z-index: 1;
 }
 
 #footer {
@@ -230,7 +233,6 @@ p {
 
 .section {
 	position: relative;
-	height: 100%;
 	overflow: hidden;
 }
 .section .watermark {
@@ -330,15 +332,6 @@ p {
 	position: relative;
 }
 
-.content {
-	position: relative;
-	width: 90%;
-	height: 90%;
-	top: 50%;
-	left: 50%;
-	transform: translate(-50%, -50%);
-	z-index: 1;
-}
 .textbox {
 	text-align: center;
 	border-style: solid;

app/views/layouts/application.html.erb

@@ -24,7 +24,6 @@
 			</div>
 		</header>
 
-		<div id="content">
 		<%= yield %>
 
 		<footer id="footer">
@@ -69,7 +68,6 @@
 				</a>
 			</div>
 		</footer>
-		</div>
 	</body>
 </html>
 <!-- vim: set ts=2 sw=2: -->