Redesign important notice card and improve styles

Refactored the important notice about closing the laptop lid into a dedicated card with improved structure and accessibility in index.html. Updated styles.css to add new classes for the notice card, enhance responsiveness, and provide better dark mode and accessibility support. Adjusted script.js to apply dynamic styles to the new notice card and its title in restart mode. Minor update to README.md to simplify acknowledgments.

Author: npc137

README.md

@@ -92,7 +92,7 @@ This project is open source and available under the [MIT License](LICENSE).
 
 ## Acknowledgments (Standing on the Shoulders of Giants)
 
-- Inspired by [nohello.net](https://nohello.net/) by [@notjosh](https://github.com/notjosh) (the OG of polite internet education)
+- Inspired by [nohello.net](https://nohello.net/)
 - Built for all the computers that desperately need a digital nap
 - Vibe coded with ❤️ and several strategic restarts during development
 - Special thanks to all the overworked computers that inspired this project

index.html

@@ -45,18 +45,24 @@ <h2 class="lead">
                     existence without restarts! Even machines need their beauty sleep, and frankly, your laptop is starting to look a bit
                     rough around the edges 💻😴
                 </h2>
-                <!-- Important notice about closing laptop lids -->
+            </header>
+            
+            <!-- Important notice card - separate from header with its own breathing room -->
+            <section class="container notice-section" aria-labelledby="lid-notice-heading">
+              <div class="important-notice-card">
                 <div class="important-notice">
                   <div class="notice-icon">⚠️</div>
                   <div class="notice-content">
-                    <strong>Important:</strong> Closing your laptop lid is NOT the same as restarting!
-                    Your computer is just taking a nap, not getting the fresh start it desperately needs.
-                    Sleep mode keeps everything running in the background - think of it as your computer pretending to sleep while
-                    secretly binge-watching Netflix.
-                    </div>
+                            <h3 id="lid-notice-heading" class="notice-title">Hold up there, lid-closer!</h3>
+                            <p><strong>Important:</strong> Closing your laptop lid is NOT the same as restarting!</p>
+                            <p>Your computer is just taking a nap, not getting the fresh start it desperately needs.
+                              Sleep mode keeps everything running in the background - think of it as your computer pretending to sleep while
+                            secretly binge-watching Netflix.</p>
+                            </div>
                     </div>
-            </header>
-            </div>
+                </div>
+                </section>
+                </div>
 
         <main id="main-content">
           <section class="container nonos" aria-labelledby="problems-heading">

script.js

@@ -97,6 +97,18 @@ function activateRestartMode() {
     if (notice) {
         notice.style.cssText = 'background: #000 !important; border: 2px solid #00ff00 !important; color: #00ff00 !important; box-shadow: 0 0 20px #00ff00 !important;';
     }
+    
+    // Style the notice card container
+    const noticeCard = document.getElementsByClassName('important-notice-card')[0];
+    if (noticeCard) {
+        noticeCard.style.cssText = 'background: #000 !important; box-shadow: 0 0 30px #00ff00 !important;';
+    }
+    
+    // Style the notice title
+    const noticeTitle = document.getElementsByClassName('notice-title')[0];
+    if (noticeTitle) {
+        noticeTitle.style.cssText = 'color: #00ff00 !important;';
+    }
 }
 
 // Add keydown event listener for the easter egg