add: horizontal scroll on mobile

index.html

@@ -14,7 +14,6 @@
             <p>Wiedźmy to w dawnych wierzeniach istoty półdemoniczne - istoty pośrednie między demonami a ludźmi, pozostające w ścisłym związku z ludźmi lub ich duszami. Oprócz relacji z diabłami i potworami, które dawały wiedźmą magiczne zdolności - potrafiły one rzucać uroki, zaklęcia, przepowiadać przyszłość, a nawet rozmawiać ze zmarłymi. Potocznie mówimy tak na kobiety niemiłe i/lub brzydkie. Według dawnych wierzeń ludowych wiedźma to kobieta podlegająca wpływom diabła, mająca moc rzucania uroków.</p>
             <h2>Dzień wiedźmy obchodzimy 16 listopada. <span id="difference"></span></h2>
         </div>
-        <img src="wiedzma.png" alt="Wiedźma" id="witch">
         <div class="info-block">
             <h1>Ciekawostki o wiedźmach</h1>
             <ol>
@@ -30,6 +29,7 @@
                 <li>Ostatnią spaloną na stosie „czarownicą” w Europie była Barbara Zdunk.</li>
             </ol>
         </div>
+        <img src="wiedzma.png" alt="Wiedźma" id="witch">
     </div>
     <footer>Nie próbuj klikać prawego przycisku myszy! 😈</footer>
 </body>

style.css

@@ -48,14 +48,14 @@ body h1:first-child {
     flex-direction: row;
     justify-content: center;
     align-items: center;
+    width: 100%;
+    height: 100%;
 }
 
 .info-block {
     background-color: var(--info-block-bg);
     border-radius: var(--info-block-border);
-    border-bottom-right-radius: 0;
-    border-top-right-radius: 0;
-    max-height: 40vw;
+    height: 50%;
     overflow: auto;
     padding: 20px;
     margin: 10px;
@@ -108,3 +108,24 @@ footer {
 ::-webkit-scrollbar-corner {
     background: transparent;
 }
+
+@media screen and (max-width: 978px) {
+    #container {
+        flex-direction: column;
+        overflow-y: hidden;
+        flex-wrap: wrap;
+    }
+
+    .info-block {
+        max-height: 50%;
+    }
+
+    footer {
+        display: none;
+    }
+
+    body {
+        overflow-y: hidden;
+        overflow-x: auto;
+    }
+}