Create style.css

style.css

@@ -1,28 +1,52 @@
-body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+/* Basic Reset & Body Style */
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+body {
+    background-color: #000011; /* Dark space blue */
+    color: #f0f0f0;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    overflow-x: hidden; /* Prevent horizontal scrollbar */
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+/* Three.js Canvas */
+#bg {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: -1; /* Place canvas behind all other content */
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+/* Content Centering */
+.content-wrapper {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 100vh;
+    padding: 2rem;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
+/* Iframe Container Styling */
+.iframe-container {
+    width: 90%;
+    max-width: 1200px;
+    background: rgba(0, 20, 30, 0.6); /* Semi-transparent background */
+    border: 1.5px solid #00ffff;
+    border-radius: 10px;
+    padding: 10px;
+    box-shadow:
+        0 0 10px rgba(0, 255, 255, 0.5),
+        0 0 25px rgba(0, 255, 255, 0.4),
+        0 0 50px rgba(0, 255, 255, 0.3),
+        inset 0 0 10px rgba(0, 255, 255, 0.3); /* Glowing effect */
+    backdrop-filter: blur(3px); /* Frosted glass effect */
+    -webkit-backdrop-filter: blur(3px);
 }
+
+iframe {
+    display: block;
+    border-radius: 5px; /* Match container's rounded corners */
+}