diff --git a/index.html b/index.html
index 5cb5367..7f299e5 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,7 @@
             height: 100%;
             overflow: hidden;
             background: #87CEEB; /* Sky blue background */
+            transition: background 1s;
         }
 
         .background {
@@ -30,6 +31,7 @@
             width: 200px;
             height: 60px;
             animation: moveClouds 20s linear infinite;
+            z-index: 2;
         }
 
         .cloud::before, .cloud::after {
@@ -64,6 +66,7 @@
             top: 10%;
             left: 10%;
             z-index: 1;
+            transition: background 1s;
         }
 
         .rain {
@@ -110,7 +113,7 @@
             color: #000; /* Black text color */
             font-family: Arial, sans-serif;
             padding: 20px;
-            transition: color 0.5s;
+            transition: color 1s;
         }
 
         h1 {
@@ -121,41 +124,6 @@
         p {
             font-size: 1.5em;
         }
-
-        .login-container {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            background: rgba(255, 255, 255, 0.8);
-            padding: 20px;
-            border-radius: 10px;
-            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-        }
-
-        .login-container input {
-            display: block;
-            width: 100%;
-            margin: 10px 0;
-            padding: 10px;
-            border: 1px solid #ccc;
-            border-radius: 5px;
-        }
-
-        .login-container button {
-            display: block;
-            width: 100%;
-            padding: 10px;
-            background: #007BFF;
-            color: #fff;
-            border: none;
-            border-radius: 5px;
-            cursor: pointer;
-        }
-
-        .login-container button:hover {
-            background: #0056b3;
-        }
     </style>
 </head>
 <body>
@@ -170,20 +138,6 @@
         <h1>Welcome to Weather Arkansas</h1>
         <p>Your go-to source for weather updates in Arkansas!</p>
     </div>
-    <div class="login-container">
-        <h2>Login</h2>
-        <input type="text" id="username" placeholder="Username">
-        <input type="password" id="password" placeholder="Password">
-        <button onclick="login()">Login</button>
-        <button onclick="showRegister()">Register</button>
-    </div>
-    <div class="register-container" style="display:none;">
-        <h2>Register</h2>
-        <input type="text" id="new-username" placeholder="Username">
-        <input type="password" id="new-password" placeholder="Password">
-        <button onclick="register()">Register</button>
-        <button onclick="showLogin()">Back to Login</button>
-    </div>
     <script>
         document.addEventListener('DOMContentLoaded', () => {
             const clouds = document.querySelectorAll('.cloud');
@@ -197,7 +151,6 @@ <h2>Register</h2>
             const sun = document.querySelector('.sun');
             const content = document.querySelector('.content');
 
-            // Function to set a cookie
             function setCookie(name, value, days) {
                 const date = new Date();
                 date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
@@ -205,7 +158,6 @@ <h2>Register</h2>
                 document.cookie = name + "=" + value + ";" + expires + ";path=/";
             }
 
-            // Function to get a cookie
             function getCookie(name) {
                 const cname = name + "=";
                 const decodedCookie = decodeURIComponent(document.cookie);
@@ -222,24 +174,22 @@ <h2>Register</h2>
                 return "";
             }
 
-            // Check if it's raining from the cookie
             const isRaining = getCookie("isRaining") === "true";
 
             if (isRaining) {
-                rainContainer.style.display = 'block';
-                document.body.style.background = '#2F4F4F'; // Dark slate gray background
-                content.style.color = '#fff'; // White text color
-                sun.style.display = 'none'; // Hide the sun
-                clouds.forEach(cloud => {
-                    cloud.style.background = '#A9A9A9'; // Dark grey clouds
-                });
+                startRain();
             }
 
             setInterval(() => {
+                startRain();
+                setTimeout(stopRain, 30000); // Rain for 30 seconds
+            }, 60000); // Every 1 minute
+
+            function startRain() {
                 rainContainer.style.display = 'block';
                 document.body.style.background = '#2F4F4F'; // Dark slate gray background
                 content.style.color = '#fff'; // White text color
-                sun.style.display = 'none'; // Hide the sun
+                sun.style.background = '#B8860B'; // Darker gold color for the sun
                 clouds.forEach(cloud => {
                     cloud.style.background = '#A9A9A9'; // Dark grey clouds
                 });
@@ -251,72 +201,35 @@ <h2>Register</h2>
                     raindrop.style.animationDuration = `${0.5 + Math.random()}s`;
                     rainContainer.appendChild(raindrop);
                 }
-                setTimeout(() => {
-                                       rainContainer.style.display = 'none';
-                    document.body.style.background = '#87CEEB'; // Sky blue background
-                    content.style.color = '#000'; // Black text color
-                    sun.style.display = 'block'; // Show the sun
-                    clouds.forEach(cloud => {
-                        cloud.style.background = '#fff'; // White clouds
-                    });
-                    setCookie("isRaining", "false", 1); // Set cookie to remember it's not raining
-                    while (rainContainer.firstChild) {
-                        rainContainer.removeChild(rainContainer.firstChild);
-                    }
-                }, 60000); // Rain for 1 minute
-            }, 30000); // Every 30 seconds
-        });
-
-        function showRegister() {
-            document.querySelector('.login-container').style.display = 'none';
-            document.querySelector('.register-container').style.display = 'block';
-        }
-
-        function showLogin() {
-            document.querySelector('.login-container').style.display = 'block';
-            document.querySelector('.register-container').style.display = 'none';
-        }
-
-        function register() {
-            const username = document.getElementById('new-username').value;
-            const password = document.getElementById('new-password').value;
-
-            if (username && password) {
-                const users = JSON.parse(localStorage.getItem('users')) || [];
-                const userExists = users.some(user => user.username === username);
-
-                if (userExists) {
-                    alert('Username already exists!');
-                } else {
-                    users.push({ username, password });
-                    localStorage.setItem('users', JSON.stringify(users));
-                    alert('Registration successful!');
-                    showLogin();
-                }
-            } else {
-                alert('Please fill in both fields.');
             }
-        }
-
-        function login() {
-            const username = document.getElementById('username').value;
-            const password = document.getElementById('password').value;
 
-            if (username && password) {
-                const users = JSON.parse(localStorage.getItem('users')) || [];
-                const user = users.find(user => user.username === username && user.password === password);
-
-                if (user) {
-                    alert('Login successful!');
-                    // Redirect to the main content or perform any other action
-                } else {
-                    alert('Invalid username or password.');
+            function stopRain() {
+                rainContainer.style.display = 'none';
+                document.body.style.background = '#87CEEB'; // Sky blue background
+                content.style.color = '#000'; // Black text color
+                sun.style.background = '#FFD700'; // Gold color for the sun
+                clouds.forEach(cloud => {
+                    cloud.style.background = '#fff'; // White clouds
+                });
+                setCookie("isRaining", "false", 1); // Set cookie to remember it's not raining
+                while (rainContainer.firstChild) {
+                    rainContainer.removeChild(rainContainer.firstChild);
                 }
-            } else {
-                alert('Please fill in both fields.');
             }
-        }
+
+            clouds.forEach(cloud => {
+                cloud.addEventListener('animationiteration', () => {
+                    if (cloud.getBoundingClientRect().left < sun.getBoundingClientRect().right &&
+                        cloud.getBoundingClientRect().right > sun.getBoundingClientRect().left &&
+                        cloud.getBoundingClientRect().top < sun.getBoundingClientRect().bottom &&
+                        cloud.getBoundingClientRect().bottom > sun.getBoundingClientRect().top) {
+                        sun.style.background = '#B8860B'; // Darker gold color for the sun
+                    } else {
+                        sun.style.background = '#FFD700'; // Gold color for the sun
+                    }
+                });
+            });
+        });
     </script>
 </body>
 </html>
-
