*{
  font-family: "Recursive", monospace;
  font-weight: 400;
}

html {
  background-color: #111; /* Dark background for contrast */
  /* Subtle dot pattern */
  background-image: radial-gradient(circle at 1px 1px, #333 1px, transparent 0);
  background-size: 20px 20px;
  min-height: 100vh;
  overflow-y: scroll;
}

/* test */
body {
  /* Rest of your existing styles */
  min-height: 100vh;
  box-sizing: border-box;
  margin: 0 auto;
  background-color: black;
  color: white;
  max-width: min(80ch, 100%);
  padding: 1.5rem;
  box-shadow: 0 0 30px rgb(0, 0, 0),
              0 0 60px rgb(0, 0, 0);
  position: relative;
  z-index: 999;
}


  /* .navbar ul{              backup
    list-style-type: none;
    padding: 0px;
    margin: 0px;
    overflow: hidden;
    text-align: center;
  }

  .navbar li{
    display: inline-block;
    border: 3px white;
    border-style: solid;
    margin: 0;
    padding: 0px;
  }


  .navbar a{
    color: white;
    text-decoration: none;
    padding: 10px 15px;
    display: inline-block;
  }

  .navbar a:hover{
    color: cadetblue;
  } */

/* Hamburger menu button - hidden by default */
.hamburger {
  display: none;
  cursor: pointer;
  padding: 10px 15px;
  border: 3px solid white;
  text-align: left;
}

.navbar {
  width: 100%;
  max-width: min(80ch, 100%);
  margin: 0 auto;
  padding: 0 1.5rem;
  box-sizing: border-box;
}

.navbar ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex; /* Use Flexbox for layout */
  justify-content: space-between; /* Distribute items evenly with equal spacing */
  border: 3px solid white; /* Add a border around the entire navbar */
  max-width: min(80ch, 100%);
  width: 100%;
  margin: 0 auto;
  box-sizing: border-box;
}

.navbar li {
  flex: 1; /* Each list item takes up an equal amount of space */
  text-align: center; /* Center the text inside each list item */
  border-right: 3px solid white; /* Add a vertical divider between items */
}

.navbar li:last-child {
  border-right: none; /* Remove the border from the last item */
}

.navbar a {
  color: white;
  text-decoration: none;
  padding: 10px 15px;
  display: block; /* Make the anchor tag fill the entire list item */
}

.navbar a:hover {
  color: cadetblue;
}

.container{
  /* text-align: center;
  margin: auto;  
  overflow: hidden; */
  text-align: center;
  margin: 10rem 0;
}

.blog-container{
  /* text-align: center;
  margin: auto;  
  overflow: hidden; */
  text-align: center;
  margin: 3rem 0;
}


.para p{
  padding-left: 10px;
}

  h3.text {
    /* display: inline-block; */
    border: 3px white;
    border-style: solid;
    padding: 15px
  }

  p.test {
    white-space: pre-wrap;       /* Allows wrapping of text */
    overflow-x: auto;            /* Adds horizontal scroll only when needed */
    max-width: 100%;            /* Ensures it doesn't exceed container width */
    border-radius: 4px;         /* Optional: aesthetics */
    text-align: left;
  }

.images img {
  height: 100%;
  width: 100%;
  object-fit: contain;
  
}
  

  /* Media query for mobile devices */
@media screen and (max-width: 768px) {
  .navbar ul {
    display: none; /* Hide the regular menu */
    flex-direction: column; /* Stack items vertically when shown */
    border: none;
  }

  .navbar {
    padding: 0; /* Removes horizontal padding on mobile */
  }
  
  .navbar li {
    border-right: none;
    border-bottom: 3px solid white;
    text-align: left;
  }
  
  .navbar li:last-child {
    border-bottom: none;
  }
  
  .hamburger {
    display: block; /* Show hamburger button */
  }
  
  .navbar.active ul {
    display: flex; /* Show menu when active */
    border: 3px solid white;
    border-top: none;
  }
}

hr{
  margin: 50px auto;
}

/* portfolio page */

/* in portfolio.css */


/* contact me style */

/* Contact Page Styles */
.contact-container {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 20px;
  text-align: center;
}

.contact-container h1 {
  font-size: clamp(2.2rem, 6vw, 3.5rem);
  font-weight: 800;
  margin-bottom: 1rem;
  margin-top: 0;
  letter-spacing: 1.5px;
  background: linear-gradient(90deg, cadetblue, #7fffff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  display: inline-block;
  text-shadow: 0 0 10px rgba(95,158,160,0.3);
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
  margin-top: 2rem;
}

.contact-card {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 2rem;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  cursor: pointer;
  color: white;
  text-decoration: none;
  position: relative;
  display: block;
}

.contact-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  background: rgba(255, 255, 255, 0.1);
}

.contact-icon {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  color: cadetblue;
}

.contact-card h3 {
  margin-bottom: 1rem;
  font-size: 1.3rem;
}

.contact-card p {
  margin: 0;
  color: white;
}

.copy-message {
  font-size: 0.8rem;
  color: cadetblue;
  margin-top: 0.5rem;
  display: block;
}

/* Responsive adjustments */
@media screen and (max-width: 768px) {
  .contact-grid {
      grid-template-columns: 1fr;
      gap: 20px;
  }
  
  .contact-card {
      padding: 1.5rem;
  }
} 

/* --- Blog Specific Styles --- */

/* Container for the blog index section on index.html */
.blog-index-section {
  margin-top: 3rem; /* Space below the HR */
}

