diff --git a/single.html b/single.html
index fbcef1c..fc13bf9 100644
--- a/single.html
+++ b/single.html
@@ -4,7 +4,9 @@
     </head>
     <body> 
     <style>
-    * { box-sizing:border-box; font-family:sans; } 
+    
+    * { box-sizing:border-box; font-family:sans; 
+    } 
     .style { 
         display:block ; 
         position:absolute;
@@ -21,6 +23,8 @@
         }
 
     .styleCss {
+        font-size: 1vh;
+        overflow: auto;
         background-color:rgb(255,255,200);
         position:relative;
         top:5%;
@@ -37,10 +41,11 @@
     }
 
     html{
-        height:100%;
+        height:var(--document-height);
     }
     body{ 
         min-height:100%;
+        max-height:100%;
     }
     .style:focus-within {
         transform: translate(0,0) scale(1);
@@ -59,7 +64,9 @@
         
     }
     .style:focus-within  + .body {
-        transform: scale(0.5) translate(50%,0%);
+        transform: scale(0.5) translate(50%,-50%);
+        height:200%;
+        max-height:100%;
         color:blue;
     }
     html { width: 100%;  margin:0; padding:0;background-color:rgb(150,150,150); } 
@@ -92,6 +99,7 @@
       .sheet { margin:0; }
     }
     @page { margin: 0 }
+
     .body{
         height:100%;
         border:3px solid red;
@@ -111,9 +119,14 @@
 /* becuase stupid browsers  https://stackoverflow.com/a/44738574 need to set -again- */
 @page { size: var(--page-width,210mm) var(--page-height,297mm) }
 .sheet { 
+    padding: 2cm;
+    font-family: Arial;
+    font-size: 13pt;
+    color:black;
     background-color:white;
     }   </style>
     </div>
+    
     <div class="body"> 
         <div class="center"> 
             <div class="sheet" contenteditable="true">sheet</div>
diff --git a/word.html b/word.html
index 04a1eec..a57fcd7 100644
--- a/word.html
+++ b/word.html
@@ -81,42 +81,25 @@
 </style>
     </head>
     <body>
-        <iframe class='nsheet' src='data:text/html;charset=utf-8, 
-            <!DOCTYPE html>
-            <html>
-                <head>
-                </head>
-                <body>
-                <style>
-                body{background-color:blue;
-                </style>
-                </body>
-            </html>
-      '></iframe>
         
         <iframe class='sheet' src='data:text/html;charset=utf-8, 
             <!DOCTYPE html>
             <html>
                 <head>
                 </head>
-                <body style="display:flex;justify-content:space-between">
+                <body> 
                 <style>
 * { box-sizing:border-box; font-family:sans; } 
 .style { 
     display:block ; 
     background-color:rgb(255,255,200);
-    flex: 1 1 fit-content;
-    
+    position:absolute;
     top:0;
     left:0;
     overflow-y: auto;
     overflow-x: hidden;
-    width:20%;
-    max-width:100px;
-    min-width:100px;
-/*    transform: scale(0.2) translate(-200%,0);
-    transition: transform .2s ease;*/
-    transition: max-width .2s ease;
+    transform: scale(0.2) translate(-200%,0);
+    transition: transform .2s ease;
     z-index:1;
     height:fit-content;
     max-height:90%;
@@ -135,8 +118,7 @@
 }
 
 .style:focus-within {
-/*    transform: translate(0,0) scale(1);*/
-    max-width:50%;
+    transform: translate(0,0) scale(1);
     color:blue;
 }
 .style:focus-within + .sheet {
