Update returnToSlumber.css

returnToSlumber.css

@@ -1,56 +1,60 @@
 body {
-    background-color: #000; /* Dark background */
-    color: #fbff00; /* Light text color */
+    background-color: #000; /* Background color */
+    color: #fafafa; /* Text color */
     font-family: Arial, sans-serif;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    height: 100vh;
-    margin: 0;
-    text-align: center;
+    padding: 20px;
+    overflow: hidden; /* Prevent scrolling */
 }
 
 .container {
-    max-width: 800px; /* Limit the width of the content */
-    padding: 20px;
+    text-align: center; /* Center align text */
+    position: relative; /* Allow positioning of children */
+    z-index: 1; /* Ensure text is above stars */
 }
 
-h1 {
-    font-size: 48px;
-    margin: 20px 0;
-    color: #f70375; /* Subtle gray color */
-    animation: fadeIn 3s ease-out forwards; /* Normal fade-in for the text */
+.responsive-image {
+    max-width: 100%; /* Scale the image down to fit the container */
+    height: auto; /* Maintain aspect ratio */
+    margin: 20px 0; /* Add space above and below the image */
 }
 
 .description {
-    font-size: 24px;
-    margin: 20px 0;
-    opacity: 0.8; /* Slightly less opaque for a dreamy effect */
-}
-
-.responsive-image {
-    max-width: 100%;
-    height: auto;
-    display: block;
-    margin: 20px auto; /* Center the image with margin */
+    font-size: 18px; /* Font size for description */
+    margin: 10px 0; /* Margin for spacing */
 }
 
 .button {
-    display: inline-block;
-    padding: 10px 20px;
-    margin-top: 20px;
-    background-color: #333; /* Dark button */
-    color: #000000; /* White text */
-    text-decoration: none; /* No underline */
+    display: inline-block; /* Make it a block-level element */
+    background-color: #1a1a1a; /* Button background color */
+    color: #09f801; /* Button text color */
+    padding: 10px 20px; /* Button padding */
+    text-decoration: none; /* Remove underline */
     border-radius: 5px; /* Rounded corners */
-    transition: background-color 0.3s ease; /* Transition for hover effect */
+    margin-top: 20px; /* Margin for spacing */
+    transition: background-color 0.3s; /* Transition for hover effect */
 }
 
 .button:hover {
-    background-color: #555; /* Change color on hover */
+    background-color: #000000; /* Darker background on hover */
+}
+
+/* Twinkling stars effect */
+.twinkling-stars {
+    position: fixed; /* Position stars relative to viewport */
+    top: 0; 
+    left: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    pointer-events: none; /* Allow clicks to pass through */
+    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><circle cx="2" cy="2" r="1.5" fill="%2399ccff" opacity="0.8"/><circle cx="25" cy="30" r="1" fill="%2399ccff" opacity="0.5"/><circle cx="50" cy="15" r="1.2" fill="%2399ccff" opacity="0.6"/><circle cx="75" cy="40" r="1.3" fill="%2399ccff" opacity="0.4"/><circle cx="100" cy="25" r="1.1" fill="%2399ccff" opacity="0.7"/><circle cx="35" cy="70" r="1" fill="%2399ccff" opacity="0.3"/><circle cx="80" cy="85" r="1.4" fill="%2399ccff" opacity="0.6"/></svg>') repeat; /* Star pattern */
+    animation: twinkling 1.5s infinite alternate; /* Twinkling animation */
 }
 
-@keyframes fadeIn {
-    0% { opacity: 0; }
-    100% { opacity: 1; }
+@keyframes twinkling {
+    0% {
+        background-size: 5px 5px; /* Initial size of stars */
+    }
+    100% {
+        background-size: 10px 10px; /* Size increase for twinkling */
+    }
 }