returnToSlumber.css

body {
    background-color: #000; /* Background color */
    color: #09e438; /* Text color */
    font-family: Arial, sans-serif;
    padding: 20px;
    margin: 0;
    height: 100%; /* Make sure the body takes full height */
    overflow-y: auto; /* Allow vertical scrolling */
}

.container {
    text-align: center;
    position: relative; /* Allow positioning of children */
    z-index: 1; /* Ensure text is above stars */
    padding: 20px; /* Add some padding around content */
}

.responsive-image {
    max-width: 48%; /* 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: 18px; /* Font size for description */
    margin: 10px 0; /* Margin for spacing */
}

.button {
    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 */
    margin-top: 20px; /* Margin for spacing */
    transition: background-color 0.3s; /* Transition for hover effect */
}

.button:hover {
    background-color: #000000; /* Darker background on hover */
}

/* Twinkling stars effect */
.twinkling-stars {
    position: fixed; /* Fixed position for background effect */
    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 twinkling {
    0% {
        background-size: 5px 5px; /* Initial size of stars */
    }
    100% {
        background-size: 10px 10px; /* Size increase for twinkling */
    }
}