Update README.md

README.md

@@ -130,12 +130,14 @@ Take off your helmet.<|im_end|>
 </div>
 
 <style>
+/* Base styles */
 body {
-    background-color: #0d1117 !important; /* GitHub dark theme color */
-    color: #c9d1d9 !important; /* Light text for readability */
+    background-color: #0d1117;
+    color: #c9d1d9;
     font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
 }
 
+/* Typography */
 h1, h2, h3 {
     background: linear-gradient(45deg, #6e00ff, #00ffff);
     -webkit-background-clip: text;
@@ -143,39 +145,23 @@ h1, h2, h3 {
     border-bottom: 1px solid #333;
     padding-bottom: 0.3em;
 }
-/* Add this at the very start of your CSS */
-
-/* Update section backgrounds to be slightly lighter than body for contrast */
-div[style*="border:2px solid #333"] {
-    background: #161b22 !important; /* Slightly lighter than body background */
-    border: 2px solid #6e00ff !important;
-    box-shadow: 0 0 15px rgba(110, 0, 255, 0.5);
-}
-
-/* For tables inside these sections */
-table {
-    background: rgba(0,0,0,0.2) !important;
-    color: #c9d1d9;
-}
-
-th, td {
-    border: 1px solid #333;
-}
 
+/* Code blocks */
 code {
-    background-color: #1a1a1a !important;
+    background-color: #1a1a1a;
     border-radius: 4px;
     padding: 0.2em 0.4em;
     color: #00ffff;
 }
 
 pre {
-    background-color: #1a1a1a !important;
+    background-color: #1a1a1a;
     border: 1px solid #333;
     border-radius: 8px;
     padding: 16px;
 }
 
+/* Tables */
 table {
     width: 100%;
     border-collapse: collapse;
@@ -203,6 +189,20 @@ td:nth-child(2) {
     width: 100%;
 }
 
+td > span {
+    display: block;
+    padding: 4px 8px;
+    background: rgba(110, 0, 255, 0.1);
+    border-radius: 4px;
+    transition: all 0.3s ease;
+}
+
+td > span:hover {
+    background: rgba(110, 0, 255, 0.2);
+    transform: translateY(-1px);
+}
+
+/* Links */
 a {
     color: #00ffff;
     text-decoration: none;
@@ -214,6 +214,7 @@ a:hover {
     text-decoration: none;
 }
 
+/* Dividers */
 hr {
     border: 0;
     height: 1px;
@@ -221,36 +222,32 @@ hr {
     margin: 40px 0;
 }
 
+/* Images */
 img {
     max-width: 100%;
     border-radius: 10px;
 }
 
+/* Details/Summary */
 details summary:hover {
     color: #00ffff;
+    cursor: pointer;
 }
 
+/* Layout */
 .markdown-body {
     max-width: 1200px;
     margin: 0 auto;
     padding: 20px;
 }
 
-/* Custom column styling */
-td > span {
-    display: block;
-    padding: 4px 8px;
-    background: rgba(110, 0, 255, 0.1);
-    border-radius: 4px;
-    transition: all 0.3s ease;
-}
-
-td > span:hover {
-    background: rgba(110, 0, 255, 0.2);
-    transform: translateY(-1px);
-}
+/* Custom sections */
 div[style*="border:2px solid #333"] {
-    box-shadow: 0 0 15px rgba(110, 0, 255, 0.5);
+    background: #161b22;
     border: 2px solid #6e00ff !important;
+    box-shadow: 0 0 15px rgba(110, 0, 255, 0.5);
+    border-radius: 10px;
+    padding: 20px;
+    margin: 20px 0;
 }
 </style>