styles.css

/* Custom styles */

/* Light mode styles (default) */
body {
  background-color: #fff;
  color: #000;
}

/* Custom header background color */
.custom-red-header {
  background-color: #0f104a; /* Adjusted to a deep blue color */
  color: #fff; /* White text color */
  position: sticky; /* Make the header sticky */
  top: 0; /* Stick to the top of the viewport */
  z-index: 1000; /* Ensure it is on top of other elements */
}

/* About Me section background color */
.about-section {
  background-color: rgb(230, 230, 240); /* Custom background color */
  color: black; /* Text color */
  padding: 20px;
  margin-top: 20px;
  border: 5px solid #6e9b5d;
}

/* Apply same background color for other sections */
.same-bg-color {
  background-color: #1f2937; /* Match the About Me section color */
  color: rgb(235, 230, 230); /* Text color */
  padding: 20px;
  margin-top: 20px;
}

/* Additional styles */
.card-body img {
  max-height: 100px; /* Adjust this value as needed */
  object-fit: cover; /* Ensures the image covers the given area */
  width: 100%;
}

.project-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background-color: #abc29fe1; /* Adjusted background color */
}

.project-image-container img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.project-details {
  flex: 1;
}

@media (max-width: 768px) {
  .project-container {
    flex-direction: column;
    align-items: center;
  }

  .project-image-container img {
    width: 50px;
    height: 200px;
  }

  .center-text h1 {
    text-align: center;
  }

  body {
    background-color: #1f2937; /* Match the background color of the About Me section */
    color: #fff; /* Default text color */
  }

  /* Style for the footer */
  footer {
    background-color: #cbd5e0; /* Different background color for the footer */
    color: #1a202c; /* Text color for the footer */
  }
}

/* Dark mode styles */
body.dark-mode {
  background-color: #1a202c; /* Dark background */
  color: #cbd5e0; /* Light text color */
}

.custom-red-header.dark-mode {
  background-color: #0f104a; /* Dark mode header color */
}

.about-section.dark-mode {
  background-color: #2d3748; /* Dark mode section color */
  color: #cbd5e0; /* Light text */
}

.same-bg-color.dark-mode {
  background-color: #2d3748; /* Dark mode background */
  color: #e2e8f0; /* Light text */
}

.project-container.dark-mode {
  background-color: #2d3748; /* Dark mode project container */
}

footer.dark-mode {
  background-color: #1a202c; /* Dark mode footer background */
  color: #cbd5e0; /* Light footer text */
}