diff --git a/public/css/achievement.css b/public/css/achievement.css
index 021b7160765c7245568340218446a42901f70115..1048588db5fff80ddd103b9b957c5d5b591f49b1 100644
--- a/public/css/achievement.css
+++ b/public/css/achievement.css
@@ -5,127 +5,127 @@
     font-family: arial;
   }
   
-  body {
-    background-image: url('../img/basic-wallpaper5.jpeg');
-    text-align: center;
-    font-family: arial;
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    background-position: center center;
-  }
+body {
+  background-image: url('../img/basic-wallpaper5.jpeg');
+  text-align: center;
+  font-family: arial;
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-position: center center;
+}
 
-  .achievement-container {
-    position: absolute;
-    width: 80%;
-    height: 100%;
-    left: 20%;
-  }
+.achievement-container {
+  position: absolute;
+  width: 80%;
+  height: 100%;
+  left: 20%;
+}
 
-  .achievement-container h1 {
-    margin-top: 20px;
-    font-family: Arial, Helvetica, sans-serif;
-    font-weight: 900;
-    font-size: 40px;
-    color: white;
-  }
+.achievement-container h1 {
+  margin-top: 20px;
+  font-family: Arial, Helvetica, sans-serif;
+  font-weight: 900;
+  font-size: 40px;
+  color: white;
+}
 
-  .achievement-container .searchInput {
-    position: relative;
-    width: 20%;
-    padding: 10px;
-    display: flex;
-    justify-content: flex-start;
-    border: 1px solid #ddd;
-    margin-bottom: 12px;
-  }
+.achievement-container .searchInput {
+  position: relative;
+  width: 20%;
+  padding: 10px;
+  display: flex;
+  justify-content: flex-start;
+  border: 1px solid #ddd;
+  margin-bottom: 12px;
+}
 
-  .search-container {
-    width: 90%;
-    position: relative;
-    left: 5%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
+.search-container {
+  width: 90%;
+  position: relative;
+  left: 5%;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
 
-  .search-container .full-search-container {
-    width: 60%;
-    display: flex;
-    
-  }
+.search-container .full-search-container {
+  width: 60%;
+  display: flex;
+  
+}
 
-  .search-container .full-search-container input {
-    width: 50%;
-    height: 30px;
-    padding: 5px;
-    border-radius: 5px;
-    border: 2px solid black;
-    background-color: #fff;
-  }
+.search-container .full-search-container input {
+  width: 50%;
+  height: 30px;
+  padding: 5px;
+  border-radius: 5px;
+  border: 2px solid black;
+  background-color: #fff;
+}
 
-  .search-container .full-search-container select {
-    width: 30%;
-    height: 30px;
-  }
+.search-container .full-search-container select {
+  width: 30%;
+  height: 30px;
+}
 
-  .search-container .filter-sort-container {
-    height: 30px;
-    width: 60%;
-    color: white;
-  }
+.search-container .filter-sort-container {
+  height: 30px;
+  width: 60%;
+  color: white;
+}
 
-  .search-container .filter-container {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    height: 30px;
-  }
+.search-container .filter-container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  height: 30px;
+}
 
-  .search-container .sort-container {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    height: 30px;
-  }
+.search-container .sort-container {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  height: 30px;
+}
 
-  .search-container .sort-container h2 {
-    font-size: 18px;
-    margin-right: 10px;
-    width: 10%; 
-  }
+.search-container .sort-container h2 {
+  font-size: 18px;
+  margin-right: 10px;
+  width: 10%; 
+}
 
-  .search-container .sort-container select {
-    width: 30%; 
-  }
+.search-container .sort-container select {
+  width: 30%; 
+}
 
-  .search-container .filter-container h2 {
-    font-size: 18px;
-    margin-right: 10px;
-    width: 10%; 
-  }
+.search-container .filter-container h2 {
+  font-size: 18px;
+  margin-right: 10px;
+  width: 10%; 
+}
 
-  .filter-box select {
-    font-size: 16px;
-    margin-right: 10px;
-    font-weight: 700;
-  }
+.filter-box select {
+  font-size: 16px;
+  margin-right: 10px;
+  font-weight: 700;
+}
 
-  .search-container .filter-container select {
-    width: 30%; 
-  }
+.search-container .filter-container select {
+  width: 30%; 
+}
 
-  .filter-box {
-    width: 90%;
-    position: relative;
-    left: 5%;
-  }
+.filter-box {
+  width: 90%;
+  position: relative;
+  left: 5%;
+}
 
-  .filter-box .page-limit {
-    position: relative;
-    display: flex;
-    left: 0;
-  }
+.filter-box .page-limit {
+  position: relative;
+  display: flex;
+  left: 0;
+}
 
 .achievement-table {
   position: relative;
@@ -133,7 +133,6 @@
   left: 5%;
 }
 
-/* Gaya Header Kolom */
 .achievement-table th {
   background-color: crimson;
   color: #fff;
@@ -141,7 +140,6 @@
   text-align: left;
 }
 
-/* Gaya Sel Baris */
 .achievement-table tbody tr:nth-child(odd) {
   background-color: #f2f2f2;
 }
@@ -150,140 +148,139 @@
   background-color: #e5e5e5;
 }
 
