body {
     margin: 0; 
    font-family: Arial, sans-serif; 
    background: #f8f8f8;
 }
header {
     background: #333; 
    color: #fff;
     padding: 20px;
      text-align: center; 
    }
nav a { 
    color: #fff;
     margin: 0 10px;
      text-decoration: none; 
    }
main {
     max-width: 800px; 
     margin: 20px auto;
      background: #fff;
       padding: 20px;
        border-radius: 8px;
     }
section {
     margin-bottom: 40px;
     }
footer { 
    text-align: center; 
    padding: 10px;
     background: #222; 
     color: #bbb;
     }
body.dark {
     background: #222;
      color: #fff;
     }
main.dark { 
    background: #333;
 }
 h2 { border-bottom: 2px solid #333; padding-bottom: 8px; margin-bottom: 20px; }
.project { margin-bottom: 20px; }
.project a { color: #3366cc; text-decoration: none; }
.project a:hover { text-decoration: underline; }
form input, form textarea { width: 100%; padding: 8px; margin: 8px 0; box-sizing: border-box; }
form button { background-color: #333; color: #fff; border: none; padding: 10px 20px; cursor: pointer; }
form button:hover { background-color: #555; }

body {
  background: #f8f8f8;
  color: #000; /* Light mode text color */
  transition: background 0.3s, color 0.3s;
}

body.dark {
  background: #222;
  color: #fff; /* Dark mode text color */
}

main {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  color: #000;
  transition: background 0.3s, color 0.3s;
}

body.dark main {
  background: #333;
  color: #fff;
}

.darkmode{
     background-color: #333;
     color: white;
  width: 5%;
  border-radius: 100%;
  border: none;
  padding-top: 10px;
  padding-bottom: 10px;
  margin-top: 10px;
  margin-left: 10px;
  position: fixed;
  cursor: pointer;
  border-bottom: 2px solid #fff;

  
}

button:focus,button:active{
     outline: none;
     border-bottom: 2px solid #4caf50;

}

body.dark header{
     border-bottom: 2px solid #ccc;

}