Tweak styles to make things work nicely with "page-looking things"

Signed-off-by: Danila Fedorin <danila.fedorin@gmail.com>

content/writing/pynchon/style.scss

@@ -1,30 +1,28 @@
 @import "variables.scss";
+@import "margin.scss";
 
 body {
   text-align: left;
   background-color: white;
   color: black;
-  font-family: "Times New Roman";
-  font-size: 12pt;
-  line-height: 14pt;
-}
 
-nav, h1, .warning {
+  /* reset to light mode */
-  display: none;
+  @each $varName, $varDefault in $css-vars {
+      --#{$varName}: #{$varDefault};
+  }
 }
 
 h1, h2, h3, h4, h5, h6 {
-  color: black;
   font-family: "Times New Roman"
 }
 
 h2 {
   font-size: 18pt;
+  margin-bottom: 0.2in;
 }
 
-h2 {
+.warning {
-  display: none;
+  max-width: $container-width;
-  margin-bottom: 0.2in;
 }
 
 .halfpage {
@@ -39,6 +37,14 @@ h2 {
   h2 {
     display: block;
   }
+
+  @media screen and (max-width: 5.5in) {
+    width: auto;
+    height: auto;
+    margin: 0;
+    border-left: none;
+    border-right: none;
+  }
 }
 
 p {
@@ -46,12 +52,38 @@ p {
   margin-bottom: 0.1in;
 }
 
+html .container {
+  max-width: 12in;
+  position: static;
+
+  &:not(main) {
+    @include below-two-margins {
+      padding: 0 $container-min-padding 0 $container-min-padding;
+    }
+  }
+}
+
 main.container {
+  font-family: "Times New Roman";
+  font-size: 12pt;
+  line-height: 14pt;
+
   display: flex;
-  max-width: none;
+  box-sizing: border-box;
-  left: 0;
   flex-wrap: wrap;
-  justify-content: flex-start;
+  justify-content: left;
+
+  & > h2 {
+    display: none; /* copied title is on the page */
+  }
+
+  @media screen and (max-width: 5.5in) {
+    display: block;
+  }
+
+  @media screen and (max-width: 12in) {
+    justify-content: center;
+  }
 }
 
 hr {