/* Locally hosted web font */
@font-face {
  font-family: "space_monoregular";
  src: url("SpaceMono-Regular-webfont.eot");
  src:
    url("SpaceMono-Regular-webfont.eot?#iefix") format("embedded-opentype"),
    url("SpaceMono-Regular-webfont.woff2") format("woff2"),
    url("../assets/fonts/SpaceMono-Regular-webfont.woff") format("woff"),
    url("SpaceMono-Regular-webfont.ttf") format("truetype"),
    url("SpaceMono-Regular-webfont.svg#space_monoregular") format("svg");
  font-weight: normal;
  font-style: normal;
}

/* Locally hosted web font */
@font-face {
  font-family: "space_monoitalic";
  src: url("SpaceMono-Italic-webfont.eot");
  src:
    url("SpaceMono-Italic-webfont.eot?#iefix") format("embedded-opentype"),
    url("SpaceMono-Italic-webfont.woff2") format("woff2"),
    url("../assets/fonts/SpaceMono-Italic-webfont.woff") format("woff"),
    url("SpaceMono-Italic-webfont.ttf") format("truetype"),
    url("SpaceMono-Italic-webfont.svg#space_monoitalic") format("svg");
  font-weight: normal;
  font-style: normal;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* Light theme colours (Light Mode) */
:root {
  --background-color: linear-gradient(
    130deg,
    #eee9e9 0%,
    #63738a 100%
  ); /* Gradient Background colour */
  --primary-color: #ededed; /* light gray colour*/
  --secondary-color: #b4d4ff; /*light blue colour*/
  --text-color: #1f1e1e; /* dark gray colour*/
  --para-color: #eef5ff; /* light blue colour */
  --skill-color: #d3e6ed; /* light blue-gray colour*/
  --toggle-color: #fff; /* white colour*/
  --nav-color: #656363; /* gray colour*/
}

/* Dark theme colours(Dark Mode) */
body.dark-theme {
  --background-color: linear-gradient(
    130deg,
    #474646 0%,
    #18182a 100%
  ); /* Gradient Background colour */
  --primary-color: #1e1e1e; /* dark gray colour */
  --secondary-color: #2980b9; /* blue colour */
  --text-color: #f0f0f0; /* */
  --para-color: #cccccc; /* light gray colour */
  --skill-color: #2d3748; /* dark blue colour*/
  --toggle-color: #fff; /* white color*/
}

header,
main,
footer {
  font-size: clamp(1rem, 1.3vw, 1.7rem);
}

html,
body {
  height: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* ensure footer sticks to bottom when content is short */
  background: var(--background-color);
  background-attachment: fixed; /* keep gradient fixed to viewport, not scrolling */
  font-family: "Space Mono", monospace; /* externally hosted web font */
  font-weight: 500;
}

/* To make sure header stays fixed to the top while scrolling */
header {
  position: sticky;
  top: 0;
  z-index: 1;
}

/* styles for the header content */
.header-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* styles for the logo image */
.logo img {
  width: 3rem;
  position: relative;
  z-index: 2; /*to stay above navigation bar, to be visible*/
}

/* Navigation menu styles */
nav {
  position: absolute; /*setting the position over the web content */
  top: 0;
  left: 0;
  height: 100vh; /* setting it to the full viewport height*/
  width: 100vw; /* setting it to the full viewport wifth */
  background-color: var(--primary-color);
  display: flex; /* to center the nav links*/
  align-items: center;
  justify-content: center;
  transform: translateX(-100%); /* to hide it off the screen to the left*/
  transition: transform 1s ease; /* for a smooth slide in animation from th left */
  z-index: 1; /* to make sure it's below the logo*/
}

/*to make the navigation active(visible) when menu is clicked*/
nav.active {
  transform: translate(0); /*the nav-bar will slide on screen in view  */
}

/* Nav list styles*/
nav ul {
  list-style: none;
  display: flex;
  flex-direction: column; /* To stack the items in th list*/
  gap: 2.2rem;
}

/*Navigation links styles*/
nav li a {
  text-decoration: none;
  font-family:
    "space_monoregular", monospace; /* locally hosted web font size */
  font-size: 3rem;
  color: var(--nav-color);
  text-transform: uppercase;
  transition: all 0.3s ease; /* for hover effects */
}

/* Nav hover */
nav li a:hover {
  color: var(--text-color); /* text will be changed when hovered */
}

/* menu toggle button styles */
.nav-toggle {
  font-family:
    "space_monoregular", monospace; /* locally hosted web font size */
  text-transform: uppercase;
  border: none; /* removes all border */
  font-size: 0.9rem;
  position: absolute; /* for it stay over the conent */
  right: 1rem;
  top: 1rem;
  cursor: pointer;
  z-index: 2; /* for to stay above navigation when its active*/
  color: var(--text-color);
  background: none;
}

.theme-toggle {
  display: none; /* to make the light-dark theme hiddin on mobile devices */
}

/* Introduction section styles */
.intro {
  padding: 1rem;
  margin-top: 1rem;
  width: 100%;
}

/* introduction content styles */
.intro-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; /* center vertically within main */
  gap: 1.5rem;
  max-width: 1100px; /* constrain content width for balance */
  margin: 0 auto;
  padding: 2rem 1rem;
}

