Update README.md

README.md

@@ -733,6 +733,208 @@ strong {
     font-weight: 700;
     color: #333;
   }
+
+  @import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@300;400;700&family=Space+Grotesk:wght@400;700&display=swap');
+
+body {
+  font-family: 'Roboto Mono', monospace;
+  background: linear-gradient(180deg, #0d1a2b, #1a2b3d, #0d1a2b);
+  color: #a3b1c6;
+  line-height: 1.7;
+  margin: 0;
+  padding: 40px 20px;
+  background-attachment: fixed;
+  background-size: cover;
+  min-height: 100vh;
+}
+
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  background: linear-gradient(145deg, rgba(40, 50, 70, 0.95), rgba(30, 40, 60, 0.9), rgba(20, 30, 50, 0.85));
+  padding: 60px;
+  border-radius: 35px;
+  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.8), inset 0 0 25px rgba(255, 255, 255, 0.1);
+  position: relative;
+  overflow: hidden;
+  border: 2px solid rgba(150, 200, 255, 0.2);
+}
+
+.container::before {
+  content: '';
+  position: absolute;
+  top: -60%;
+  left: -60%;
+  width: 220%;
+  height: 220%;
+  background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent);
+  animation: cosmic-pulse 14s infinite;
+  pointer-events: none;
+}
+
+@keyframes cosmic-pulse {
+  0% { transform: scale(0.8) rotate(0deg); opacity: 0.4; }
+  50% { transform: scale(1.1) rotate(180deg); opacity: 0.6; }
+  100% { transform: scale(0.8) rotate(360deg); opacity: 0.4; }
+}
+
+h1, h2, h3, h4 {
+  font-family: 'Space Grotesk', sans-serif;
+  text-transform: uppercase;
+  color: #7fffd4;
+  text-shadow: 5px 5px 15px rgba(0, 0, 0, 0.9), 0 0 20px rgba(255, 255, 255, 0.6);
+  font-weight: 700;
+  letter-spacing: 1.5px;
+  margin-bottom: 25px;
+}
+
+h1 { font-size: 2.8em; text-align: center; margin-bottom: 40px; color: #ffffff; }
+h2 { font-size: 2.0em; border-bottom: 2px solid rgba(127, 255, 212, 0.3); padding-bottom: 10px; margin-top: 30px; }
+h3 { font-size: 1.6em; margin-top: 25px; color: #b0e0e6; }
+h4 { font-size: 1.3em; margin-top: 20px; color: #add8e6; }
+
+.section {
+  margin-bottom: 60px;
+  padding: 30px;
+  background: rgba(30, 45, 60, 0.9);
+  border-radius: 18px;
+  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4), inset 0 0 10px rgba(100, 150, 200, 0.1);
+  border: 1px solid rgba(90, 110, 140, 0.2);
+  transition: all 0.4s ease-in-out;
+  position: relative;
+  z-index: 1;
+}
+
+.section:hover {
+  transform: translateY(-7px);
+  box-shadow: 0 12px 25px rgba(0, 0, 0, 0.6), inset 0 0 15px rgba(120, 170, 220, 0.15);
+}
+
+.detail {
+  padding: 25px;
+  margin-bottom: 25px;
+  border: 1px solid rgba(120, 160, 220, 0.3);
+  border-left: 4px solid #7fffd4;
+  border-radius: 20px;
+  background: linear-gradient(145deg, rgba(40, 55, 70, 0.8), rgba(100, 140, 200, 0.2));
+  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5), inset 0 0 15px rgba(255, 255, 255, 0.2);
+  transition: all 0.4s ease;
+}
+
+.detail:hover {
+  background: linear-gradient(145deg, rgba(50, 65, 80, 0.9), rgba(140, 180, 240, 0.25));
+  transform: translateY(-7px);
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.7), inset 0 0 20px rgba(255, 255, 255, 0.25);
+  border-left-color: #a2f4ff;
+}
+
+.detail-icon {
+  font-size: 1.8em;
+  color: #63d2ff;
+  margin-right: 20px;
+  transition: color 0.3s ease, transform 0.3s ease;
+}
+
+.detail:hover .detail-icon {
+  color: #a2f4ff;
+  transform: scale(1.2);
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+}
+
+ul li {
+  margin: 20px 0;
+  padding: 20px;
+  background: linear-gradient(145deg, rgba(50, 60, 75, 0.7), rgba(60, 100, 140, 0.25));
+  border-radius: 15px;
+  box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.3), 0 8px 25px rgba(0, 0, 0, 0.6);
+  transition: all 0.4s ease;
+  border-left: 3px solid #add8e6;
+}
+
+ul li:hover {
+  background: linear-gradient(145deg, rgba(60, 70, 85, 0.8), rgba(80, 120, 160, 0.3));
+  transform: translateX(10px);
+  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.2);
+  border-left-color: #b0e0e6;
+}
+
+a {
+  color: #63d2ff;
+  text-decoration: none;
+  font-weight: bold;
+  transition: color 0.3s ease, text-shadow 0.3s ease;
+}
+
+a:hover {
+  color: #e0ffff;
+  text-shadow: 0 0 12px rgba(255, 255, 255, 0.9), 0 0 18px rgba(100, 200, 255, 0.6);
+}
+
+code {
+  font-family: 'Roboto Mono', monospace;
+  background-color: rgba(0, 0, 0, 0.3);
+  padding: 3px 6px;
+  border-radius: 4px;
+  color: #7fffd4;
+}
+
+pre {
+  background-color: rgba(0, 0, 0, 0.3);
+  padding: 15px;
+  border-radius: 8px;
+  overflow-x: auto;
+  border: 1px solid rgba(100, 130, 170, 0.2);
+}
+
+pre code {
+  background-color: transparent;
+  padding: 0;
+  color: #e0ffff;
+}
+
+@media screen and (max-width: 768px) {
+  .container {
+    padding: 30px 20px;
+  }
+  
+  .section {
+    padding: 20px 15px;
+  }
+  
+  h1 {
+    font-size: 2.2em;
+  }
+  
+  h2 {
+    font-size: 1.8em;
+  }
+}
+
+@media screen and (max-width: 480px) {
+  body {
+    padding: 20px 10px;
+  }
+  
+  .container {
+    padding: 20px 15px;
+  }
+  
+  .detail {
+    padding: 15px 10px;
+  }
+  
+  h1 {
+    font-size: 1.8em;
+  }
+  
+  ul li {
+    padding: 15px 10px;
+  }
+}
 </style>
 <body>
 <div class="section">