Update style.css

style.css

@@ -9,6 +9,7 @@ body {
 .navbar {
     background: linear-gradient(90deg, #1c2526, #2e3b3e) !important;
     box-shadow: 0 4px 12px rgba(0, 255, 204, 0.3);
+    padding: 15px 0;
 }
 
 .navbar-brand {
@@ -21,6 +22,7 @@ body {
 .nav-link {
     color: #00ffcc !important;
     font-weight: 600;
+    padding: 10px 15px;
     transition: color 0.3s, text-shadow 0.3s;
 }
 
@@ -40,6 +42,20 @@ body {
     text-shadow: 0 0 25px rgba(0, 255, 204, 0.7);
 }
 
+.preview-window {
+    max-width: 600px;
+    margin: 20px auto;
+    padding: 15px;
+    background: #1c2526;
+    border: 2px solid #00ffcc;
+    border-radius: 10px;
+    box-shadow: 0 0 20px rgba(0, 255, 204, 0.5);
+}
+
+.preview-window img {
+    border-radius: 8px;
+}
+
 .bg-dark {
     background: linear-gradient(180deg, #1c2526, #0a0a0a) !important;
 }
@@ -51,9 +67,11 @@ body {
 .bg-ghost-card {
     background: #2e3b3e !important;
     border: 2px solid #00ffcc;
+    border-radius: 10px;
     box-shadow: 0 0 25px rgba(0, 255, 204, 0.5);
     transition: transform 0.3s, box-shadow 0.3s;
     color: #ffffff !important;
+    padding: 20px;
     cursor: pointer;
 }
 
@@ -62,11 +80,28 @@ body {
     box-shadow: 0 0 40px rgba(0, 255, 204, 0.7);
 }
 
+.bg-ghost-light {
+    background: #e0e0e0 !important;
+    border: 2px solid #00ffcc;
+    border-radius: 10px;
+    box-shadow: 0 0 25px rgba(0, 255, 204, 0.5);
+    transition: transform 0.3s, box-shadow 0.3s;
+    color: #000000 !important;
+    padding: 20px;
+}
+
+.bg-ghost-light:hover {
+    transform: translateY(-10px);
+    box-shadow: 0 0 40px rgba(0, 255, 204, 0.7);
+}
+
 .btn-ghost {
     background: linear-gradient(45deg, #00ffcc, #00cc99);
     border: none;
     color: #000000;
     font-weight: 700;
+    border-radius: 8px;
+    padding: 12px 24px;
     transition: transform 0.3s, box-shadow 0.3s;
 }
 
@@ -79,6 +114,8 @@ body {
 .btn-outline-ghost {
     border-color: #00ffcc;
     color: #00ffcc;
+    border-radius: 8px;
+    padding: 12px 24px;
     transition: background 0.3s, color 0.3s;
 }
 
@@ -94,6 +131,7 @@ pre {
     color: #000000 !important;
     box-shadow: inset 0 0 15px rgba(0, 0, 0, 0.4);
     font-family: 'Courier New', monospace;
+    margin: 0;
 }
 
 .code-block {
@@ -116,7 +154,9 @@ pre {
 .nav-tabs .nav-link {
     color: #00ffcc;
     border: 1px solid #00ffcc;
-    margin-right: 5px;
+    border-radius: 8px;
+    margin-right: 10px;
+    padding: 10px 20px;
     transition: background 0.3s, color 0.3s;
 }
 
@@ -134,8 +174,10 @@ pre {
 .table-dark {
     background: #1c2526 !important;
     color: #ffffff !important;
+    border-radius: 10px;
 }
 
 .table-dark th, .table-dark td {
     border-color: #00ffcc;
+    padding: 15px;
 }