can you put back all the background with the same colored theme as myspace

components/comments-section.js

@@ -4,13 +4,13 @@ class CustomCommentsSection extends HTMLElement {
     this.shadowRoot.innerHTML = `
       <style>
         .comments-section {
-          background: rgba(0,0,0,0.7);
+          background: linear-gradient(135deg, #3b5998 0%, #2c3e50 100%);
           padding: 20px;
           border-radius: 10px;
           margin-top: 20px;
           color: #00ff00;
-}
-        .comments-header {
+        }
+.comments-header {
           font-size: 1.2rem;
           margin-bottom: 15px;
           padding-bottom: 5px;

components/friend-list.js

@@ -20,10 +20,7 @@ class CustomFriendList extends HTMLElement {
         this.shadowRoot.innerHTML = `
             <style>
                 .friend-list {
-                    background-color: rgba(0, 0, 0, 0.7);
-                    background-image: url('https://huggingface.co/spaces/mrdreamers/retrospace-blastoff/resolve/main/images/756781.jpg');
-background-size: cover;
-                    background-blend-mode: overlay;
+                    background: linear-gradient(135deg, #3b5998 0%, #2c3e50 100%);
 border-radius: 10px;
                     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                     padding: 1.5rem;

components/profile-card.js

@@ -4,10 +4,7 @@ class CustomProfileCard extends HTMLElement {
         this.shadowRoot.innerHTML = `
             <style>
                 .profile-card {
-                    background-color: rgba(0, 0, 0, 0.7);
-                    background-image: url('https://huggingface.co/spaces/mrdreamers/retrospace-blastoff/resolve/main/images/756781.jpg');
-background-size: cover;
-                    background-blend-mode: overlay;
+                    background: linear-gradient(135deg, #3b5998 0%, #2c3e50 100%);
 border-radius: 10px;
                     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
                     overflow: hidden;

components/profile-editor.js

@@ -4,13 +4,13 @@ class CustomProfileEditor extends HTMLElement {
     this.shadowRoot.innerHTML = `
       <style>
         .editor-container {
-          background: rgba(0,0,0,0.7);
+          background: linear-gradient(135deg, #3b5998 0%, #2c3e50 100%);
           padding: 20px;
           border-radius: 10px;
           color: #00ff00;
-margin: 20px 0;
+          margin: 20px 0;
         }
-        .editor-tabs {
+.editor-tabs {
           display: flex;
           margin-bottom: 15px;
         }

index.html

@@ -30,9 +30,7 @@
             
             <!-- Main Content -->
             <div class="w-full lg:w-2/4">
-                <div class="bg-black/70 rounded-lg shadow p-6 mb-6" style="
-                    background-image: url('https://huggingface.co/spaces/mrdreamers/retrospace-blastoff/resolve/main/images/756781.jpg');
-background-size: cover; background-blend-mode: overlay;">
+                <div class="bg-gradient-to-r from-blue-800 to-blue-900 rounded-lg shadow p-6 mb-6">
 <div class="flex items-center mb-4">
                         <img src="http://static.photos/people/200x200/1" alt="User" class="w-12 h-12 rounded-full mr-3">
                         <textarea class="flex-1 border border-gray-300 rounded-lg p-3" placeholder="What's on your mind?"></textarea>
@@ -46,9 +44,7 @@ background-size: cover; background-blend-mode: overlay;">
                         </button>
                     </div>
                 </div>
-                <div class="bg-black/70 rounded-lg shadow p-6 mb-6" style="
-                    background-image: url('https://huggingface.co/spaces/mrdreamers/retrospace-blastoff/resolve/main/images/756781.jpg');
-background-size: cover; background-blend-mode: overlay;">
+                <div class="bg-gradient-to-r from-blue-800 to-blue-900 rounded-lg shadow p-6 mb-6">
 <div class="flex items-center mb-4">
                         <img src="http://static.photos/people/200x200/2" alt="Friend" class="w-10 h-10 rounded-full mr-3">
                         <div>
@@ -67,9 +63,7 @@ background-size: cover; background-blend-mode: overlay;">
             
             <!-- Right Sidebar -->
             <div class="w-full lg:w-1/4">
-                <div class="bg-black/70 rounded-lg shadow p-6 mb-6" style="
-                    background-image: url('https://huggingface.co/spaces/mrdreamers/retrospace-blastoff/resolve/main/images/756781.jpg');
-background-size: cover; background-blend-mode: overlay;">
+                <div class="bg-gradient-to-r from-blue-800 to-blue-900 rounded-lg shadow p-6 mb-6">
 <h2 class="text-xl font-bold mb-4">Top Friends</h2>
                     <div class="space-y-4">
                         <div class="flex items-center">
@@ -86,9 +80,9 @@ background-size: cover; background-blend-mode: overlay;">
                         </div>
                     </div>
                 </div>
-                <div class="bg-black/70 rounded-lg shadow p-6" style="background-image: url('https://huggingface.co/spaces/mrdreamers/retrospace-blastoff/resolve/main/images/space_disco_bg_by_neonlover.png'); background-size: cover; background-blend-mode: overlay;">
+                <div class="bg-gradient-to-r from-blue-800 to-blue-900 rounded-lg shadow p-6">
 <h2 class="text-xl font-bold mb-4">Music Player</h2>
-                    <div class="bg-gray-800 p-4 rounded-lg mb-4" style="background-image: url('https://huggingface.co/spaces/mrdreamers/retrospace-blastoff/resolve/main/images/space_disco_bg_by_neonlover.png'); background-size: cover; background-blend-mode: overlay;">
+                    <div class="bg-blue-900 p-4 rounded-lg mb-4">
 <div class="flex items-center mb-4">
                             <img src="http://static.photos/music/200x200/1" alt="Album" class="w-12 h-12 rounded mr-3">
                             <div>

style.css

@@ -2,21 +2,17 @@
 /* Custom styles for MySpace Rewind */
 body {
     font-family: 'Arial', sans-serif;
-    background-color: #f0f2f5;
+    background-color: #2c3e50;
     color: #00ff00;
     transition: all 0.3s ease;
-    background-image: url('https://huggingface.co/spaces/mrdreamers/retrospace-blastoff/resolve/main/images/756781.jpg');
-background-size: cover;
+    background: linear-gradient(135deg, #3b5998 0%, #2c3e50 100%);
     background-attachment: fixed;
     background-position: center;
 }
 .retro-mode {
-    background-color: #000;
-    background-image: url('https://huggingface.co/spaces/mrdreamers/retrospace-blastoff/resolve/main/images/756781.jpg');
-background-size: cover;
+    background: linear-gradient(135deg, #1a1a3a 0%, #000033 100%);
     background-attachment: fixed;
     color: #00ff00;
-background-blend-mode: overlay;
 }
 /* Custom scrollbar */
 ::-webkit-scrollbar {