Add margin for devices with small vertical size

diff --git a/index.html b/index.html
index a8ba10e8e68a58b34f908694e23eb107f6811eb0..fdcc68db531eeff6da3166d2302dcbe7ff914eb4 100644 (file)
--- a/index.html
+++ b/index.html
@@ -10,7 +10,7 @@
 </head>
 
 <body>
-  <div>
+  <div class="wrapper">
     <header>
       <h1>sleepy-operators</h1>
 

diff --git a/style.css b/style.css
index a6ecc32190a1663a40a21492721c3d4146fef142..901acc974c1449d8f7a06a2e4fd872113dba8079 100644 (file)
--- a/style.css
+++ b/style.css
@@ -2,7 +2,7 @@ body {
   font-family: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
   background: radial-gradient(circle at min(300px, 50% - 8px) 50%, hsl(222deg 50% 20%) 300px, hsl(240deg 50% 5%));
   color: hsl(222deg 50% 80%);
-  block-size: 100dvh;
+  min-block-size: 100dvh;
   inline-size: min(720px, 100% - 16px);
   margin-block: 0;
   margin-inline: 8px auto;
@@ -10,6 +10,10 @@ body {
   place-items: center;
 }
 
+.wrapper {
+  margin-block: 8px;
+}
+
 header {
   display: flex;
   align-items: center;