/* Reset */
*{margin:0;padding:0;box-sizing:border-box;}
body{font-family:'Crimson Text', serif;background:#0d0d0d;color:#eee;scroll-behavior:smooth;}
a{text-decoration:none;color:inherit;}
ul{list-style:none;}

/* Scroll Progress */
#progress{position:fixed;top:0;left:0;height:5px;background:#8b0000;width:0%;z-index:1000;transition:0.2s;}

/* Navbar */
header{position:fixed;top:0;left:0;width:100%;display:flex;justify-content:space-between;align-items:center;padding:1rem 2rem;background:rgba(0,0,0,0.85);z-index:999;backdrop-filter:blur(8px);}
.logo{font-family:'Cinzel Decorative', serif;font-size:1.8rem;color:#8b0000;}
nav ul{display:flex;gap:2rem;}
nav ul li a{font-weight:500;transition:0.3s;}
nav ul li a:hover{color:#ff4500;}
.menu-toggle{display:none;font-size:1.5rem;background:none;border:none;cursor:pointer;color:#eee;}

/* Hero */
.hero{height:100vh;display:flex;justify-content:center;align-items:center;text-align:center;background:#1a1a1a url('assets/bg.jpg') center/cover no-repeat;position:relative;}
.hero-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.7);}
.hero-content{position:relative;z-index:1;color:#eee;}
.hero h1{font-family:'Cinzel Decorative', serif;font-size:3rem;margin-bottom:1rem;}
.hero span{color:#ff4500;}
.hero p{font-size:1.2rem;margin-bottom:2rem;}
.btn{padding:0.8rem 2rem;border:none;border-radius:50px;background:#8b0000;color:#fff;font-weight:600;cursor:pointer;transition:0.3s;}
.btn:hover{transform:scale(1.05);background:#ff4500;}

/* Sections */
section{padding:6rem 2rem;}
section h2{font-family:'Cinzel Decorative', serif;font-size:2.5rem;text-align:center;margin-bottom:2rem;color:#ff4500;}

/* About */
.about{display:flex;flex-wrap:wrap;justify-content:center;gap:2rem;align-items:center;}
.about img{width:250px;border-radius:20px;border:3px solid #ff4500;}
.bio{max-width:600px;font-size:1.1rem;line-height:1.6;text-align:justify;}

/* Skills */
.skill-container{display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;}
.skill-card{background:#1a1a1a;border:2px solid #8b0000;color:#fff;padding:1rem 2rem;border-radius:15px;font-weight:600;transition:0.3s;cursor:pointer;}
.skill-card:hover{transform:scale(1.1);border-color:#ff4500;}

/* Projects */
.project-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:2rem;}
.project-card{background:#1a1a1a;border:2px solid #8b0000;border-radius:15px;padding:1rem;text-align:center;transition:0.3s;}
.project-card:hover{border-color:#ff4500;transform:scale(1.05);}
.clock-box{font-family:'Cinzel Decorative', serif;font-size:2rem;margin:1rem 0;}

/* Contact */
.contact form{max-width:600px;margin:0 auto;display:flex;flex-direction:column;gap:1rem;}
.contact input,.contact textarea{padding:0.8rem;border-radius:10px;border:1px solid #555;background:#0d0d0d;color:#eee;font-size:1rem;}
.contact button{align-self:flex-start;}

/* Footer */
footer{text-align:center;padding:2rem;background:#0d0d0d;color:#ff4500;font-weight:500;}

/* Responsive */
@media(max-width:768px){
  nav ul{display:none;flex-direction:column;background:rgba(0,0,0,0.95);position:absolute;top:100%;right:0;width:200px;padding:1rem;border-radius:10px;}
  nav ul.show{display:flex;}
  .menu-toggle{display:block;}
  .about{flex-direction:column;text-align:center;}
}
* {
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.btn {
  padding: 0.8rem 2rem;
  border: none;
  border-radius: 50px;
  background: #8b0000;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(0.4,0,0.2,1), background 0.4s ease;
}

.btn:hover {
  transform: scale(1.1);
  background: #ff4500;
  box-shadow: 0 0 20px rgba(255, 69, 0, 0.6);
}

.skill-card {
  background: #1a1a1a;
  border: 2px solid #8b0000;
  padding: 1rem 2rem;
  border-radius: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

.skill-card:hover {
  transform: scale(1.1) rotateX(5deg);
  border-color: #ff4500;
  box-shadow: 0 0 20px rgba(255,69,0,0.5);
}

.project-card {
  background: #1a1a1a;
  border: 2px solid #8b0000;
  border-radius: 15px;
  padding: 1rem;
  text-align: center;
  transition: transform 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

.project-card:hover {
  transform: scale(1.05) rotateY(3deg);
  border-color: #ff4500;
  box-shadow: 0 0 30px rgba(255,69,0,0.5);
}
nav ul {
  display: flex;
  flex-direction: column;
  background: rgba(0,0,0,0.95);
  position: absolute;
  top: 100%;
  right: 0;
  width: 200px;
  padding: 1rem;
  border-radius: 10px;
  transform: translateY(-20px);
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

nav ul.show {
  transform: translateY(0);
  opacity: 1;
}
/* Default (Light) */
body {
  background-color: #f5f5f5;
  color: #111;
  transition: background 0.5s, color 0.5s;
}

/* Dark Mode Palette */
body.dark-mode {
  background-color: #0d0d0d;
  color: #eaeaea;
}

/* Example for other elements */
header, footer, .project-card, .skill-card {
  transition: background 0.5s, color 0.5s;
}

body.dark-mode header,
body.dark-mode footer {
  background-color: #1a1a1a;
}

body.dark-mode .project-card,
body.dark-mode .skill-card {
  background-color: #111;
  border: 1px solid #444;
}
body {
  transition: background-color 0.8s ease, color 0.8s ease;
}