/*Some parts of this CSS file and lots of measurement values are done with the help of AI, since I admit that I am not quite experienced with CSS itself.*/

@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&display=swap');
body {
  margin: 0;
  background: #000;
  color: #fff;
  font-family: 'Courier Prime', monospace;
  line-height: 1.5;
}

/*Subtle link color.*/
a { color: #fff; text-decoration: none; }

/*
  Center content and type width limit.
  - width: 90% for small screens, max-width: 900px for large screens
  - margin: auto horizontally centers the element
  - padding gives vertical breathing room
*/
.center-align { width: 90%; max-width: 900px; margin: auto; padding: 2rem 0; }

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 0;
}

/*Navigation links spacing and hover state*/
nav a { margin-left: 1rem; opacity: .8; }
nav a:hover { opacity: 1; }

/*Subtle section separators*/
section { padding: 4rem 0; border-bottom: 1px solid #333; }

/*HERO SECTION*/
.me h1 {
  font-size: 3rem;
  margin: 0 0 .5rem 0;
  font-weight: 700;
}
.me p { max-width: 72ch; opacity: .8; }

/*ABOUT SECTION*/
.about {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.about img {
  width: 256px;
  height: 256px;
  object-fit: cover;
  border-radius: 4px;
  background-color: white;
}
.about p { max-width: 50ch; }

/*PROJECTS*/
.projects-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: 200px;
  gap: 1rem;
}
.project img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 4px;
}

/*Hierarchical layout
  - .tall spans 2 rows
  - .wide spans 2 columns
  - .big spans both 2 columns and 2 rows
*/
.project.tall { grid-row: span 2; }
.project.wide { grid-column: span 2; }
.project.big { grid-column: span 2; grid-row: span 2; }

.project {
  position: relative; /* allows overlay to be positioned over the image */
  overflow: hidden;   /* hide overflow when overlay moves */
}

/*Hover effect*/
.project .overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;                 /* hide by default */
  transition: opacity 0.3s ease; /* smooth fade-in */
  text-align: center;
}

.project:hover .overlay {
  opacity: 1; /* appear on hover */
}

.project .overlay .title {
  font-size: 1.2rem;
  font-weight: bold;
  padding: 0 1rem;
}

/*CONTACT SECTION*/
.contact-info p { opacity: .8; }

/*centered text, small type, and reduced opacity for subtlety*/
footer {
  padding: 2rem 0;
  text-align: center;
  font-size: .8rem;
  opacity: .6;
}