fix structure in css

style.css

@@ -43,23 +43,7 @@
         object-fit: contain;
     }
 
-    @page {
-        size: A5;
-        margin: 10mm 15mm;
-        bleed: 6mm;
-        marks: crop cross;
-    }
-    @page:left {
-        margin-left: 8mm;
-        margin-right: 15mm;
-    }
-    @page:right {
-        margin-left: 15mm;
-        margin-right: 8mm;
-    }  
-    @page:first{
-        margin: 8mm 8mm 8mm 8mm;
-    }
+    
     /*comment - uncomment below to see the double page on the web interface*/
     .pagedjs_pages {
         display: flex;
@@ -138,7 +122,48 @@
 }
 
 
+@media print{
+    @page {
+        size: A5;
+        margin: 10mm 15mm;
+        bleed: 6mm;
+        marks: crop cross;
+    }
+    @page:left {
+        margin-left: 8mm;
+        margin-right: 15mm;
+    }
+    @page:right {
+        margin-left: 15mm;
+        margin-right: 8mm;
+    }  
+    @page:first{
+        margin: 8mm 8mm 8mm 8mm;
+    }
+    .frontispiece{
+        text-align: center;
+    }
+    .frontispiece h4{
+        position: absolute;
+        bottom: 0;
+        left: 50%;
+        transform: translate(-50%, 0);
+    }
+
+    .index{
+        break-before: recto;
+        text-align: center;
+    }
+
+    .chapter{
+        break-before: page;
+    }
 
+    .chapter img{
+        width: 100%;
+        object-fit: contain;
+    }
+}
 
 
 /* Marks (to delete when merge in paged.js) */