/* Animated ASCII/code-inspired background */
body, html {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  font-family: 'Fira Mono', 'Consolas', 'Menlo', monospace;
  background: #181d26;
  color: #eaeaea;
  position: relative;
  overflow-x: hidden;
}

#bg-animation {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1;
  opacity: 0.6;
}

.bg{
    width: 100vw;
  height: 100vh;
  background-image: url(./assets/bg-img.jpg);
  background-size: cover;
  background-repeat: no-repeat;
}
/* Navigation bar */
nav {
  width: 100%;
  display: flex;
  background: rgba(24,29,38,0.93);
  box-shadow: 0 1px 8px #0a0c16b3;
  align-items: center;
}

nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
  padding: 0.5em 3em;
  margin: 0;
}

nav ul li a {
  color: #55b6fc;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.08em;
  padding: 0.4em 0.7em;
  border-radius: 4px;
  transition: background 0.2s;
}

nav ul li a:hover,
nav ul li a:focus {
  background: #2e354b;
  color: #87d6fd;
}

/* Header styling */
.intro-header {
  text-align: center;
  margin-top: 3.5em;
}

.intro-header h1 {
  font-size: 3.3em;
  font-weight: 900;
  letter-spacing: 2px;
  color: #fffaea;
}

.intro-header .subhead {
  background-color: #dac0e985;
  font-size: 1.32em;
  color: #1c0327;
  font-style: italic;
  letter-spacing: 1px;
}

/* Section cards */
.card {
  background: rgba(24, 29, 38, 0.744);
  max-width: 900px;
  margin: 2.7em auto 2.2em auto;
  border-radius: 18px;
  box-shadow: 0 2px 26px #11132555;
  padding: 2em 2.2em;
}

/* About Me */
.about-content {
  display: flex;
  align-items: flex-start;
  gap: 2.2em;
}

.profile-img {
  width: 280px;
  height: 280px;
  /* border-radius: 50%; */
  object-fit: cover;
  box-shadow: 0 3px 20px #4e677c38;
  margin-right: 25px;
}

/* Fast links under About */
.quick-links {
  margin-top: 1em;
  display: flex;
  gap: 1.3em;
}
.quick-links a {
  text-decoration: none;
  color: #53c3f7;
  font-weight: bold;
  transition: color .2s;
}
.quick-links a:hover { color: #f8d757; }

/* Project list grid and card styling */
.projects-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5em;
}
.project-card {
  background: #242b37dd;
  border-radius: 9px;
  padding: 1.2em;
  box-shadow: 0 1px 11px #22263be1;
  transition: transform .21s, box-shadow .21s;
  position: relative;
}
.project-card:hover {
  transform: translateY(-5px) scale(1.03);
  box-shadow: 0 7px 28px #5db0ff59;
}
.project-card h3 {
  margin-top: 0;
  color: #f7bc43;
  font-size: 1.3em;
  margin-bottom: 0.6em;
}
.tech-stack span {
  display: inline-block;
  background: #253d6d;
  color: #a0e5fc;
  margin: 0.13em;
  padding: 0.23em 0.9em;
  border-radius: 6px;
  font-size: .96em;
  font-family: 'Fira Mono', 'Consolas', monospace;
}

/* Skills Section: animated bar graphs */
.skills-bars {
  margin-top: 2em;
}
.skill-bar {
  margin: .7em 0;
  display: flex;
  align-items: center;
  font-size: 1.063em;
  gap: 1.5em;
}
.bar {
  height: 18px;
  border-radius: 7px;
  background: linear-gradient(90deg, #53c3f7, #f7bc43 60%, #ff646f 100%);
  width: 0;
  transition: width .9s;
}
.bar.python { width: 92%; }
.bar.js { width: 83%; }
.bar.java { width: 76%; }
.bar.flask { width: 81%; }
.bar.node { width: 75%; }
/* Add more skill bars/classes as needed */

/* Resume Button */
.resume-btn {
  background: #287cc6;
  color: #fff;
  font-weight: bold;
  padding: .95em 1.6em;
  border-radius: 8px;
  text-decoration: none;
  font-size: 1.12em;
  box-shadow: 0 2px 12px #063a5244;
  transition: background .22s;
  margin-top: 1.9em;
  display: inline-block;
}
.resume-btn:hover {
  background: #47c3f7;
  color: #242b37;
}

/* Contact Form */
#contactForm {
  display: flex;
  flex-direction: column;
  gap: 1.2em;
  max-width: 490px;
}
#contactForm label {
  display: flex;
  flex-direction: column;
  color: #fffaea;
  font-weight: bold;
  letter-spacing: .1em;
}
#contactForm input, #contactForm textarea {
  margin-top: .42em;
  padding: .7em;
  border-radius: 6px;
  border: none;
  background: #242b37;
  color: #fafafa;
  font-size: 1em;
}
#contactForm button {
  align-self: start;
  padding: .9em 1.5em;
  border-radius: 7px;
  font-weight: bold;
  background: #f7bc43;
  color: #292e36;
  border: none;
  cursor: pointer;
  transition: background .22s;
}
#contactForm button:hover {
  background: #53c3f7;
  color: #fff;
}

/* Responsive tweaks */
@media screen and (max-width: 780px) {
  .projects-list {
    grid-template-columns: 1fr;
  }
  .about-content {
    flex-direction: column;
    align-items: stretch;
    gap: 1.2em;
  }
  .card {
    padding: 1em 0.6em;
  }
}