-/* Gaya Sel Data */
 .achievement-table td {
   padding: 10px;
 }
 
-/* Gaya ID */
 .achievement-table td:first-child {
   font-weight: bold;
 }
 
-/* Gaya Threshold */
 .achievement-table td:last-child {
   font-style: italic;
 }
 
-/* Gaya Hover Baris */
 .achievement-table tbody tr:hover {
   background-color: #c9e2ff;
 }
 
-/* Batas antara Tabel dan Konten Terkait */
 .achievement-list {
   overflow-y: auto;
   overflow-x: initial;
 }
 
-  .pagination {
-    display: flex;
-    justify-content: center;
-    align-items: flex-end;
-    position: relative; 
-    bottom: -5%;
-    width: 100%;
-    height: 5%;
-  }
+.pagination {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  position: relative; 
+  bottom: -5%;
+  width: 100%;
+  height: 5%;
+}
 
-  .pagination .pagination-buttons {
-    display: flex;
-    justify-content: center;
-    align-items: flex-end;
-    margin: 0 10px;
-  }
+.pagination .pagination-buttons {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+  margin: 0 10px;
+}
 
-  .pagination li {
-    display: inline;
-    text-align: center;
-  }
-  .pagination a {
-    float: left;
-    display: block;
-    font-size: 12px;
-    text-decoration: none;
-    padding: 5px 12px;
-    color: #fff;
-    margin-left: -1px;
-    border: 1px solid transparent;
-    line-height: 1.5;
-  }
-  .pagination a.active {
-    cursor: default;
-  }
-  .pagination a:active {
-    outline: none;
-  }
-  
-  .achievement a {
-    margin: 0 2px;
-    padding: 0;
-    width: 30px;
-    height: 30px;
-    line-height: 30px;
-    -moz-border-radius: 100%;
-    -webkit-border-radius: 100%;
-    border-radius: 100%;
-    background-color: #000000;
-  }
-  .achievement a b {
-    font-size: 15px;
-  }
-  .achievement a:hover {
-    background-color: crimson;
-  }
-  .achievement a.active, .achievement a:active {
-    background-color: rgb(127, 0, 25);
-  }
-  
+.pagination li {
+  display: inline;
+  text-align: center;
+}
 
-  button {
-    align-items: center;
-    appearance: none;
-    background-color: #ffffff;
-    border-radius: 4px;
-    border-width: 0;
-    box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
-    box-sizing: border-box;
-    color: #000000;
-    cursor: pointer;
-    display: inline-flex;
-    font-family: "JetBrains Mono",monospace;
-    height: 48px;
-    justify-content: center;
-    line-height: 1;
-    list-style: none;
-    overflow: hidden;
-    padding-left: 16px;
-    padding-right: 16px;
-    position: relative;
-    text-align: left;
-    text-decoration: none;
-    transition: box-shadow .15s,transform .15s;
-    user-select: none;
-    -webkit-user-select: none;
-    touch-action: manipulation;
-    white-space: nowrap;
-    will-change: box-shadow,transform;
-    font-size: 18px;
-    font-weight: 900;
-  }
+.pagination a {
+  float: left;
+  display: block;
+  font-size: 12px;
+  text-decoration: none;
+  padding: 5px 12px;
+  color: #fff;
+  margin-left: -1px;
+  border: 1px solid transparent;
+  line-height: 1.5;
+}
 
-  button:focus {
-    box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
-  }
+.pagination a.active {
+  cursor: default;
+}
 
-  button:hover {
-    box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
-    transform: translateY(-2px);
-  }
+.pagination a:active {
+  outline: none;
+}
 
