Styled note

src/templates/note.html

@@ -13,6 +13,11 @@
       align-items: center;
       flex-direction: column;
     }
+    @media screen and (max-width: 800px) {
+      html {
+        font-size: 0.9em;
+      } 
+    }
     body {
       max-width: 800px;
       color: #fbfbfe;
@@ -23,6 +28,24 @@
     }
     img {
       max-width: 100%;
+      border-radius: 8px;
+    }
+    p{
+      margin: 20px;
+      margin-bottom: 0px;
+    }
+    h1 {
+      margin: 20px;
+      margin-bottom: 0px;
+      text-transform: capitalize;
+    }
+    h1 + p:has(> i) {
+      font-size: smaller;
+      margin-top: 10px;
+    }
+    p:has(> img) + p:has(> i) {
+      font-size: smaller;
+      margin-top: 0px;
     }
   </style>
 </head>