Creating view [continue]

resources/sass/main.scss

@@ -3,16 +3,31 @@
 @tailwind utilities;
 
 html, body {
-    @apply bg-gray-300 text-teal-800;
+    @apply bg-gray-300 text-teal-800 tracking-wide leading-snug;
 	font-family: 'Source Sans Pro', sans-serif;
+    font-size: calc(.75rem + 1vmin);
 }
 
-h1 {
-    @apply text-5xl font-bold mb-8 mt-4;
+.header {
+    h1 {
+        @apply text-3xl font-bold mb-6 mt-4;
+    }
 }
 
 .container {
-    @apply bg-white w-3/4 mx-auto h-full mt-8 p-12;
+    @apply bg-white mx-auto h-full p-12;
+}
+
+@screen md {
+    .header {
+        h1 {
+            @apply text-5xl;
+        }
+    }
+
+    .container {
+        @apply w-3/4 mt-8;
+    }
 }
 
 .form {
@@ -55,6 +70,33 @@ h1 {
     }
 }
 
-.btn-primary {
-    @apply py-2 px-4 bg-indigo-400 text-white border border-white rounded;
+.letter {
+    @apply mx-auto p-1;
+    max-width: 66ch;
+
+    .letter__header {
+        @apply text-center;
+    }
+
+    p {
+        @apply my-2;
+    }
+
+    ol {
+        @apply list-decimal list-inside;
+    }
+
+    table {
+        @apply w-full;
+    }
+}
+
+@screen print {
+    .container > .header, .container > .form {
+        @apply hidden;
+    }
+
+    .container {
+        @apply w-full max-w-full m-0 p-0;
+    }
 }