/* importing a font from google fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

/* reset default body margins and padding for consistency */
body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* don't show content that extends horizontally outside the element's box */
  font-family: 'Inter', sans-serif;
}

/* styling for anchor/link elements */
a {
  text-decoration: none; /* gets rid of underlines on text */
  transition: color 0.3s ease;
  /* default link color */
  color: black;
}

/* main container that wraps all page content */
.container {
  max-width: 1500px;  /* limits total content width on big screens */
  margin: 0 auto;    /* centers the container horizontally */
  padding: 0 2rem;  /* for extra spacing */
}

/*
  main formatting class used on the projects page
  creates centered layout
*/
.main-format { /* using on the projects page */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center; /* center align all text */
  gap: 1.5rem; /* for spacing*/
}

/*
  Secondary formatting class used on about and contact pages. Similar to main format but with left aligned text
*/
.secondary-format { /* using on the about and contact pages */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: left;
  gap: 1.5rem;
}

/*creates a gradient border effect using border-image property */
.secondary-format h1 {
  border-bottom: 3px solid transparent;
  border-image: linear-gradient(90deg, #FF1493, #8330FF, #39FF14) 1;
}

/* used this to help with the circle design: https://www.youtube.com/watch?v=f97L1mcnLs8 */
.circle {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background-color: black;
    overflow: hidden; /* don’t show anything that goes outside of the circle's border*/
    border: 6px solid black;
}

/* style for images inside the circle */
.circle img {
/* make the image fill the entire container */
    width: 100%;
    height: 100%;
    object-fit: cover; /* scale the image so the entire circle is filled */
    position: relative;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);  /* used to center the image so the entire circle is filled */
}

.top-nav {
  display: flex;
  justify-content: flex-start;
  gap: 2rem;
  padding: 1.5rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/*had to look up how to do gradients with the transition */
.top-nav a::after {
  content: "";
  display: block;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #FF1493, #8330FF, #39FF14);
  transition: width 0.3s ease;
  margin-top: 4px;
  border-radius: 2px;
}

.top-nav a:hover::after {
  width: 100%;
}

.project-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* creates a responsive grid for the projects, minmax: minimum and maximum width of each column: */
    gap: 2rem;
}

.project {
  position: relative; /* needed for the pseudo-element */
  border-radius: 12px;
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: white;
  box-shadow: 0px 2px 8px rgba(0,0,0,0.2);
  height: 350px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  overflow: hidden;
}

/*gradient border effect for project cards using ::after pseudo-element */
/*I used chat gpt as help for this */
.project::after {
  content: '';
   /* Cover entire parent element */
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  border-radius: 12px;
  padding: 3px; /* controls thickness of gradient */
  background: linear-gradient(90deg, #FF1493, #8330FF, #39FF14); /* Gradient colors (same as navigation) */
  /*
      advanced masking technique:
      creates a "cutout" effect so gradient only shows as a border
    */
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: destination-out;
  mask-composite: exclude;
  /* start invisible */
  opacity: 0;
  /* fade in on hover */
  transition: opacity 0.3s ease;
  /* prevent the pseudo-element from interfering with mouse events */
  pointer-events: none;
}

.project:hover::after {
 /* show gradient border on hover */
  opacity: 1;
}

/* I had to look up how to do the hover animation */
.project:hover {
    transform: translateY(-8px); /* moves the project up slightly */
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.3); /* adds a stronger shadow when hovered */
}

/* contact form styling */
form {
/* stack form elements vertically */
  display: flex;
  flex-direction: column;
  width: 100%;
  /* to prevent overly wide forms on large screens */
  max-width: 600px;
}


/* layout for phones*/
@media (max-width: 768px) { /* stack navigation items vertically on mobile */
  .top-nav {
    flex-direction: column;
    align-items: center;
    gap: 1rem;
  }

  .project-grid {
    grid-template-columns: 1fr; /* stack projects vertically on mobile */
  }

/* reduce container padding*/
  .container {
    padding: 0 1rem;
  }

/* smaller profile image */
  .circle {
    width: 150px;
    height: 150px;
  }
}