-  button:active {
-    box-shadow: #D6D6E7 0 3px 7px inset;
-    transform: translateY(2px);
-  }
+.achievement a {
+  margin: 0 2px;
+  padding: 0;
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  -moz-border-radius: 100%;
+  -webkit-border-radius: 100%;
+  border-radius: 100%;
+  background-color: #000000;
+}
+
+.achievement a b {
+  font-size: 15px;
+}
+
+.achievement a:hover {
+  background-color: crimson;
+}
+
+.achievement a.active, .achievement a:active {
+  background-color: rgb(127, 0, 25);
+}
+
+button {
+  align-items: center;
+  appearance: none;
+  background-color: #ffffff;
+  border-radius: 4px;
+  border-width: 0;
+  box-shadow: rgba(45, 35, 66, 0.4) 0 2px 4px,rgba(45, 35, 66, 0.3) 0 7px 13px -3px,#D6D6E7 0 -3px 0 inset;
+  box-sizing: border-box;
+  color: #000000;
+  cursor: pointer;
+  display: inline-flex;
+  font-family: "JetBrains Mono",monospace;
+  height: 48px;
+  justify-content: center;
+  line-height: 1;
+  list-style: none;
+  overflow: hidden;
+  padding-left: 16px;
+  padding-right: 16px;
+  position: relative;
+  text-align: left;
+  text-decoration: none;
+  transition: box-shadow .15s,transform .15s;
+  user-select: none;
+  -webkit-user-select: none;
+  touch-action: manipulation;
+  white-space: nowrap;
+  will-change: box-shadow,transform;
+  font-size: 18px;
+  font-weight: 900;
+}
+
+button:focus {
+  box-shadow: #D6D6E7 0 0 0 1.5px inset, rgba(45, 35, 66, 0.4) 0 2px 4px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
+}
+
+button:hover {
+  box-shadow: rgba(45, 35, 66, 0.4) 0 4px 8px, rgba(45, 35, 66, 0.3) 0 7px 13px -3px, #D6D6E7 0 -3px 0 inset;
+  transform: translateY(-2px);
+}
+
+button:active {
+  box-shadow: #D6D6E7 0 3px 7px inset;
+  transform: translateY(2px);
+}
   
-  /* Basic dropdown styles */
 .filter-sort-container {
   display: inline-block;
   position: relative;
@@ -317,9 +314,8 @@
   font-weight: 600;
 }
 
-/* Styling the dropdown arrow */
 .filter-container select::after {
-  content: '\25BC'; /* Unicode arrow character */
+  content: '\25BC';
   position: absolute;
   top: 50%;
   right: 10px;
@@ -353,11 +349,6 @@
   align-items: center;
 }
 
