Added autofill from database into text boxes, but now data is taken from wrong...

Added autofill from database into text boxes, but now data is taken from wrong attributes in the database. Added save buttons, but they don't have functionality. Fixed bug in currentprojects where text didn't change when clicking more info.

client/KnowledgeBank/knowledgeBank.css

-
 .container {
   display: flex;
   justify-content: center; /* Horizontally center */
-
 }
 
-.maincontainer p {
-    flex: 1;
-     width: 80%;
-     height: 20%;
-     margin-right: 5%;
-     margin-left: 5%;
-     padding-top: 2%;
-     font-size: 18px;
-     font-family: 'Roboto', sans-serif;
+.maincontent-header{
+  background-color: #f0f0f0; 
+  border: 1px solid #ccc; 
+  border-radius: 8px; 
 }
 
-
 .top-buttons{
-padding-bottom: 40px;
-display: flex;
-justify-content: left;
-padding-top: 20px;
-padding-left: 150px;
 }
 
 .bottom-buttons{
-    display: flex;
-    justify-content: left;
-    padding-left: 150px;
 }
     
 
+.button-kunskapsbanken {
+  position: relative;
+  font-size: 1.7vw !important;
+  font-family: 'Roboto', sans-serif;
+  font-weight: bold;
+  text-align: center;
+  text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
+  border-radius: 8px;
+  border-style: none;
+  height: 13rem;
+  width: 22rem;
+  transition: ease .5s;
+  user-select: none;
+  overflow: hidden;
+}
+
+.button-kunskapsbanken::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.3);
+  box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.5);
+  border-radius: 8px;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
 
-.button-kunskapsbanken{
-    border-radius: 8px;
-    border-style: none;
-    box-sizing: border-box;
-    cursor: pointer;
- /*   flex-shrink: 0;*/
-    font-family: 'Roboto',sans-serif;
-    font-size: 25px;
-    font-weight: bold;
-    height: 13rem;
-    width: 22rem;
-    /*padding: 0 1.6rem;*/
-    text-align: center;
-    text-shadow: rgba(0, 0, 0, 0.25) 0 3px 8px;
-    transition: all .5s;
-    user-select: none;
-    -webkit-user-select: none;
-    touch-action: manipulation;
-     margin-right: 30px; 
+/* Add shadow only on small screens */
+@media screen and (max-width: 980px) {
+  .button-kunskapsbanken:hover::before {
+      opacity: 1;
   }
-  .button-kunskapsbanken:hover{
-    height: 15rem;
-    width: 25rem;
+  .button-kunskapsbanken{
+    margin: 5px;
+  }
+
 }
+
+/* Add resizing effect on large screens */
+@media screen and (min-width: 981px) {
+  .button-kunskapsbanken:hover {
+      transform: scale(1.1); 
+  }
+
+  .button-kunskapsbanken:hover::before {
+      opacity: 0.7; 
+  }
+}
+
+
  #buttons-kunskapsbanken-button1{
     background-image: linear-gradient(#c29ffa, #dfcdfa);
     color:white;
   }
+
   #buttons-kunskapsbanken-button1:hover{
     background-color:#d6a5db;
-  }  
+  } 
+
   #buttons-kunskapsbanken-button2{
     background-image: linear-gradient(#6610f2, #9e64fa);
     color: white;
   }
+  
   #buttons-kunskapsbanken-button2:hover{
     background-color:#aa5ac0;
   }  
+
   #buttons-kunskapsbanken-button3{
     background-image: linear-gradient(#3d0a91, #653ea4);
     color:white;
   }
+
   #buttons-kunskapsbanken-button3:hover{
     background-color:#6456c1;
     ;
-  }  
+  } 
+
   #buttons-kunskapsbanken-button4{
     background-image: linear-gradient(#290661, #4b2686);
     color:white;
   }
+
   #buttons-kunskapsbanken-button4:hover{
     background-color:#5013ca;
   }