diff --git a/generator.html b/generator.html
index c655aa2..acf0622 100644
--- a/generator.html
+++ b/generator.html
@@ -17,6 +17,15 @@
         font-family: Poppins;
       }
 
+      #container {
+        box-sizing: border-box;
+        display: flex;
+        flex-flow: column;
+        width: calc(var(--scale) * var(--width));
+        height: calc(var(--scale) * var(--height));
+        position: relative;
+      }
+
       #container.overflow {
         display: grid !important;
         --ratio: calc(var(--width-int) / var(--height-int));
@@ -40,20 +49,31 @@
         grid-row: 1;
       }
 
+      #text_target {
+        margin: 0;
+        margin-top: calc(var(--scale) * var(--padding));
+        margin-bottom: calc(var(--scale) * var(--padding));
+      }
+
       #container.overflow #image_box {
         grid-column: 1/4;
         grid-row: 2;
       }
 
       #text_box {
-        background-color: var(--yellow);
-        color: #fff;
-        display: grid;
-        grid-template-columns: 1fr min-content;
+        background-color: black;
+        color: white;
+        border-top: var(--padding) solid var(--yellow);
+        border-bottom: var(--padding) solid var(--yellow);
       }
 
-      #text_target {
-        background-color: #000;
+      #logo {
+        float: right;
+        border-left: var(--padding) solid var(--yellow);
+        border-right: var(--padding) solid var(--yellow);
+        height: calc(var(--scale) * 4 * var(--padding));
+        width: auto;
+        margin: calc(var(--scale) * var(--padding)) 0;
       }
 
       .overlay {
@@ -64,11 +84,8 @@
         display: none;
       }
 
-      .guides .overlay {
-        display: block;
-      }
-
       .overlay--margin {
+        display: none;
         background-image: repeating-linear-gradient(
           45deg,
           #ccc,
@@ -78,6 +95,11 @@
         );
       }
 
+      .guides .overflow .overlay--margin,
+      .guides .overlay--thumbnail {
+        display: block;
+      }
+
       .overlay--margin-right {
         grid-area: margin-right;
       }
@@ -90,6 +112,12 @@
         grid-area: thumbnail;
         color: blue;
       }
+
+      .guides #container:not(.overflow) .overlay--thumbnail {
+        position: absolute;
+        height: 100%;
+        width: 100%;
+      }
     </style>
   </head>
   <body
@@ -129,40 +157,23 @@ Treść komunikatu</textarea
       >
         Pokaż prowadnice
       </label>
+      <pre id="stats"></pre>
     </section>
     <section>
       <h2>Twitter</h2>
-      <div
-        id="container"
-        style="
-          box-sizing: border-box;
-          display: flex;
-          flex-flow: column;
-          width: calc(var(--scale) * var(--width));
-          height: calc(var(--scale) * var(--height));
-        "
-      >
+      <div id="container" style="">
         <div id="text_box">
+          <img src="./logo.png" id="logo" />
           <p
             id="text_target"
             style="
               font-size: calc(var(--scale) * 16px);
-              padding: var(--padding);
+              padding: 0 calc(var(--padding) * var(--scale));
+              line-height: calc(var(--padding) * var(--scale));
             "
           >
             Treść komunikatu
           </p>
-          <img
-            src="./logo.png"
-            width="80"
-            height="80"
-            style="
-              height: calc(var(--scale) * 80px);
-              width: calc(var(--scale) * 80px);
-              padding-left: var(--padding);
-              justify-self: flex-end;
-            "
-          />
         </div>
         <div
           id="image_box"
@@ -242,6 +253,7 @@ Treść komunikatu</textarea
 
     function refreshText() {
       text_target.innerHTML = text.value.replace(/\n/, "<br/>");
+      restats();
     }
     const refreshImage = async () => {
       image.style.backgroundImage = `url("${await toBase64(file.files[0])}")`;
@@ -260,6 +272,7 @@ Treść komunikatu</textarea
       body.style.setProperty("--height-int", height);
       body.style.setProperty("--overflow-width", overflow_width + "px");
       body.style.setProperty("--overflow-height", overflow_height + "px");
+      restats();
     };
 
     function rescale() {
@@ -267,6 +280,7 @@ Treść komunikatu</textarea
         .querySelector("body")
         .style.setProperty("--scale", scale_picker.value);
       resize();
+      restats();
     }
 
     function reoverflow() {
@@ -276,6 +290,7 @@ Treść komunikatu</textarea
       } else {
         container.classList.remove("overflow");
       }
+      restats();
     }
 
     function reguides() {
@@ -285,6 +300,29 @@ Treść komunikatu</textarea
       } else {
         body.classList.remove("guides");
       }
+      restats();
+    }
+
+    function restats() {
+      const containerRect = container.getBoundingClientRect();
+      const thumbnailRect = document
+        .querySelector(".overlay--thumbnail")
+        .getBoundingClientRect();
+      const should_overflow = overflow.checked;
+      const overflowWidth = body.style.getPropertyValue("--overflow-width");
+      const overflowHeight = body.style.getPropertyValue("--overflow-height");
+      const basicWidth = body.style.getPropertyValue("--width-int");
+      const basicHeight = body.style.getPropertyValue("--height-int");
+
+      stats.textContent = `szerokość całej grafiki: ${containerRect.width}
+    wysokość całej grafiki: ${containerRect.height}
+    propocje szer/wys całej grafiki:  ${
+      containerRect.width / containerRect.height
+    }
+    zamierzone proporcje miniaturki (szer/wys): ${basicWidth / basicHeight}
+    proporcje obszaru thumbnaila (szer/wys): ${
+      thumbnailRect.width / thumbnailRect.height
+    }`;
     }
 
     refreshText();
@@ -293,6 +331,7 @@ Treść komunikatu</textarea
     rescale();
     reoverflow();
     reguides();
+    restats();
 
     text.oninput = refreshText;
     file.onchange = refreshImage;