-/* Animation on dropdown open */
-/* .filter-container select:hover {
-  animation: fadeIn 0.3s ease-in-out;
-} */
-
 @keyframes fadeIn {
   0% {
       opacity: 0;
diff --git a/public/css/edit-profile.css b/public/css/edit-profile.css
index 3bc92182f6114ece5583899ffcb924589f8e77b2..12cfe8c827cb0f7ed67c541688e4957b143d0bbe 100644
--- a/public/css/edit-profile.css
+++ b/public/css/edit-profile.css
@@ -4,238 +4,237 @@
     box-sizing: border-box;
   }
   
-  html, body {
-    width: 100%;
-    height: 100%;
-  }
-  
-  body {
-    background: #202020;
-    font-family: "Arial", sans-serif;
-    display: flex;
-    background-image: url('../img/basic-wallpaper5.jpeg');
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    background-position: center center;
-  }
-  
-  .card {
-    position: absolute;
-    margin: auto;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 20%;
-    width: 350px;
-    height: 500px;
-    border-radius: 10px;
-    box-shadow: 0 10px 25px 5px rgba(0, 0, 0, 0.2);
-    background: #151515;
-    overflow: hidden;
-  }
+html, body {
+  width: 100%;
+  height: 100%;
+}
+
+body {
+  background: #202020;
+  font-family: "Arial", sans-serif;
+  display: flex;
+  background-image: url('../img/basic-wallpaper5.jpeg');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-position: center center;
+}
+
+.card {
+  position: absolute;
+  margin: auto;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 20%;
+  width: 350px;
+  height: 500px;
+  border-radius: 10px;
+  box-shadow: 0 10px 25px 5px rgba(0, 0, 0, 0.2);
+  background: #151515;
+  overflow: hidden;
+}
+
+.card .ds-top {
+  margin: auto;
+  top: 0;
+  right: 0;
+  left: 0;
+  width: 100%;
+  height: 90px;
+  background: crimson;
+  animation: dsTop 1.5s;
+}
+
+.card .avatar-holder {
+  position: absolute;
+  margin: auto;
+  top: 40px;
+  right: 0;
+  left: 0;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  box-shadow: 0 0 0 5px #151515, inset 0 0 0 5px #000000, inset 0 0 0 5px #000000, inset 0 0 0 5px #000000, inset 0 0 0 5px #000000;
+  background: white;
+  overflow: hidden;
+  animation: mvTop 1.5s;
+}
+
+.card .avatar-holder img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.card .avatar-holder:hover{
+  filter: brightness(60%);
+  cursor: pointer;
+}
+
+.card .avatar-holder:active{
+  filter: brightness(100%);
+}
+
+.card .avatar-holder .edit-text {
+  position: absolute;
+  bottom: 10px;
+  left: 50%;
+  transform: translateX(-50%);
+  background-color: crimson;
+  opacity: 0.8;
+  color: white;
+  padding: 5px 10px;
+  border-radius: 5px;
+  display: none;
+  top: 63px;
+}
+
+.card .avatar-holder:hover .edit-text {
+  display: block;
+  animation: mvDown 1s forwards;
+}
+
+.card .avatar-holder input {
+  display: none;
+}
+
+.card .name {
+  position: relative;
+  margin-top: 70px;
+  width: inherit;
+  height: 40px;
+  text-align: center;
+  animation: fadeIn 2s ease-in;
+}
+
+.card .name h1 {
+    color: white;
+    text-decoration: none;
+    font-weight: 700;
+    font-size: 27px;
+}
 
-  .card .ds-top {
-    /* position: absolute; */
-    margin: auto;
-    top: 0;
-    right: 0;
-    left: 0;
-    width: 100%;
-    height: 90px;
-    background: crimson;
-    animation: dsTop 1.5s;
-  }
-  .card .avatar-holder {
-    position: absolute;
-    margin: auto;
+.card .name h1:hover {
+    text-decoration: underline;
+    color: crimson;
+}
+
+.card .name a {
+  color: white;
+  text-decoration: none;
+  font-weight: 700;
+  font-size: 16px;
+}
+
+.card .name a:hover {
+  text-decoration: underline;
+  color: crimson;
+}
+
+.card .name input {
+  position: relative;
+  color: crimson;
+  background-color: black;
+  text-decoration: none;
+  font-weight: 700;
+  font-size: 14px;
+  width: 70%;
+  padding-right: 20px;
+}
+
+.card .button {
+  /* position: absolute; */
+  margin-top: 0; 
+  padding: 20px 40px;
+  width: inherit;
+  height: 60px;
+  text-align: center;
+  animation: fadeIn 2s ease-in;
+  outline: none;
+}
+
+.card .button .btn {
+  padding: 8px 20px;
+  margin-top: 170px;
+  border-radius: 10px;
+  color: white;
+  background: rgb(72, 18, 29);
+  letter-spacing: 0.05em;
+  text-decoration: none;
+  font-size: 15px;
+  transition: all 1s;
+}
+
+.card .button .btn:hover {
+  color: white;
+  background: crimson;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+@keyframes mvTop {
+  0% {
+    top: -150px;
+  }
+  100% {
     top: 40px;
-    right: 0;
-    left: 0;
-    width: 100px;
-    height: 100px;
-    border-radius: 50%;
-    box-shadow: 0 0 0 5px #151515, inset 0 0 0 5px #000000, inset 0 0 0 5px #000000, inset 0 0 0 5px #000000, inset 0 0 0 5px #000000;
-    background: white;
-    overflow: hidden;
-    animation: mvTop 1.5s;
-  }
-  .card .avatar-holder img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-
-  .car .avatar-holder img {
-    filter: brightness(100%);
-    transition: filter 0.5s ease;
-  }
-
-  .card .avatar-holder:hover{
-    filter: brightness(60%);
-    cursor: pointer;
   }
+}
 
-  .card .avatar-holder:active{
-    filter: brightness(100%);
+@keyframes mvDown {
+  0% {
+    top: 190px;
   }
-
-  .card .avatar-holder .edit-text {
-    position: absolute;
-    bottom: 10px;
-    left: 50%;
-    transform: translateX(-50%);
-    background-color: crimson;
-    opacity: 0.8;
-    color: white;
-    padding: 5px 10px;
-    border-radius: 5px;
-    display: none;
+  100% {
     top: 63px;
   }
+}
 
-  .card .avatar-holder:hover .edit-text {
-    display: block;
-    animation: mvDown 1s forwards;
-  }
-
-  .card .avatar-holder input {
-    display: none;
-  }
-
-  .card .name {
-    position: relative;
-    margin-top: 70px;
-    width: inherit;
-    height: 40px;
-    text-align: center;
-    animation: fadeIn 2s ease-in;
+@keyframes dsTop {
+  0% {
+    top: -150px;
   }
-    .card .name h1 {
-        color: white;
-        text-decoration: none;
-        font-weight: 700;
-        font-size: 27px;
-    }
-    .card .name h1:hover {
-        text-decoration: underline;
-        color: crimson;
-    }
-  .card .name a {
-    color: white;
-    text-decoration: none;
-    font-weight: 700;
-    font-size: 16px;
-  }
-  .card .name a:hover {
-    text-decoration: underline;
-    color: crimson;
-  }
-  .card .name input {
-    position: relative;
-    color: crimson;
-    background-color: black;
-    text-decoration: none;
-    font-weight: 700;
-    font-size: 14px;
-    width: 70%;
-    padding-right: 20px;
+  100% {
+    top: 0;
   }
+}
 
-  .card .button {
-    /* position: absolute; */
-    margin-top: 0; 
-    padding: 20px 40px;
-    width: inherit;
-    height: 60px;
-    text-align: center;
-    animation: fadeIn 2s ease-in;
-    outline: none;
-  }
-  .card .button .btn {
-    padding: 8px 20px;
-    margin-top: 170px;
-    border-radius: 10px;
-    color: white;
-    background: rgb(72, 18, 29);
-    letter-spacing: 0.05em;
-    text-decoration: none;
-    font-size: 15px;
-    transition: all 1s;
-  }
-  .card .button .btn:hover {
-    color: white;
-    background: crimson;
+@media (max-width: 768px) {
+  body {
+    display: block;
   }
 
-  @keyframes fadeIn {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
+  .card {
+    width: 80%; 
+    height: 100%;
   }
 
-  @keyframes mvTop {
-    0% {
-      top: -150px;
-    }
-    100% {
-      top: 40px;
-    }
+  .card .button .btn{
+    margin-top: 220px;
   }
-
-  @keyframes mvDown {
-    0% {
-      top: 190px;
-    }
-    100% {
-      top: 63px;
-    }
+  
+  .ds-top {
+    width: 100%; 
   }
-
-  @keyframes dsTop {
-    0% {
-      top: -150px;
-    }
-    100% {
-      top: 0;
-    }
+  
+  .avatar-holder {
+    top: 20px;
   }
-
-  @media (max-width: 768px) {
-    body {
-      display: block;
-    }
-
-    .card {
-      width: 80%; 
-      height: 100%;
-    }
-
-    .card .button .btn{
-      margin-top: 220px;
-    }
-    
-    .ds-top {
-      width: 100%; 
-    }
-    
-    .avatar-holder {
-      top: 20px;
-    }
-    
-    .name {
-      top: 10px; 
-    }
-    
-    
-    
-
+  
+  .name {
+    top: 10px; 
   }
+}
 
-  .following {
-    color: white;
-    background: crimson;
-  }
\ No newline at end of file
+.following {
+  color: white;
+  background: crimson;
+}
\ No newline at end of file
diff --git a/public/css/login.css b/public/css/login.css
index 9f4ea2c057e4997934c514fd3ef31547b2c7fa20..62ba434c381ea8d5fc28ff8612be7f667c92e286 100644
--- a/public/css/login.css
+++ b/public/css/login.css
@@ -1,14 +1,12 @@
 
-*
-{
+* {
     margin: 0;
     padding: 0;
     box-sizing: border-box;
     font-family: 'Quicksand', sans-serif;
 }
 
-body 
-{
+body {
     display: flex;
     justify-content: center;
     align-items: center;
@@ -16,8 +14,7 @@ body
     background: #000;
 }
 
-section 
-{
+section {
     position: absolute;
     width: 100vw;
     height: 100vh;
@@ -29,8 +26,7 @@ section
     overflow: hidden;
 }
 
-section::before 
-{
+section::before {
     content: '';
     position: absolute;
     width: 100%;
@@ -39,8 +35,7 @@ section::before
     animation: animate 5s linear infinite;
 }
 
-section span 
-{
+section span {
     position: relative;
     display: block;
     width: calc(6.25vw - 2px);
@@ -50,14 +45,12 @@ section span
     transition: 1.5s;
 }
 
-section span:hover 
-{
+section span:hover {
     background: crimson;
     transition: 0s;
 }
 
-section .signin
-{
+section .signin{
     position: absolute;
     width: 400px;
     background: #222;  
@@ -70,8 +63,7 @@ section .signin
     box-shadow: 0 15px 35px rgba(0,0,0,9);
 }
 
-section .signin .content 
-{
+section .signin .content {
     position: relative;
     width: 100%;
     display: flex;
@@ -81,23 +73,20 @@ section .signin .content
     gap: 40px;
 }
 
-section .signin .content h2 
-{
+section .signin .content h2 {
     font-size: 2em;
     color: #0f0;
     text-transform: uppercase;
 }
 
-section .signin .content .form 
-{
+section .signin .content .form {
     width: 100%;
     display: flex;
     flex-direction: column;
     gap: 25px;
 }
 
-section .signin .content .form span
-{
+section .signin .content .form span {
     all: initial;
     color: red;
     margin-top: -20px;
@@ -106,28 +95,25 @@ section .signin .content .form span
 }
 
 
-section .signin .content .form .inputBox
-{
+section .signin .content .form .inputBox {
     position: relative;
     width: 100%;
 }
 
-section .signin .content .form .inputBox input 
-{
+section .signin .content .form .inputBox input {
     position: relative;
     width: 100%;
     background: #333;
     border: none;
     outline: none;
-    padding: 25px 10px 7.5px;
+    padding: 25px 10px 7.5px;                                                                                                                                                                                                                                            /* Willy was here */
     border-radius: 14px;
     color: #fff;
     font-weight: 500;
     font-size: 1em;
 }
 
-section .signin .content .form .inputBox i 
-{
+section .signin .content .form .inputBox i {
     position: absolute;
     left: 0;
     padding: 15px 10px;
@@ -145,28 +131,24 @@ section .signin .content .form .inputBox i
     color: #fff;
 }
 
-.signin .content .form .links 
-{
+.signin .content .form .links {
     position: relative;
     width: 100%;
     display: flex;
     justify-content: space-between;
 }
 
-.signin .content .form .links a 
-{
+.signin .content .form .links a {
     color: #fff;
     text-decoration: none;
 }
 
-.signin .content .form .links a:nth-child(2)
-{
+.signin .content .form .links a:nth-child(2) {
     color: #0f0;
     font-weight: 600;
 }
 
-.signin .content .form .inputBox input[type="submit"]
-{
+.signin .content .form .inputBox input[type="submit"] {
     padding: 10px;
     background: #0f0;
     color: #000;
@@ -176,8 +158,7 @@ section .signin .content .form .inputBox i
     cursor: pointer;
 }
 
-.signin .content .form .inputBox .back
-{
+.signin .content .form .inputBox .back {
     background: red;
     display: flex;
     justify-content: center;
@@ -200,13 +181,11 @@ section .signin .content .form .inputBox i
     height: 100%;
 }
 
-.back:active
-{
+.back:active {
     opacity: 0.6;
 }
 
-input[type="submit"]:active
-{
+input[type="submit"]:active {
     opacity: 0.6;
 }
 
diff --git a/public/css/user-profile.css b/public/css/user-profile.css
index 5ce843c3f231f03a73bab8882ae7b32330dea17a..57c467c74050803322bba13af6fce04f0103c270 100644
--- a/public/css/user-profile.css
+++ b/public/css/user-profile.css
@@ -4,298 +4,321 @@
     box-sizing: border-box;
   }
   
-  html, body {
-    width: 100%;
-    height: 100%;
+html, body {
+  width: 100%;
+  height: 100%;
 
-  }
-  
-  body {
-    background: #202020;
-    font-family: "Arial", sans-serif;
-    background-image: url('../img/basic-wallpaper5.jpeg');
-    background-size: cover;
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-    background-position: center center;
-  }
-  
-  .card {
-    position: absolute;
-    margin: auto;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 20%;
-    width: 350px;
-    height: 500px;
-    border-radius: 10px;
-    box-shadow: 0 10px 25px 5px rgba(0, 0, 0, 0.2);
-    background: #151515;
-    overflow: hidden;
-  }
+}
 
-  .card .ds-top {
-    /* position: absolute; */
-    margin: auto;
-    top: 0;
-    right: 0;
-    left: 0;
-    width: 100%;
-    height: 90px;
-    background: crimson;
-    animation: dsTop 1.5s;
-  }
-  .card .avatar-holder {
-    position: absolute;
-    margin: auto;
-    top: 40px;
-    right: 0;
-    left: 0;
-    width: 100px;
-    height: 100px;
-    border-radius: 50%;
-    box-shadow: 0 0 0 5px #151515, inset 0 0 0 5px #000000, inset 0 0 0 5px #000000, inset 0 0 0 5px #000000, inset 0 0 0 5px #000000;
-    background: white;
-    overflow: hidden;
-    animation: mvTop 1.5s;
-  }
-  .card .avatar-holder img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
-  }
-  .card .name {
-    position: relative;
-    margin: auto;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    width: inherit;
-    height: 40px;
-    text-align: center;
-    animation: fadeIn 2s ease-in;
-  }
-  .card .name a {
-    color: white;
-    text-decoration: none;
-    font-weight: 700;
-    font-size: 22px;
-  }
-  .card .name a:hover {
-    text-decoration: underline;
-    color: crimson;
+body {
+  background: #202020;
+  font-family: "Arial", sans-serif;
+  background-image: url('../img/basic-wallpaper5.jpeg');
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+  background-position: center center;
+}
+
+.card {
+  position: absolute;
+  margin: auto;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 20%;
+  width: 350px;
+  height: 500px;
+  border-radius: 10px;
+  box-shadow: 0 10px 25px 5px rgba(0, 0, 0, 0.2);
+  background: #151515;
+  overflow: hidden;
+}
+
+.card .ds-top {
+  /* position: absolute; */
+  margin: auto;
+  top: 0;
+  right: 0;
+  left: 0;
+  width: 100%;
+  height: 90px;
+  background: crimson;
+  animation: dsTop 1.5s;
+}
+
+.card .avatar-holder {
+  position: absolute;
+  margin: auto;
+  top: 40px;
+  right: 0;
+  left: 0;
+  width: 100px;
+  height: 100px;
+  border-radius: 50%;
+  box-shadow: 0 0 0 5px #151515, inset 0 0 0 5px #000000, inset 0 0 0 5px #000000, inset 0 0 0 5px #000000, inset 0 0 0 5px #000000;
+  background: white;
+  overflow: hidden;
+  animation: mvTop 1.5s;
+}
+
+.card .avatar-holder img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.card .name {
+  position: relative;
+  margin: auto;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: inherit;
+  height: 40px;
+  text-align: center;
+  animation: fadeIn 2s ease-in;
+}
+
+.card .name a {
+  color: white;
+  text-decoration: none;
+  font-weight: 700;
+  font-size: 22px;
+}
+
+.card .name a:hover {
+  text-decoration: underline;
+  color: crimson;
+}
+
+.card .name h1 {
+  margin: 12px;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  color: white;
+  font-size: 16px;
+}
+
+.card .button {
+  /* position: absolute; */
+  margin: 20px 0; 
+  padding: 20px 40px;
+  width: 100%;
+  height: 60px;
+  text-align: center;
+  animation: fadeIn 2s ease-in;
+  outline: none;
+}
+
+.card .button .btn {
+  padding: 5px 20px;
+  border-radius: 10px;
+  color: white;
+  background: rgb(72, 18, 29);
+  letter-spacing: 0.05em;
+  text-decoration: none;
+  font-size: 15px;
+  transition: all 1s;
+}
+
+.card .button .btn:hover {
+  color: white;
+  background: crimson;
+}
+
+.card .ds-info {
+  /* position: absolute; */
+  margin: auto;
+  top: 120px;
+  width: inherit;
+  height: 40px;
+  display: flex;
+  font-size: 30px;
+  justify-content: space-evenly;
+}
+
+.card .ds-info .achievements, .card .ds-info .quest {
+  position: relative;
+  left: -300px;
+  /* width: calc(250px / 3); */
+  text-align: center;
+  color: white;
+  animation: fadeInMove 2s;
+  animation-fill-mode: forwards;
+}
+
+.card .ds-info .achievements h1, .card .ds-info .quest h1 {
+  text-transform: uppercase;
+  color: crimson;
+  font-size: 24px;
+}
+
+.card .ds-info .achievements p, .card .ds-info .quest p {
+  font-size: 30px;
+}
+
+.card .ds-info .ds:nth-of-type(2) {
+  animation-delay: 0.5s;
+}
+
+.card .ds-info .ds:nth-of-type(1) {
+  animation-delay: 1s;
+}
+
+.card .ds-level {
+  /* position: absolute; */
+  margin:75px auto -60px auto;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  width: 80%;
+  height: 150px;
+  animation: mvBottom 1.5s;
+}
+
+.card .ds-level h1 {
+  margin-bottom: 5px;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: rgb(255, 255, 255);
+  font-size: 18px;
+}
+
+.card .ds-level h1:hover {
+  color: crimson;
+}
+
+.card .ds-level .skill h1 {
+  font-weight: 400;
+  font-size: 12px;
+  letter-spacing: 0.05em;
+  margin: 4px 0;
+  color: white;
+}
+
+.card .ds-level .skill .fab {
+  color: crimson;
+  font-size: 14px;
+}
+
+.card .ds-level .skill .bar {
+  height: 5px;
+  background: crimson;
+  text-align: right;
+}
+
+.card .ds-level .skill .bar p {
+  color: white;
+  font-size: 12px;
+  padding-top: 5px;
+  animation: fadeIn 5s;
+}
+
+.card .ds-level .skill .bar:hover {
+  background: white;
+}
+
+.card .ds-level .skill .bar-level {
+  /* width: 49%; */
+  animation: levelAnimate 1s;
+  animation-delay: 0.4s;
+}
+
+@keyframes fadeInMove {
+  0% {
+    opacity: 0;
+    left: -300px;
   }
-  .card .name h1 {
-    margin: 12px;
+  100% {
+    opacity: 1;
     left: 0;
-    right: 0;
-    bottom: 0;
-    color: white;
-    font-size: 16px;
-  }
-  .card .button {
-    /* position: absolute; */
-    margin: 20px 0; 
-    padding: 20px 40px;
-    width: 100%;
-    height: 60px;
-    text-align: center;
-    animation: fadeIn 2s ease-in;
-    outline: none;
   }
+}
 
-  .card .button .btn {
-    padding: 5px 20px;
-    border-radius: 10px;
-    color: white;
-    background: rgb(72, 18, 29);
-    letter-spacing: 0.05em;
-    text-decoration: none;
-    font-size: 15px;
-    transition: all 1s;
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
   }
-  .card .button .btn:hover {
-    color: white;
-    background: crimson;
+  100% {
+    opacity: 1;
   }
+}
 
-  .card .ds-info {
-    /* position: absolute; */
-    margin: auto;
-    top: 120px;
-    width: inherit;
-    height: 40px;
-    display: flex;
-    font-size: 30px;
-    justify-content: space-evenly;
-  }
-  .card .ds-info .achievements, .card .ds-info .quest {
-    position: relative;
-    left: -300px;
-    /* width: calc(250px / 3); */
-    text-align: center;
-    color: white;
-    animation: fadeInMove 2s;
-    animation-fill-mode: forwards;
-  }
-  .card .ds-info .achievements h1, .card .ds-info .quest h1 {
-    text-transform: uppercase;
-    color: crimson;
-    font-size: 24px;
+@keyframes levelAnimate {
+  0% {
+    width: 0;
   }
-  .card .ds-info .achievements p, .card .ds-info .quest p {
-    font-size: 30px;
+  100% {
+    width: '<?php echo $progress; ?>%';
   }
-  .card .ds-info .ds:nth-of-type(2) {
-    animation-delay: 0.5s;
+}
+
+@keyframes mvBottom {
+  0% {
+    bottom: -150px;
   }
-  .card .ds-info .ds:nth-of-type(1) {
-    animation-delay: 1s;
+  100% {
+    bottom: 10px;
   }
-  .card .ds-level {
-    /* position: absolute; */
-    margin:75px auto -60px auto;
-    bottom: 0;
-    right: 0;
-    left: 0;
-    width: 80%;
-    height: 150px;
-    animation: mvBottom 1.5s;
+}
+
+@keyframes mvTop {
+  0% {
+    top: -150px;
   }
-  .card .ds-level h1 {
-    margin-bottom: 5px;
-    font-weight: 700;
-    text-transform: uppercase;
-    color: rgb(255, 255, 255);
-    font-size: 18px;
+  100% {
+    top: 40px;
   }
+}
 
-  .card .ds-level h1:hover {
-    color: crimson;
+@keyframes dsTop {
+  0% {
+    top: -150px;
   }
+  100% {
+    top: 0;
+  }
+}
 
-  .card .ds-level .skill h1 {
-    font-weight: 400;
-    font-size: 12px;
-    letter-spacing: 0.05em;
-    margin: 4px 0;
-    color: white;
+@media (max-width: 768px) {
+  .card {
+    width: 80%; 
+    height: auto; 
   }
   
-  .card .ds-level .skill .fab {
-    color: crimson;
-    font-size: 14px;
-  }
-  .card .ds-level .skill .bar {
-    height: 5px;
-    background: crimson;
-    text-align: right;
-  }
-  .card .ds-level .skill .bar p {
-    color: white;
-    font-size: 12px;
-    padding-top: 5px;
-    animation: fadeIn 5s;
-  }
-  .card .ds-level .skill .bar:hover {
-    background: white;
-  }
-  .card .ds-level .skill .bar-level {
-    /* width: 49%; */
-    animation: levelAnimate 1s;
-    animation-delay: 0.4s;
+  .ds-top {
+    width: 100%; 
   }
   
-  @keyframes fadeInMove {
-    0% {
-      opacity: 0;
-      left: -300px;
-    }
-    100% {
-      opacity: 1;
-      left: 0;
-    }
+  .avatar-holder {
+    top: 20px;
   }
-  @keyframes fadeIn {
-    0% {
-      opacity: 0;
-    }
-    100% {
-      opacity: 1;
-    }
-  }
-  @keyframes levelAnimate {
-    0% {
-      width: 0;
-    }
-    100% {
-      width: '<?php echo $progress; ?>%';
-    }
+  
+  .name {
+    top: 10px; 
   }
-
-  @keyframes mvBottom {
-    0% {
-      bottom: -150px;
-    }
-    100% {
-      bottom: 10px;
-    }
+  
+  .button {
+    top: 10px; 
   }
-  @keyframes mvTop {
-    0% {
-      top: -150px;
-    }
-    100% {
-      top: 40px;
-    }
+  
+  .ds-info {
+    top: 80px; 
   }
-  @keyframes dsTop {
-    0% {
-      top: -150px;
-    }
-    100% {
-      top: 0;
-    }
+  
+  .ds-info .achievements,
+  .ds-info .projects,
+  .ds-info .quest {
+    left: 0; 
+    width: 100%; 
   }
 
-  @media (max-width: 768px) {
-    .card {
-      width: 80%; 
-      height: auto; 
-    }
-    
-    .ds-top {
-      width: 100%; 
-    }
-    
-    .avatar-holder {
-      top: 20px;
-    }
-    
-    .name {
-      top: 10px; 
-    }
-    
-    .button {
-      top: 10px; 
-    }
-    
-    .ds-info {
-      top: 80px; 
-    }
-    
-    .ds-info .achievements,
-    .ds-info .projects,
-    .ds-info .quest {
-      left: 0; 
-      width: 100%; 
-    }
-
-  }
+}
 
-  .following {
-    color: white;
-    background: crimson;
-  }
\ No newline at end of file
+.following {
+  color: white;
+  background: crimson;
+}
\ No newline at end of file