.blog-index-section h2 {
  text-align: center;
  margin-bottom: 2rem;
  border-bottom: 3px solid white; /* Match your contact h1 style */
  padding-bottom: 0.5rem;
  display: inline-block; /* Fit border to text */
  width: auto; /* Allow inline-block width */
  margin-left: auto; /* Center inline-block */
  margin-right: auto; /* Center inline-block */
}

/* Style for the list of blog posts */
.blog-post-list {
  list-style: none; /* Remove default bullets */
  padding: 0;
  margin: 0;
}

.blog-post-list li {
  border: 1px solid rgba(255, 255, 255, 0.1); /* Subtle border */
  border-radius: 8px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  background: rgba(255, 255, 255, 0.03); /* Slight background */
  transition: background 0.3s ease;
}

.blog-post-list li:hover {
  background: rgba(255, 255, 255, 0.07); /* Slightly more visible on hover */
}

.blog-post-list li a {
   color: white; /* Link color */
   text-decoration: none; /* Remove underline */
}

.blog-post-list li a:hover {
   color: cadetblue; /* Hover color */
   text-decoration: none;
}


.blog-post-list h3.blog-post-title {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-size: 1.4rem;
}

.blog-post-list p.blog-post-meta {
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.7); /* Dimmer text for meta info */
  margin-top: 0;
  margin-bottom: 0.5rem;
}

.blog-post-list p.blog-post-tags {
   font-size: 0.8rem;
   color: cadetblue;
   margin-top: 0.5rem;
}


/* Styles for the content within individual blog post pages */
.blog-post-content {
  margin-top: 3rem; /* Add spacing above the post content */
  line-height: 1.6; /* Improve readability */
  font-size: 1.1rem; /* Slightly larger text */
  padding: 0 1.5rem;
  text-align: left;
}

.blog-post-content h1 {
  margin-bottom: 0.5em;
  border-bottom: 3px solid white; /* Match your contact h1 */
  padding-bottom: 0.5rem;
  display: inline-block; /* Fit border to text */
  width: auto;
  margin-left: auto;
  margin-right: auto;
}

.blog-post-content h2 {
  margin-top: 1.8em;
  margin-bottom: 0.8em;
  font-size: 1.6rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2); /* Subtle separator */
  padding-bottom: 0.3em;
}

.blog-post-content h3 {
   margin-top: 1.5em;
   margin-bottom: 0.6em;
   font-size: 1.3rem;
}

.blog-post-content p {
  margin-bottom: 1.2em;
}

.blog-post-content ul,
.blog-post-content ol {
  margin-bottom: 1.2em;
  padding-left: 30px; /* Indent lists */
}

.blog-post-content li {
   margin-bottom: 0.6em;
   line-height: 1.5;
}

.blog-post-content code {
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  background-color: rgba(255, 255, 255, 0.07);
  padding: 0.2em 0.4em;
  border-radius: 4px;
}

.blog-post-content pre {
  background-color: rgba(255, 255, 255, 0.07);
  padding: 1em;
  border-radius: 8px;
  overflow-x: auto; /* Add horizontal scroll for code blocks */
  margin-bottom: 1.2em;
}

.blog-post-content pre code {
  background-color: transparent; /* Code inside pre should not have background */
  padding: 0;
}

.blog-post-content blockquote {
  border-left: 4px solid cadetblue;
  padding-left: 1em;
  margin-left: 0;
  font-style: italic;
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 1.2em;
}

.blog-post-content hr {
  margin: 2em auto; /* Space around HR within content */
  border: none;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

/* Responsive adjustments for blog content */
@media screen and (max-width: 768px) {
  .blog-post-content {
      margin-top: 2rem;
      font-size: 1rem;
  }

   .blog-post-list li {
       padding: 1rem;
       margin-bottom: 1rem;
   }

  .blog-post-list h3.blog-post-title {
      font-size: 1.2rem;
  }

   .blog-post-content h1 {
       font-size: 1.8rem;
   }

   .blog-post-content h2 {
       font-size: 1.4rem;
   }
}

.blog-image {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 1rem 0;
}

.post-content img {
  display: block;
  margin: 1.5rem auto;
  max-width: 100%;
  height: auto;
}

/* Syntax highlighting for code blocks */
pre[class*="language-"] {
  position: relative;
  padding: 1.5em !important;
  margin: 1.5em 0;
  overflow: auto;
  border-radius: 8px;
}

code[class*="language-"] {
  font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
  font-size: 0.9em;
  line-height: 1.5;
}

.backlink a {
  text-decoration: underline;
  color: white;
}

.backlink a:hover{
  text-decoration: underline;
  color: cadetblue;
}

/* --- SECTION FOR BLOG IMAGE GRID --- */
.blog-image-grid {
  display: grid;
  /* Arrange in columns, auto-fitting as many as possible with a minimum width */
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* Adjust minmax width as needed */
  gap: 15px; /* Space between images */
  margin: 1.5rem 0; /* Space above/below the grid */
  /* To center the grid within the content area,
     make the grid a block element and use margin: auto,
     but it's often easier if it naturally fills its container width */
  /* Optional: background: rgba(255, 255, 255, 0.05); padding: 10px; border-radius: 8px; */
}

/* Style images *within* the grid */
.blog-image-grid img {
  width: 100%; /* Make images fill their grid cell */
  height: auto; /* Maintain aspect ratio */
  /* Inherit or set object-fit, contain matches your existing style */
  object-fit: contain;
  display: block; /* Ensure margin: auto works if centering individual images */
  margin: 0 auto; /* Center image within its grid cell */
  border-radius: 4px; /* Optional: slight rounding */
}
/* -------------------------------------------- */