Split screen and print CSS completely, add print parent element.

passmate.css

@@ -31,18 +31,6 @@
 	margin: 0;
 }
 
-@media screen {
-	side {
-		display: none !important;
-	}
-}
-
-@media print {
-	overview {
-		display: none !important;
-	}
-}
-
 html {
 	height: 100%;
 }
@@ -54,6 +42,94 @@ body {
 	height: 100%;
 }
 
+overview,product {
+	display: none;
+}
+
+@media screen {
+	overview {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		margin: 1em;
+	}
+
+	h1 {
+		font-family: 'copernicus';
+		font-weight: 600;
+		align-self: center;
+	}
+
+	h2 {
+		font-family: 'proxima-nova';
+		font-weight: 600;
+		align-self: center;
+		margin-top: 1.2em;
+	}
+
+	blurb {
+		text-align: justify;
+		margin-bottom: 1em;
+		max-width: 40em;
+	}
+
+	owner {
+		display: block;
+		width: 11em;
+
+		border-bottom: black 1px dotted;
+
+		font-family: 'proxima-nova';
+		font-weight: 600;
+		font-size: 1.5em;
+
+		text-align: left;
+		align-self: center;
+
+		margin-top: 0;
+		margin-bottom: 1em;
+	}
+
+	recovery {
+		display: block;
+		width: 17em;
+
+		border-bottom: black 1px dotted;
+
+		font-family: 'inconsolata';
+		font-weight: 700;
+		font-size: 1.2em;
+
+		text-align: center;
+		align-self: center;
+
+		margin-top: 0;
+		margin-bottom: 1em;
+	}
+
+	ol {
+		box-sizing: border-box;
+		max-width: 40em;
+		margin: 0;
+		padding-inline-start: 1em;
+	}
+
+	ol > li {
+		margin-bottom: 1em;
+	}
+
+	.selected {
+		font-weight: 600;
+	}
+}
+
+@media print {
+	product {
+		display: block;
+		width: 100%;
+		height: 100%;
+	}
+
 	h1 {
 		font-family: 'copernicus';
 		font-weight: 600;
@@ -66,53 +142,6 @@ h2 {
 		align-self: center;
 	}
 
-/**********
- * Screen
- **********/
-overview {
-	display: flex;
-	flex-direction: column;
-	align-items: center;
-	margin: 1em;
-}
-
-overview h2 {
-	margin-top: 1.2em;
-}
-
-overview blurb {
-	max-width: 40em;
-}
-
-overview owner {
-	text-align: left;
-	margin-top: 0;
-}
-
-overview recovery {
-	margin-top: 0;
-	margin-bottom: 1em;
-	font-size: 1.2em;
-}
-
-overview ol {
-	box-sizing: border-box;
-	max-width: 40em;
-	margin: 0;
-	padding-inline-start: 1em;
-}
-
-overview ol > li {
-	margin-bottom: 1em;
-}
-
-overview .selected {
-	font-weight: 600;
-}
-
-/**********
- * Print
- **********/
 	side {
 		page-break-inside: avoid;
 
@@ -245,3 +274,4 @@ website,username {
 		border-bottom: black 1px dotted;
 		margin-bottom: 0.17em;
 	}
+}

passmate.js

@@ -23,14 +23,7 @@ class PassMate {
 
 		this.addOverview(container);
 
-		this.addPages(container, 26 * 2 + 4);
+		this.addProduct(container);
-		this.addFrontPage(this.pages[1]);
-		this.addInstructions1(this.pages[2]);
-		this.addInstructions2(this.pages[3]);
-		this.addPasswordPages(
-			this.pages.slice(4, 4 + (26 * this.PAGES_PER_LETTER)),
-			this.PAGES_PER_LETTER,
-			this.PASSWORDS_PER_PAGE);
 
 		this.recoveryIn.innerText = this.SAFE_ALPHANUM.charAt(this.VERSION) + this.generateMasterPassword().join('');
 		this.derivePasswords();
@@ -118,6 +111,18 @@ class PassMate {
 		});
 	}
 
+	addProduct(container) {
+		let product = this.addElement('product', container);
+		this.addPages(product, 26 * 2 + 4);
+		this.addFrontPage(this.pages[1]);
+		this.addInstructions1(this.pages[2]);
+		this.addInstructions2(this.pages[3]);
+		this.addPasswordPages(
+			this.pages.slice(4, 4 + (26 * this.PAGES_PER_LETTER)),
+			this.PAGES_PER_LETTER,
+			this.PASSWORDS_PER_PAGE);
+	}
+
 	addPages(container, numPages) {
 		let numSheets = numPages / 4;
 		for (let sheetNum = 0; sheetNum < numSheets; ++sheetNum) {