content adjustments

1 files changed, 68 insertions, 14 deletions

diff --git a/static/style.css b/static/style.css
index 6b252c3..fb3fb3a 100644
--- a/static/style.css
+++ b/static/style.css
@@ -1,26 +1,42 @@
 body {
   background: #ffffff;
-  margin: 3rem;
+  margin: 4rem;
   font-family: sans-serif, monospace, serif;
+  line-height: 1.4;
+}
+
+nav {
+  margin-bottom: 0.5rem;
+}
+
+ol {
+  padding-left: 0;
+  margin-top: 0;
 }
 
 .container {
   display: flex;
   flex-wrap: wrap;
-  gap: 3rem;
+  gap: 4rem;
+}
+
+.button-wrapper {
+  display: block;
+  margin-top: 0.5rem;
+  margin-bottom: 1.5rem;
 }
 
 .button {
+  border: 0.1875rem solid;
+  box-shadow: 1px 1px 0 0, 2px 2px 0 0, 3px 3px 0 0, 4px 4px 0 0;
+  color: #000000;
   display: inline-block;
   font-size: 1rem;
-  text-decoration: none;
-  text-transform: uppercase;
   font-weight: bold;
-  color: #000000;
-  border: 0.1875rem solid;
   padding: 0.75rem 2.5rem;
-  box-shadow: 1px 1px 0 0, 2px 2px 0 0, 3px 3px 0 0, 4px 4px 0 0;
   position: relative;
+  text-decoration: none;
+  text-transform: uppercase;
   transition: box-shadow 0.2s, top 0.2s, left: 0.2s;
 }
 
@@ -31,22 +47,39 @@ body {
 }
 
 .logo {
-  width: 294px;
-  height: 259px;
+  width: 227px;
+  height: 200px;
 }
 
-h1 {
+h1,
+h2 {
   font-weight: 900;
   font-style: italic;
-  font-size: 1.75rem;
-  margin-bottom: 0.75rem;
+  margin-bottom: 0.5rem;
+  line-height: 1.1;
 }
 
-.article {
+h1 {
+  font-size: 2rem;
+}
+
+h2 {
+  font-size: 1.375rem;
+}
+
+.content {
   max-width: 30rem;
   font-size: 1.25rem;
 }
 
+.article + .article {
+  margin-top: 2rem;
+}
+
+p {
+  margin-top: 0;
+}
+
 .form-row {
   display: block;
   margin: 0.5rem 0;
@@ -108,7 +141,28 @@ h1 {
 
 @media screen and (max-width: 50rem) {
   body {
-    margin: 2rem 1rem 1rem;
+    margin: 2rem;
+  }
+
+  ol {
+    counter: ol-counter;
+  }
+
+  ol li {
+    counter-increment: ol-counter;
+  }
+
+  ol li::before {
+    display: block;
+    content: counter(ol-counter) ".";
+  }
+
+  ol li::marker {
+    content: '';
+  }
+
+  .content {
+    max-width: 100%;
   }
 
   .container {