body{
  margin:0;
  font-family:system-ui,-apple-system,sans-serif;

  background:
    radial-gradient(circle at 20% 20%,rgba(47,134,106,0.08),transparent 40%),
    radial-gradient(circle at 80% 10%,rgba(47,134,106,0.06),transparent 40%),
    #8c9699;

  color:white;
}
/* page heading */

h1{
  text-align:center;
  margin-top:40px;
  font-size:36px;
  letter-spacing:1px;
}


/* ---------------- PROJECT GRID ---------------- */

#projects-container{
  width:90%;
  max-width:1300px;
  margin:40px auto;
}


/* ---------------- PROJECT CARD ---------------- */

.project-card{

  position:relative;

  background:#151a17;
  border-radius:16px;

  padding:24px;

  border:1px solid rgba(255,255,255,0.05);

  transition:all 0.25s ease;

  overflow:hidden;
}


/* halo glow */

.project-card::before{

  content:"";

  position:absolute;
  inset:-1px;

  border-radius:16px;

  background:radial-gradient(
      600px circle at var(--x) var(--y),
      rgba(47,134,106,0.35),
      transparent 40%
  );

  opacity:0;

  transition:opacity .3s;

}


/* show halo on hover */

.project-card::before{
  pointer-events: none;
}


/* lift animation */

.project-card:hover{
  transform:translateY(-6px);
  border-color:#2f866a;
}


/* ---------------- TEXT ---------------- */

.project-card h3{
  margin:0 0 10px;
  font-size:20px;
}

.project-card p{
  font-size:14px;
  line-height:1.5;
  color:#c6c6c6;
}


/* repo meta */

.repo-meta{
  margin:12px 0;
  font-size:13px;
  color:#a0a0a0;
  display:flex;
  gap:14px;
}


/* student name */

.repo-owner{
  font-size:13px;
  color:#8a8a8a;
  margin-bottom:14px;
}


/* repo button */

.project-card a{

  display:inline-block;

  padding:8px 14px;

  border-radius:8px;

  text-decoration:none;

  background:#2f866a;

  color:white;

  font-size:13px;

  transition:.2s;

}

.project-card a:hover{
  background:#39a483;
}


/* ---------------- RESPONSIVE ---------------- */

@media (max-width:600px){

  h1{
    font-size:28px;
  }

  #projects-container{
    gap:18px;
  }

}

.creator-section{
  margin-bottom:40px;
}

.creator-header{

  display:flex;
  align-items:center;

  gap:12px;

  padding:14px 18px;

  background:#111614;

  border:1px solid rgba(255,255,255,0.06);
  border-radius:10px;

  cursor:pointer;

  transition:all .2s ease;

}

.creator-header:hover{
  border-color:#2f866a;
  background:#151b18;
}

.folder-icon{
  font-size:18px;
}

.creator-name{
  font-size:17px;
  font-weight:600;
}

.repo-count{
  margin-left:auto;
  font-size:13px;
  color:#9aa0a6;
}


.creator-grid{

  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:28px;

}
.creator-header span:first-child{
  font-size:18px;
}