refreshing design

nginx/vue/public/css/styles.css

@@ -12,7 +12,8 @@
     --secondary: #3c5b6f;
     --tertiary: #948979;
     --quaternary: #f5bb78;
-    --background: #dfd0b8;
+    --background: #c4bbb8;
+    --background_paper: #dfd0b8;
 }
 
 body {
@@ -27,20 +28,6 @@ body {
     background-color: var(--background);
 }
 
-main {
-    width: 148mm; /* A5 width */
-    height: 210mm; /* A5 height */
-    max-width: 100%; /* responsive on smaller screens */
-    margin: 20px auto; /* center horizontally with some spacing */
-    padding: 20px;
-    background: white; /* paper color */
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* subtle paper shadow */
-    overflow-y: auto; /* scroll vertically if content overflows */
-    border: 1px solid #ccc; /* optional border for realism */
-    box-sizing: border-box; /* include padding in size */
-    font-family: "Times New Roman", serif; /* optional paper-like font */
-}
-
 p {
     color: var(--secondary);
 }
@@ -56,3 +43,37 @@ h4 {
     width: 50mm;
     height: 50mm;
 }
+
+/* A5 Page */
+.a5page {
+    /* overflow: scroll; */
+    display: flex;
+    flex-direction: column;
+    font-family: var(--font-text);
+    height: 148mm;
+    width: 210mm;
+    padding: 5mm;
+    box-sizing: border-box;
+    background-color: var(--background_paper);
+    box-shadow: 0 20px 20px rgba(0, 0, 0, 0.2);
+    border: solid 2px var(--primary);
+}
+
+/* A4 Page */
+.a4page {
+    line-height: 1.6;
+    font-family: var(--font-text);
+    width: 210mm;
+    /* Standard A4 width */
+    height: 297mm;
+    /* Standard A4 height */
+    padding: 10mm;
+    box-sizing: border-box;
+    background-color: var(--background_paper);
+    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
+    border: 1px solid var(--primary);
+    overflow: auto;
+    /* Enables scrolling when content exceeds height */
+    margin: 0 auto;
+    /* Centers the page horizontally */
+}