Updated views and api

public/css/main.css

@@ -7529,6 +7529,12 @@ video {
   z-index: auto;
 }
 
+@page {
+  size: 8.5in 14in;
+
+  margin: 0;
+}
+
 html, body {
   background-color: #e2e8f0;
   color: #285e61;
@@ -7668,16 +7674,26 @@ html, body {
   margin-left: auto;
   margin-right: auto;
   padding: 0.25rem;
-  max-width: 66ch;
+  color: #000;
+  width: 100%;
+  font-size: calc(.5rem + 1vmin);
+}
+
+.letter p {
+  line-height: 1.1;
 }
 
 .letter .letter__header {
   text-align: center;
+  margin-top: 1rem;
 }
 
-.letter p {
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
+.letter .letter__header img {
+  width: 100%;
+}
+
+.letter .letter__body-header {
+  text-align: center;
 }
 
 .letter ol {
@@ -7689,7 +7705,44 @@ html, body {
   width: 100%;
 }
 
+.letter table td {
+  vertical-align: top;
+  padding-right: 0.5rem;
+}
+
+.letter table .strong {
+  font-weight: 700;
+}
+
+.letter table .special {
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  font-size: 1.125rem;
+  font-style: italic;
+}
+
+.letter table.signature {
+  width: auto;
+  margin-left: auto;
+  margin-top: 1rem;
+}
+
+.letter table.signature .letter__sign {
+  width: 79%;
+  height: 4rem;
+  background-image: url("/img/letter-sign.jpg");
+  background-size: contain;
+}
+
 @media print {
+  html, body {
+    background-color: #fff;
+  }
+
+  body {
+    margin: 1cm;
+  }
+
   .container > .header, .container > .form, .print-button {
     display: none;
   }
@@ -7700,6 +7753,19 @@ html, body {
     margin: 0;
     padding: 0;
   }
+
+  .letter {
+    font-family: "Calibri", "Source Sans Pro", sans-serif;
+    font-size: 12px;
+  }
+
+  .letter .letter__body-header {
+    font-size: 14px;
+  }
+
+  .letter table.signature .letter__sign {
+    height: 3.5rem;
+  }
 }
 
 @media (min-width: 640px) {