Updated

style.css

@@ -13,13 +13,22 @@
     /* Chalk Font & Appearance */ 
     font-family: 'Fredericka the Great', cursive;  
     font-weight: bold; 
-    text-shadow: 0.1px 0.1px 0.3px #fff; /* White glow for chalk effect very little*/   
+    text-shadow: 0.1px 0.1px 0.3px #fff; /* White glow for chalk effect very little*/  
+    position: relative;  
 }
 
 .main-company > h3 {
     text-align: center;
 }
 
+.user-input-container{
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+    border: 2px solid #4c3b41;
+    border-radius: 15px;
+    padding: 15px;
+}
 .disclaimer  {
     position: absolute;
     bottom: 10;
@@ -34,10 +43,7 @@
     color: black;
 }
 
-.joke-section {
-    right:0;
-    
-}
+
 
 #balloon-container {
     position: absolute;
@@ -75,6 +81,10 @@
     transition: transform 0.3s ease-in-out;
 }
 
+
+
+
+
 /* Positioning for Agent 1 (bottom one) */
 #aiAssistant {
     right: 20px;
@@ -96,6 +106,7 @@
     cursor: pointer; /* Indicates it's interactive */
 }
 
+
 .chat-bubble {
     /* Styling for the text area appearance */
     background-color: #fff;
@@ -121,30 +132,9 @@
     border-left: 10px solid #fff;
     border-bottom: 10px solid transparent;
 }
-.networkContainer {
-    display: flex;
-    align-items: center; 
-    justify-content: space-around; 
-    }
-    .item {
-        /* Add some styling to see the boxes */
-        
-        color: white;
-        padding: 3px;
-        border: 1px solid #fff;
-        flex: 1; /* Optional: Distributes available space equally among items */
-    }
-    .rotate-svg {
-        /* Ensure the rotation is around the element's center */
-        transform-origin: center center; 
-        /* Define the transition effect */
-        transition: transform 1s ease; 
-    }
 
-    /* Apply the rotation when the container is hovered */
-    .item:active .rotate-svg {
-        transform: rotate(360deg);
-}
+
+
 
 /* Style the tab buttons */
 .tabs {
@@ -240,3 +230,5 @@ table img:hover {
     color: red;
 }
 
+
+