/* styles for profile image */
.intro-content > img {
  width: 12rem; /* A fixed width */
  height: 12rem; /* A fixed height */
  border-radius: 100%; /*for the circular shape of the image */
  margin-top: 1.2rem;
  margin-bottom: 1.5rem;
  flex: 0 0 12rem; /* keep image size stable when side-by-side */
}

/* make the main area expand so footer stays at bottom */
main {
  flex: 1 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
}

/* ensure intro message and avatar are balanced */
.intro-message {
  flex: 1 1 45ch;
  min-width: 220px;
}

/* introduction message styles */
.intro-message {
  text-align: left;
}

/* introduction message Heading */
.intro-message h1 {
  font-family: "space_monoitalic", monospace; /*locally hosted web font */
  font-size: 1.8rem;
  line-height: 1.4; /*for spacing*/
  color: var(--toggle-color);
  margin-bottom: 1rem;
  text-align: left;
}

/* styles for the introductry paragraph  */
.intro-message p {
  font-size: 1.1rem;
  line-height: 1.5;
  letter-spacing: 0.09rem;
  color: var(--text-color);
  margin-top: 0.5rem;
}

/* Projects Section styles */
.projects {
  margin-top: 2rem;
  padding: 1rem;
}

/* Base grid for project cards so `gap` works across breakpoints */
.projects-container {
  margin-top: 1.5rem;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}

/* Projects header: center and use the same white color as other pages */
.projects-header {
  text-align: center;
  margin-bottom: 1rem;
}

.projects-header h1 {
  font-family: "space_monoitalic", monospace;
  font-size: 2rem;
  color: var(--toggle-color);
}

/* styling each video/image individually - unified responsive rules
     Use a fixed, balanced height per breakpoint so screen recordings
     with different aspect ratios don't appear stretched. Videos fill
     the container with `object-fit: cover` and are centered with
     `object-position: center`. The wrapper keeps consistent rounded
     corners via `border-radius` and `overflow:hidden`. */

