better css for mobile

source/pages/bookkeeping.html

@@ -52,22 +52,17 @@
             </p>
             </div>
         <br>
-        <div style=" display: flex;">
-          <p class="exp-body">
-            
-            records i have logged as "events" that is the real dated action of the company, this could be a purchase of inventory or sale of finished product.
-            The underlying "entry" contain the credit or debit value posted into a "account" that is referenced to a book section like liquidity/cash or deprestion of assset and the liabilities the compnay may have.
-            
-            <br>
-            All this infomation is inserted into sqlite tables. The database is very cheap regarding storage.
-            <br>But the attachments to events i have compressed as these mostly pdf are significantly more expensive.
-            
-
-
+       <div class="exp-flex">
+  <p class="exp-body">I love my custom Linux setup. I use Hyprland, which automatically arranges app windows
+    on my screen so everything stays organized without dragging things around. I also use Quickshell, which
+    lets me customize menus, shortcuts, and system controls to work exactly how I want.
+    My system is based on Arch Linux or Manjaro Linux, which are versions of Linux that give you more
+    control and customization than a typical computer setup. The result is a clean, fast, and super
+    efficient desktop that's hard to go back from.
+    <a class="outlink" href="https://git.samantha42.xyz/samantha/dotfiles">Git repo</a>
   </p>
-          <img style="width: 25rem; padding: 10px;" src="/static/images/sql.png">
+  <img src="/static/images/sql.png" style="height: 400px; align-self: center;">
 </div>
-        
       </section>
 
 <section id="product">
@@ -86,7 +81,7 @@
             </div>
         
         <br>
-        <div style=" display: flex;">
+        <div class="exp-flex">
           <img style="width: 25rem; padding: 10px;" src="/static/images/image.png">
           <p class="exp-body">
              This is first look at the testing of the web ui of the bookkeeping software.

source/pages/interests.html

@@ -93,7 +93,8 @@
             <div class="section-head">
               <h2>Lunix rice</h2>
             </div>
-            <div style="display: flex; align-items: center; gap: 1rem;">
+                    <div class="exp-flex">
+
               <p class="exp-body">I love my custom Linux setup. I use Hyprland, which automatically arranges app windows
                 on my screen so everything stays organized without dragging things around. I also use Quickshell, which
                 lets me customize menus, shortcuts, and system controls to work exactly how I want.
@@ -102,13 +103,13 @@
                 efficient desktop that’s hard to go back from.
                 <a class="outlink" href="https://git.samantha42.xyz/samantha/dotfiles">Git repo</a>
               </p>
-              <img src="/static/images/rice.png" style="height: 200px; align-self: center;">
+              <img src="/static/images/rice.png" style="width: 400px; align-self: center;">
             </div>
             <div class="section-head">
               <h2>programing</h2>
             </div>
-            <div style="display: flex; align-items: center; gap: 1rem;">
-              <img src="/static/images/program.png" style="height: 350px;" alt="program">
+                    <div class="exp-flex">
+                        <img src="/static/images/program.png" style="height: 500px;" alt="program">
               <div>
               <p class="exp-body">
                 Programming can be a task, but for me it's a source of joy. This is something I do as a hobby, and I

static/input.css

@@ -205,6 +205,7 @@ h1 span{color:var(--accent);}
   background:var(--surface);border:1px solid var(--border);
   border-radius:6px;padding:1.4rem 1.5rem;
   transition:border-color 0.2s,box-shadow 0.2s;
+  max-width: 95%;
 }
 .exp-card:hover{border-color:var(--border2);box-shadow:0 2px 12px rgba(0,0,0,0.06);}
 
@@ -217,6 +218,17 @@ h1 span{color:var(--accent);}
   border-color:var(--accent);
 }
 
+.exp-flex {
+  display: block;
+  gap: 1rem;
+}
+
+@media (min-width: 800px) {
+  .exp-flex {
+    display: flex;
+    align-items: center;
+  }
+}
 
 .exp-title{
     font-family: "IBM Plex Serif", serif;
@@ -370,6 +382,7 @@ footer{
   justify-content: center;
   gap: 1.5rem;
   padding: 1rem 0;
+  max-width: 90%;
 }
 
 .poster-item {