Update style.css

style.css

@@ -1,168 +1,176 @@
-/* Global Styles */
+/* Reset */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
 body {
   font-family: Arial, sans-serif;
+  line-height: 1.6;
   margin: 0;
-  padding: 0;
-  background: #f4f4f9; /* Latar belakang terang */
-  color: #333; /* Teks terang */
-  transition: all 0.3s ease; /* Haluskan transisi untuk perubahan */
+  background-color: white;
+  color: black;
+  transition: background-color 0.3s, color 0.3s;
 }
 
-/* Mode Gelap */
+/* Dark mode */
 body.dark-mode {
-  background-color: #333; /* Latar belakang gelap */
-  color: white; /* Teks putih untuk gelap */
+  background-color: #121212;
+  color: white;
 }
 
-/* Header */
 header {
-  background: #6200ea; /* Warna header terang */
-  padding: 15px;
+  background-color: purple;
   color: white;
+  padding: 1rem;
   text-align: center;
-  transition: background-color 0.3s ease; /* Haluskan perubahan warna latar */
+  position: relative;
 }
 
-header.dark-mode {
-  background-color: #444; /* Warna header saat mode gelap */
+header h1 {
+  font-size: 1.5rem;
 }
 
 header nav ul {
   display: flex;
   justify-content: center;
+  gap: 1rem;
   list-style: none;
-  padding: 0;
-}
-
-header nav ul li {
-  margin: 0 15px;
 }
 
 header nav ul li a {
   color: white;
   text-decoration: none;
-  font-size: 1.1rem;
-  transition: color 0.3s ease;
+  font-weight: bold;
 }
 
-header nav ul li a:hover {
-  color: #ffcc00; /* Warna saat hover */
-}
-
-/* Tombol Mode Gelap */
 #toggleDarkMode {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
   background: none;
   border: none;
-  color: white;
   font-size: 1.5rem;
   cursor: pointer;
-  padding: 5px 10px;
-  margin-left: 20px;
-}
-
-#toggleDarkMode:hover {
-  background-color: rgba(0, 0, 0, 0.1);
-  border-radius: 5px;
 }
 
 /* Section */
 section {
-  padding: 40px;
-  text-align: center;
-  opacity: 0;
-  animation: fadeIn 1s forwards; /* Animasi muncul */
+  padding: 1.5rem;
+}
+
+#skills ul {
+  list-style-type: disc;
+  margin-left: 1.5rem;
 }
 
-/* Kotak Project */
 .project {
-  border: 1px solid #ccc;
-  padding: 20px;
-  margin: 10px auto;
-  max-width: 500px;
-  border-radius: 10px;
-  background: #f9f9f9;
-  transition: transform 0.3s ease, background-color 0.3s ease; /* Tambahkan transisi untuk background */
+  margin-bottom: 1rem;
 }
 
-.project:hover {
-  transform: scale(1.05); /* Efek saat hover */
+/* Form */
+form input, form textarea, form button {
+  width: 100%;
+  margin: 0.5rem 0;
+  padding: 0.7rem;
+  border: 1px solid #ccc;
+  border-radius: 5px;
 }
 
-/* Mode Gelap - Kotak Project */
-body.dark-mode .project {
-  background: #444; /* Ubah latar belakang kotak saat mode gelap */
-  border-color: #666; /* Ubah warna border untuk mode gelap */
+/* Chat Footer */
+.chat-footer {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  background: purple;
+  color: white;
+  text-align: center;
+  padding: 1rem;
 }
 
-#chatbox {
-  margin-top: 20px;
-  padding: 10px;
-  border: 1px solid #6200ea;
+#chatButton {
+  background: white;
+  color: purple;
+  border: none;
+  padding: 0.5rem 1rem;
   border-radius: 5px;
-  display: none;
-  transition: all 0.3s ease;
+  cursor: pointer;
 }
 
-/* Mode Gelap - Chatbox */
-body.dark-mode #chatbox {
-  background-color: #444; /* Ubah latar belakang chatbox saat mode gelap */
-  color: white; /* Ubah warna teks menjadi putih */
-  border-color: #6200ea; /* Tetap pertahankan border berwarna ungu */
+#chatbox {
+  display: none;
+  margin-top: 1rem;
 }
 
-footer {
-  text-align: center;
-  padding: 10px;
-  background: #6200ea;
-  color: white;
+#chatbox.active {
+  display: block;
+  padding: 1rem;
+  background-color: #f4f4f4;
+  border-radius: 5px;
+  color: black;
 }
 
-/* Mode Gelap - Footer */
-body.dark-mode footer {
-  background-color: #444; /* Ubah warna footer saat mode gelap */
+/* Burger Menu for Mobile */
+.burger-menu {
+  display: none;
+  font-size: 1.5rem;
+  cursor: pointer;
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
 }
 
-footer p {
-  margin: 0;
+header nav ul {
+  flex-wrap: wrap;
 }
 
-/* Animasi Fade In */
-@keyframes fadeIn {
-  0% { opacity: 0; }
-  100% { opacity: 1; }
+header nav ul.active {
+  display: block;
+  flex-direction: column;
+  text-align: center;
 }
 
-/* Responsive Design untuk Layar Kecil (Mobile) */
+/* Media Queries */
 @media (max-width: 768px) {
+  header h1 {
+    font-size: 1.2rem;
+  }
+
   header nav ul {
+    display: none;
+  }
+
+  header nav ul.active {
+    display: flex;
     flex-direction: column;
+    background-color: purple;
+    position: absolute;
+    top: 3.5rem;
+    left: 0;
+    width: 100%;
+    padding: 1rem 0;
   }
 
-  header nav ul li {
-    margin-bottom: 10px;
+  .burger-menu {
+    display: block;
   }
 
   section {
-    padding: 20px;
+    padding: 1rem;
   }
 
-  .project {
-    max-width: 90%;
-    margin: 10px;
+  #skills ul {
+    margin-left: 1rem;
   }
 
-  #chatMessage {
-    font-size: 1rem;
+  .chat-footer {
+    font-size: 0.9rem;
+    padding: 0.8rem;
   }
-}
-
-/* Efek Halus untuk Tombol dan Links */
-button, a {
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
 
-button:hover, a:hover {
-  background-color: #6200ea;
-  color: white;
+  #chatButton {
+    font-size: 0.9rem;
+  }
 }