Make CSS styles more ereader-friendly

Using tricks from https://friendsofepub.github.io/eBookTricks/
although they don't seem to really work; at least the small caps
aren't becoming small caps :/

seance.js

@@ -840,13 +840,14 @@ class Seance {
       img {
          width: 100%;
          height: auto;
+         object-fit: contain;
       }
 
       h1 {
         font-family: "Abhaya Libre Extrabold";
         text-transform: lowercase;
         text-align: center;
-        font-size: 3.6em;
+        font-size: 2em;
         line-height: 1em;
         margin-bottom: 0;
       }
@@ -857,7 +858,21 @@ class Seance {
         text-align: center;
         font-size: 1.2em;
         line-height: 1em;
-        margin-bottom: 2.4em;
+        margin-bottom: 1.2em;
+      }
+
+      @supports not (font-variant-caps: small-caps) {
+        h1 + h2 {
+          font-variant: normal;
+          font-feature-settings: "smcp", "onum", "pnum";
+        }
+      }
+
+      @supports (font-variant-caps: small-caps) {
+        h1 + h2 {
+          font-variant: normal;
+          font-variant-caps: small-caps;
+        }
       }
 
       p {
@@ -876,6 +891,14 @@ class Seance {
         background-position: 50%;
         margin-top: 1.5em;
         margin-bottom: 1.5em;
+        page-break-inside: avoid;
+        break-inside: avoid;
+      }
+
+      @supports not ((page-break-inside: avoid) and (break-inside: avoid)) {
+        hr {
+          -webkit-column-break-inside: avoid;
+        }
       }
     `)