.project-video {
  border-radius: 1rem;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.project-video video,
.project-image img {
  width: 100%;
  height: 17rem; /* base height for medium screens */
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Mobile (small screens) — slightly shorter videos */
@media (max-width: 599px) {
  .project-video video,
  .project-image img {
    height: 14rem;
  }
  .projects-container {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

/* Tablet / small desktop */
@media (min-width: 600px) and (max-width: 1023px) {
  .project-video video,
  .project-image img {
    height: 17rem;
  }
  .projects-container {
    grid-template-columns: repeat(auto-fit, minmax(420px, 1fr));
    gap: 2rem;
  }
}

/* Large desktop — slightly taller videos */
@media (min-width: 1024px) {
  .project-video video,
  .project-image img {
    height: 19rem;
  }
  .projects-container {
    grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
    gap: 2rem;
  }
}
.project-image {
  width: 100%;
}

/* styles for the actual videos and images (common properties only).
   Height is controlled by the responsive rules above to avoid conflicts. */
.project-video video,
.project-image img {
  width: 100%;
  display: block;
  border-radius: 1rem;
}

/* styles for the texts appearing(overlaying) on each card */
.project-text {
  position: absolute; /*for it to be above the each video, image media */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 1rem;
  opacity: 0; /* it is not visible until hovered on */
  transition: all 0.3s ease; /*  */
  background-color: rgba(
    0,
    0,
    0,
    0.9
  ); /* black color with a form of transparency */
  color: var(--primary-color);
  border-radius: 1rem;
}

/* to make text visible once it's been hovered on */
.project-card:hover .project-text {
  opacity: 1;
}

/* to make it visible on devices, that clicks or taps since hover(no effect on mobile devices) */
.project-card.touch-active .project-text {
  opacity: 1;
}

/* style for the project title */
.project-text h2 {
  font-family: "space_monoitalic", monospace;
  color: var(--para-color);
  font-size: 1.5rem;
  margin-top: 0;
  margin-bottom: 0.5rem;
}

/* style for the project description*/
.project-text p {
  font-weight: 600;
  color: var(--para-color);
  font-size: 1rem;
  margin-bottom: 1rem;
  line-height: 1.5;
}

/* styles for the projects external links container */
.links {
  display: flex;
  gap: 1rem;
}

/* styles for the links */
.links a {
  color: var(--secondary-color);
  text-decoration: none;
  font-size: 1.2rem;
}

/* About me section */
.aboutMe {
  display: flex;
  flex-direction: column; /*for stacking vertically*/
  align-items: center;
  margin: 3rem auto 1rem auto;
  padding: 1rem;
  width: 100%;
  max-width: 1200px;
}

/* styles for about me header */
.myBio h2 {
  font-family: "space_monoitalic", monospace; /*locally hosted web fonmt */
  font-size: 2rem;
  text-align: center;
  color: var(--toggle-color);
  margin-bottom: 1rem;
}

/* styles for the paragraph text */
.myBio p {
  font-size: 1.1rem;
  line-height: 1.5;
  letter-spacing: 0.09rem;
  color: var(--text-color);
  text-align: left;
}

/* styles for the second paragraph */
.myBio p:nth-of-type(2) {
  margin-top: 1rem;
}

/* styles for the image container */
.aboutMe-img {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}

/* styles the actual img */
.aboutMe-img img {
  width: 60%;
  border-radius: 1rem;
}

/*skills section*/
.Skills {
  display: flex;
  flex-direction: column;
  margin-top: 3rem;
  margin-bottom: 2rem;
  padding: 2rem 1rem;
  width: 100%;
  align-items: center;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
}

/*styles for skills container */
.mySkills {
  margin-bottom: 2rem;
  background-color: var(--skill-color);
  padding: 2rem 1.5rem;
  border-radius: 1rem; /* so the corners will be rounded*/
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* styles for the header */
.Skills h2 {
  font-family: "space_monoitalic", monospace; /* locally hosted webfont*/
  font-size: 2rem;
  color: var(--toggle-color);
  margin-bottom: 2rem;
  text-align: center;
}

/* styles for the skill list  */
.Skills ul {
  list-style: none; /*rem0val of bullet points */
  display: grid; /* using Grid layout*/
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 2.2rem; /*for space between them */
  color: var(--text-color);
  margin-bottom: 1rem;
}

/* styles for the items on the list */
.Skills ul li {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
}

/* styles for the icons */
.Skills ul li img {
  width: 1.5rem;
  height: 1.5rem;
}

/* style for the skill name */
.Skills ul li span {
  margin-top: 0.7rem;
  font-size: 0.9rem;
  color: var(--text-color);
}

/* Contact Me Section */
.contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 3rem; /* add spacing below the navbar */
  padding: 2rem 1rem;
}

.con-form {
  width: 100%;
  max-width: 30rem;
}

/* Contact header style */
.contact h2 {
  font-family: "space_monoitalic", monospace; /*locally hosted web fonts*/
  font-size: 2rem;
  color: var(--toggle-color);
  margin-bottom: 1rem;
  text-align: center;
}

/* contact paragraph style */
.contact p {
  font-size: 1.1rem;
  letter-spacing: 0.09rem; /* letter spacing between the letters */
  line-height: 1.5;
  color: var(--text-color);
  text-align: center;
}

/* Contact links styles  */
.Contact-me ul {
  list-style: none;
  display: flex; /* to make it horizontal*/
  justify-content: center;
  gap: 2.5rem;
  margin: 1.2rem 0;
}

/* Contact link icon */
.Contact-me ul li a img {
  width: 1.5rem; /* */
  height: 1.5rem;
}

/* form section */
.form-info {
  width: 100%;
  padding: 0.5rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* form label styles */
.form-info label {
  margin-bottom: 0;
  font-family: "space_monoitalic", monospace; /*locally hosted web font */
  color: var(--text-color);
}

/* styles for from input fields */
.form-info input,
.form-info textarea {
  width: 100%;
  min-height: 2.8rem;
  border: 2px solid var(--secondary-color); /*Blue border colour */
  border-radius: 0.5rem;
  font-family: "space_monoitalic", monospace;
  color: var(--text-color);
  padding: 1rem;
}

/*styles for text area */
.form-info textarea {
  height: 10rem;
  resize: none;
}

/* style for focus state for inputs */
.form-info input:focus,
.form-info textarea:focus {
  outline: none;
  border-color: var(--text-color);
}

/* style for the submit button container */
.form-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 1rem;
  width: 100%;
}

/* styles for the submit button */
.form-actions button {
  width: 100%;
  max-width: 15rem;
  height: 2.8rem;
  border: none;
  border-radius: 0.5rem; /*for rounded corners */
  font-family: "space_monoitalic", monospace; /*locally hosted web font */
  cursor: pointer;
  transition: all 0.4s ease;
}

/* Hover effect for the submit button */
.form-actions button:hover {
  transform: scale(1.3); /*for it to scale-up(grow) slightly */
  background-color: var(--para-color);
  color: var(--text-color);
}

/* footer section */
footer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 1rem;
  gap: 1rem;
}

/* Footer text styling */
footer p {
  font-family: "space_monoitalic", monospace;
  color: var(--para-color);
  font-size: 1rem;
  text-align: center;
}

/* Remove underline and active/focus UI for footer links */
footer a,
footer a:link,
footer a:visited {
  text-decoration: none;
  color: inherit; /* keep same color as surrounding text unless overridden */
}

footer a:hover,
footer a:focus,
footer a:active {
  text-decoration: none;
  outline: none;
  box-shadow: none;
}

/* Prevent tap highlight on mobile for footer links */
footer a {
  -webkit-tap-highlight-color: transparent;
}

/* media queries for different screen sizes */
/* for small mobile screens (max-width = 320px) */
@media (max-width: 20em) {
  /* to hide the dark mode toggle on small screens */
  .theme-toggle img {
    display: none;
  }

  /* form styles for smaller screens */
  .form-info input,
  .form-info textarea {
    width: 20rem;
    padding: 0.8rem;
    font-size: 1rem;
  }

  /* 2-column grid for very small mobile screens */
  .Skills ul {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* for tablet and mini laptop screens(min-width = 768px) and (max-width: 1024px) */
@media (min-width: 48em) and (max-width: 64em) {
  /* to make sure project card take 90% of screen width, centeting them */
  .project-card {
    width: 90%;
    margin: 0 auto;
  }

  /* reduce vertical gap between intro text and avatar on tablets */
  .intro-content {
    gap: 0.3rem;
  }

  /* reduce image margins for tablets to bring avatar closer to text and footer */
  .intro-content > img {
    margin-top: 0.3rem;
    margin-bottom: 0.2rem;
  }

  /* reduce padding on intro section for tablets */
  .intro {
    padding: 0.5rem;
  }

  /* styles for input and textarea for ths screens */
  .form-info input,
  .form-info textarea {
    width: 100%;
    height: 4rem;
    padding: 0.8rem;
    font-size: 1rem;
  }

  /* setting a specifc style for the textarea */
  .form-info textarea {
    height: 10rem;
    resize: none;
  }

  /* styles for the button size for this screen size */
  .form-actions button {
    width: 25rem;
    height: 3.3rem;
  }

  .Skills {
    margin-top: 7rem;
  }

  /* 3-column grid for tablet screens */
  .Skills ul {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* for large screens laptops/desktops (min-width = 1280px) */
@media (min-width: 80em) {
  /* styles for the dark mode toggle, only available on larger screens */
  .theme-toggle {
    display: flex;
    border: 2px solid var(--skill-color); /* border color around the button */
    background: none; /*to maeke the background transparent */
    border-radius: 1rem;
    padding: 0.13rem 0.3rem 0.1rem 0.3rem;
    transition: all 1s ease; /* transition effect it is interacted with */
    cursor: pointer;
  }

  .theme-toggle:hover {
    transform: translateY(-2px) scale(1.1); /*hover effect whenever it is hovered  */
  }

  /* style for the img */
  .theme-toggle img {
    width: 1.7rem;
    height: 1.2rem;
  }

  /* hiding the nav-toggle(menu) on larger screens */
  .nav-toggle {
    display: none;
  }

  /* styles for the nav */
  nav {
    position: relative; /*for positioning relative to the header */
    flex-grow: 1; /* for the nav to grow */
    height: auto;
    width: auto;
    background-color: transparent;
    transform: none; /* to remove andy slide-in effect present on mobile */
  }

  nav ul {
    flex-direction: row; /* to put them in a row */
    justify-content: center;
    align-items: center; /* vertically center all items including theme toggle */
    gap: 10rem;
  }

  nav li a {
    font-size: 0.9rem;
    color: var(--text-color);
    letter-spacing: 0.1rem;
    transition: all 1s ease; /*transition effect */
    display: inline-block;
  }

  nav li a:hover {
    color: var(--toggle-color); /*switches color when hovered on */
    transform: translateY(-2px) scale(1.1); /*move upwards and grows in scale when hovered on */
  }

  /* styles for intro content */
  .intro {
    padding: 2rem 5rem;
    margin-top: 2rem;
  }

  .intro-content {
    margin-top: 4rem;
    flex-direction: row; /* to display the text and image side by side */
    justify-content: center;
    gap: 3rem;
    /* using the animate css library (pulse) animation to achieve this effect on hover*/
    .intro-content:hover {
      animation: pulse 2s;
    }

    /* styles for the projects */
    .projects {
      margin-top: 4rem;
    }

    .projects-container {
      margin-top: 3rem;
      display: grid; /*using Grid layout */
      grid-template-columns: repeat(auto-fit, minmax(600px, 1fr));
      gap: 2rem;
    }

    /* styling each video/image individually */
    .project-card:nth-of-type(1) video,
    .project-card:nth-of-type(2) video,
    .project-card:nth-of-type(3) video {
      width: 80%;
      margin: 0 auto;
      height: 17rem;
      object-fit: cover;
      border-radius: 1rem;
    }

    .project-card img {
      width: 81%;
      height: 17rem;
      border-radius: 1.5rem;
      object-fit: cover;
    }

    /* for the adjustmest of the each text on the individual projects  */
    .project-card:nth-of-type(1) .project-text {
      left: 4rem;
      width: 75%;
    }

    .project-card:nth-of-type(2) .project-text {
      width: 80%;
    }

    .project-card:nth-of-type(3) .project-text {
      left: 4rem;
      width: 75%;
    }

    .project-card:nth-of-type(4) .project-text {
      width: 82%;
    }

    /* about me section */
    .aboutMe {
      margin-top: 5rem;
      max-width: 1100px;
      margin-left: auto;
      margin-right: auto;
    }

    .myBio {
      text-align: center;
      margin-bottom: 2rem;
      padding: 2rem;
    }

    .myBio h2 {
      font-family: "space_monoitalic", monospace;
      font-size: 1.7rem;
    }

    .myBio p {
      font-size: 1.2rem;
      line-height: 2;
      margin-top: 1rem;
    }
    /* styles for the img */
    .aboutMe-img img {
      width: 70%;
      height: auto;
      border-radius: 1.5rem;
    }

    /* using the animate css library (pulse) animation to achieve this effect on hover*/
    .aboutMe-img img:hover {
      animation: pulse 2s;
    }

    /* skill section */
    .Skills {
      padding: 3rem 2rem;
      margin-top: 7rem;
      max-width: 1200px;
      margin-left: auto;
      margin-right: auto;
    }

    .mySkills {
      max-width: 900px;
      margin-left: auto;
      margin-right: auto;
      padding: 3rem 2rem;
    }

    /* using the animate css library (pulse) animation to achieve this effect on hover*/
    .mySkills:hover {
      animation: pulse 2s;
    }

    .Skills ul {
      grid-template-columns: repeat(5, 1fr); /*5 columns for desktop layout*/
      gap: 1.5rem;
      max-width: 700px;
      margin: 0 auto;
    }

    /* styles for the form input for larger screens */
    .form-info input,
    .form-info textarea {
      width: 100%;
      height: 4rem;
      padding: 0.8rem;
      font-size: 1rem;
    }

    /* styles for the textarea */
    .form-info textarea {
      height: 10rem;
      resize: none;
    }

    /* styles for the button */
    .form-actions button {
      width: 25rem;
      height: 3.3rem;
    }
  }

  /* media query for reduced motion(accessiblity) for browsers with this settings */
  @media (prefers-reduced-motion: reduce) {
    [data-aos] {
      animation: none !important;
      transition: none !important;
    }
  }
}

/* ================================
   About / Tech Skills refinements
   ================================ */
.aboutMe,
.Skills {
  width: min(100% - 2rem, 1100px);
  margin-left: auto;
  margin-right: auto;
}

.myBio {
  width: 100%;
  max-width: 900px;
}

.mySkills {
  width: 100%;
  max-width: 950px;
  padding: 1.5rem 1rem;
}

.Skills ul {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem 0.7rem;
  width: 100%;
  margin: 0;
}

.Skills ul li {
  min-width: 0;
  text-align: center;
}

.Skills ul li img {
  width: 1.7rem;
  height: 1.7rem;
  object-fit: contain;
}

.Skills ul li span {
  margin-top: 0.5rem;
  font-size: 0.7rem;
  line-height: 1.2;
  overflow-wrap: break-word;
}

/* Very small phones */
@media (max-width: 22em) {
  .Skills ul {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Tablet */
@media (min-width: 37.5em) and (max-width: 63.99em) {
  .mySkills {
    padding: 2rem 1.5rem;
  }

  .Skills ul {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.75rem 1rem;
  }

  .Skills ul li img {
    width: 2rem;
    height: 2rem;
  }

  .Skills ul li span {
    font-size: 0.8rem;
  }
}

/* Desktop: 5 skills per row */
@media (min-width: 64em) {
  .mySkills {
    padding: 2rem;
  }

  .Skills ul {
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .Skills ul li img {
    width: 2.25rem;
    height: 2.25rem;
  }

  .Skills ul li span {
    font-size: 0.8rem;
  }
}


/* ================================
   Mobile paragraph refinements
   Keep Home and About copy compact
   ================================ */
@media (max-width: 47.99em) {
  .intro-message,
  .myBio {
    width: 100%;
    max-width: 34rem;
    margin-left: auto;
    margin-right: auto;
  }

  .intro-message p,
  .myBio p {
    font-size: 0.95rem;
    line-height: 1.55;
    letter-spacing: 0.03rem;
  }

  .intro-message p {
    margin-top: 0.4rem;
  }

  .myBio p:nth-of-type(2) {
    margin-top: 0.8rem;
  }
}

/* Make project overlay text easier to read on smaller screens */
@media (max-width: 47.99em) {
  .project-text h2 {
    font-size: 1.6rem;
  }

  .project-text p {
    font-size: 1.05rem;
    line-height: 1.45;
  }

  .project-text .links a {
    font-size: 1.05rem;
  }
}


/* ================================
   Contact refinements
   Preserves the existing portfolio vibe
   ================================ */

.contact {
  width: min(100% - 2rem, 760px);
  margin: 3rem auto 2rem;
  padding: 2rem 1rem;
}

.Contact-me {
  width: 100%;
  max-width: 620px;
  text-align: center;
}

.contact p {
  max-width: 34rem;
  margin-left: auto;
  margin-right: auto;
  letter-spacing: 0.04rem;
}

.Contact-me ul {
  gap: 1.5rem;
  margin: 1.5rem 0 2rem;
}

.Contact-me ul li a img {
  width: 1.6rem;
  height: 1.6rem;
  transition: transform 0.25s ease;
}

.Contact-me ul li a:hover img {
  transform: translateY(-2px);
}

/* Keep the form clean without adding a separate card */
.con-form {
  width: 100%;
  max-width: 34rem;
}

.con-form form {
  width: 100%;
}

.form-info {
  padding: 0.45rem 0;
  gap: 0.4rem;
}

.form-info label {
  font-size: 0.9rem;
  font-family: "space_monoitalic", monospace;
}

.form-info input,
.form-info textarea {
  width: 100%;
  background: transparent;
  border: 1px solid var(--secondary-color);
  border-radius: 0.45rem;
  padding: 0.9rem 1rem;
  font-size: 0.95rem;
  font-family: "Space Mono", monospace;
  color: var(--text-color);
  transition:
    border-color 0.25s ease,
    background-color 0.25s ease;
}

.form-info input::placeholder,
.form-info textarea::placeholder {
  color: var(--text-color);
  opacity: 0.55;
}

.form-info input:focus,
.form-info textarea:focus {
  outline: none;
  border-color: var(--toggle-color);
  background-color: rgba(255, 255, 255, 0.06);
}

.form-info textarea {
  height: 8rem;
  min-height: 8rem;
  resize: vertical;
}

.form-actions {
  margin-top: 0.9rem;
}

.form-actions button {
  width: auto;
  min-width: 11rem;
  max-width: none;
  height: auto;
  padding: 0.8rem 1.2rem;
  border: 1px solid var(--secondary-color);
  border-radius: 0.45rem;
  background: transparent;
  color: var(--text-color);
  font-family: "space_monoitalic", monospace;
  font-size: 0.9rem;
  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    color 0.25s ease;
}

.form-actions button:hover {
  transform: translateY(-2px);
  background-color: var(--secondary-color);
  color: var(--text-color);
}

/* Mobile */
@media (max-width: 47.99em) {
  .contact {
    width: min(100% - 1.5rem, 38rem);
    margin-top: 2rem;
    padding: 1.5rem 0;
  }

  .contact h2 {
    font-size: 1.8rem;
  }

  .contact p {
    font-size: 0.95rem;
    line-height: 1.55;
    letter-spacing: 0.03rem;
  }

  .con-form {
    max-width: 100%;
  }

  .form-info input,
  .form-info textarea {
    width: 100%;
    font-size: 0.9rem;
  }

  .form-actions button {
    width: 100%;
  }
}


/* ================================
   Contact depth refinements
   Adds subtle dimension without changing the portfolio style
   ================================ */

.con-form {
  position: relative;
}

.con-form::before {
  content: "";
  position: absolute;
  inset: -1rem;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.8rem;
  pointer-events: none;
}

.form-info input,
.form-info textarea {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.form-info input:hover,
.form-info textarea:hover {
  border-color: var(--toggle-color);
}

.form-info input:focus,
.form-info textarea:focus {
  box-shadow:
    0 0 0 2px rgba(180, 212, 255, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.form-actions button {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.form-actions button:hover {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.Contact-me ul li a img {
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.1));
}

@media (max-width: 47.99em) {
  .con-form::before {
    inset: -0.7rem;
  }
}


/* ================================
   Project card refinements
   ================================ */

.project-card {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  transition:
    transform 0.3s ease,
    box-shadow 0.3s ease;
}

.project-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.16);
}

/* Slight video movement for more depth */
.project-video video {
  transition:
    transform 0.5s ease,
    filter 0.4s ease;
}

.project-card:hover .project-video video {
  transform: scale(1.035);
  filter: brightness(0.75);
}

/* Refine overlay without changing the existing layout */
.project-text {
  background-color: rgba(0, 0, 0, 0.82);
  backdrop-filter: blur(2px);
  transition: opacity 0.3s ease;
}

/* Project heading */
.project-text h2 {
  font-size: 1.65rem;
  letter-spacing: 0.03rem;
  margin-bottom: 0.6rem;
}

/* Project description */
.project-text p {
  max-width: 30rem;
  font-size: 1rem;
  line-height: 1.5;
  margin-bottom: 1.2rem;
}

/* Project links */
.project-text .links {
  display: flex;
  gap: 0.8rem;
}

.project-text .links a {
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--secondary-color);
  border-radius: 0.4rem;
  font-size: 0.9rem;
  transition:
    background-color 0.25s ease,
    color 0.25s ease,
    transform 0.25s ease;
}

.project-text .links a:hover {
  background-color: var(--secondary-color);
  color: var(--text-color);
  transform: translateY(-2px);
}

/* Mobile refinements */
@media (max-width: 47.99em) {
  .project-text {
    padding: 1.2rem;
  }

  .project-text h2 {
    font-size: 1.7rem;
  }

  .project-text p {
    font-size: 1.05rem;
    max-width: 24rem;
  }

  .project-text .links a {
    font-size: 0.95rem;
    padding: 0.5rem 0.75rem;
  }
}


/* ================================
   Projects showcase background
   ================================ */

.projects {
  position: relative;
  padding: 3rem 1rem;
  border-radius: 2rem;
}

.projects::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    135deg,
    rgba(180, 212, 255, 0.08),
    rgba(255, 255, 255, 0.02)
  );
  border-radius: 2rem;
  pointer-events: none;
}

.projects-header,
.projects-container {
  position: relative;
}

/* Keep the showcase treatment lighter on phones */
@media (max-width: 47.99em) {
  .projects {
    padding: 2rem 0.75rem;
    border-radius: 1.4rem;
  }

  .projects::before {
    border-radius: 1.4rem;
  }
}


/* Keep the slide-out navigation above project content */
header {
  z-index: 100;
}

.nav-toggle {
  z-index: 102;
}

nav {
  z-index: 101;
}