/* Reset & Base */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; background: #111; color: #fff; transition: background-color 0.4s, color 0.3s; }
a { color: #fff; text-decoration: none; }
a:hover { text-decoration: underline; color: #fff; }

/* Layout */
.flex { display: flex; }
aside { width: 250px; background: #1f1f1f; padding: 20px; flex-shrink: 0; }
main { flex: 1; padding: 30px; }

/* Sidebar */
aside img { border-radius: 50%; width: 120px; height: 120px; display: block; margin: 0 auto 15px auto; border: 2px solid #3b82f6; }
aside h1 { text-align: center; font-size: 22px; margin-bottom: 5px; }
aside p { text-align: center; color: #aaa; margin-bottom: 10px; }
aside .contact { margin-top: 20px; font-size: 14px; }
aside .contact p { margin-bottom: 5px; }
aside .download-cv { display: block; margin: 20px auto 0 auto; background: #3b82f6; padding: 10px; border-radius: 5px; text-align: center; }
aside .download-cv:hover { background: #2563eb; }

/* Sections */
section { margin-bottom: 40px; }
h2 { font-size: 20px; margin-bottom: 10px; border-bottom: 1px solid #444; padding-bottom: 5px; }

/* Skills */
.skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; }
.skills span { background: #2a2a2a; padding: 5px 8px; border-radius: 4px; text-align: center; font-size: 13px; }

/* Projects */
.projects { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; }
.project-card { background: #2a2a2a; padding: 15px; border-radius: 10px; transition: transform 0.3s; }
.project-card:hover { transform: scale(1.05); }
.project-card h3 { margin-bottom: 5px; }
.project-card p { font-size: 14px; color: #aaa; margin-bottom: 5px; }

/* Contact Form */
form { max-width: 400px; }
input, textarea { width: 100%; padding: 8px; margin-bottom: 10px; border-radius: 5px; border: none; font-size: 14px; }
button { background: #3b82f6; color: #fff; border: none; padding: 10px 15px; border-radius: 5px; cursor: pointer; }
button:hover { background: #2563eb; }

/* Footer */
footer { text-align: center; color: #666; font-size: 13px; margin-top: 50px; }

/* Responsive */
@media(max-width: 768px) { 
  .flex { flex-direction: column; } 
  aside { width: 100%; text-align: center; margin-bottom: 20px; } 
}

/* Light Mode */
#theme-toggle {
  padding: 10px 20px;
  margin: 10px auto;
  background-color: white;
  color: black;
  font-size: 12px;
  font-weight: bold;
} 
/* Modal Background */
.modal {
  display: none;
  position: fixed;
  z-index: 999;
  padding-top: 60px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
}

/* Modal Image */
.modal-content {
  margin: auto;
  display: block;
  max-width: 100%;
  max-height: 100%;
  border-radius: 10px;
}

/* Close Button */
.close {
  position: absolute;
  top: 20px;
  right: 40px;
  color: #fff;
  font-size: 35px;
  cursor: pointer;
}

/* Hover effect */
.clickable-img {
  cursor: pointer;
  transition: transform 0.3s;
}

.clickable-img:hover {
  transform: scale(1.05);
}

body.dark {
  background-color: white; color: black;}
body.dark span {color: white;}
body.dark h3 { color: white;}
body.dark input {border: 1px solid #666;}
body.dark textarea {border: 1px solid #666;}
body.dark h1 {color: white;}