Update newcss

newcss

@@ -3,28 +3,18 @@ body {
   font-family: Arial, sans-serif;
   margin: 0;
   padding: 0;
-  background: #f4f4f9; /* Latar belakang terang */
-  color: #333; /* Teks terang */
-  transition: all 0.3s ease; /* Haluskan transisi untuk perubahan */
-}
-
-/* Mode Gelap */
-body.dark-mode {
-  background-color: #333; /* Latar belakang gelap */
-  color: white; /* Teks putih untuk gelap */
+  background: #f4f4f9;
+  color: #333;
+  transition: all 0.3s ease;
 }
 
 /* Header */
 header {
-  background: #6200ea; /* Warna header terang */
+  background: #6200ea;
   padding: 15px;
   color: white;
   text-align: center;
-  transition: background-color 0.3s ease; /* Haluskan perubahan warna latar */
-}
-
-header.dark-mode {
-  background-color: #444; /* Warna header saat mode gelap */
+  position: relative;
 }
 
 header nav ul {
@@ -46,34 +36,21 @@ header nav ul li a {
 }
 
 header nav ul li a:hover {
-  color: #ffcc00; /* Warna saat hover */
+  color: #ffcc00;
 }
 
-/* Tombol Mode Gelap */
-#toggleDarkMode {
-  background: none;
-  border: none;
-  color: white;
+.burger-menu {
+  display: none;
   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 */
 }
 
-/* Kotak Project */
 .project {
   border: 1px solid #ccc;
   padding: 20px;
@@ -81,33 +58,11 @@ section {
   max-width: 500px;
   border-radius: 10px;
   background: #f9f9f9;
-  transition: transform 0.3s ease, background-color 0.3s ease; /* Tambahkan transisi untuk background */
+  transition: transform 0.3s ease;
 }
 
 .project:hover {
-  transform: scale(1.05); /* Efek saat hover */
-}
-
-/* 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 */
-}
-
-#chatbox {
-  margin-top: 20px;
-  padding: 10px;
-  border: 1px solid #6200ea;
-  border-radius: 5px;
-  display: none;
-  transition: all 0.3s ease;
-}
-
-/* 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 */
+  transform: scale(1.05);
 }
 
 footer {
@@ -117,29 +72,28 @@ footer {
   color: white;
 }
 
-/* Mode Gelap - Footer */
-body.dark-mode footer {
-  background-color: #444; /* Ubah warna footer saat mode gelap */
-}
-
-footer p {
-  margin: 0;
-}
-
-/* Animasi Fade In */
-@keyframes fadeIn {
-  0% { opacity: 0; }
-  100% { opacity: 1; }
-}
-
-/* Responsive Design untuk Layar Kecil (Mobile) */
+/* Responsive Styles */
 @media (max-width: 768px) {
   header nav ul {
+    display: none;
     flex-direction: column;
+    background: #6200ea;
+    position: absolute;
+    top: 60px;
+    right: 0;
+    width: 100%;
+    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2);
+  }
+
+  header nav ul.active {
+    display: flex;
   }
 
-  header nav ul li {
-    margin-bottom: 10px;
+  .burger-menu {
+    display: block;
+    position: absolute;
+    top: 20px;
+    right: 20px;
   }
 
   section {
@@ -148,21 +102,24 @@ footer p {
 
   .project {
     max-width: 90%;
-    margin: 10px;
+    margin: 10px auto;
   }
+}
 
-  #chatMessage {
-    font-size: 1rem;
+@media (max-width: 480px) {
+  body {
+    font-size: 14px;
   }
-}
 
-/* Efek Halus untuk Tombol dan Links */
-button, a {
-  cursor: pointer;
-  transition: all 0.3s ease;
-}
+  h1, h2 {
+    font-size: 1.5rem;
+  }
 
-button:hover, a:hover {
-  background-color: #6200ea;
-  color: white;
+  button, a {
+    font-size: 1rem;
+  }
+
+  footer {
+    font-size: 0.8rem;
+  }
 }