@font-face {
  font-family: 'Nastaliq';
  src: url('/fonts/IranNastaliq.ttf') format('truetype');
}

body{margin:0;padding:0;font-family:sans-serif;background:#0b0b0b;color:#FFD700;}
.background-pic{
  position:fixed; inset:0;
  background:#000 url('/images/background.webp') center/cover no-repeat;
  z-index:-1;
}
header{padding:15px;text-align:center;font-size:34px;font-weight:bold;border-bottom:1px solid #444; font-family:'Nastaliq', serif; }
.container {
  max-width: 1200px;
  margin: 20px auto;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 20px;
  padding: 0 10px;

  justify-content: start;
  direction: ltr;
}

.card {
  background: rgba(20,20,20,0.9);
  border-radius: 10px;
  padding: 15px;
  text-align: center;
  transition: 0.3s;
  cursor: pointer;
}

.card:hover{transform:scale(1.05);box-shadow:0 10px 20px rgba(255,215,0,0.3);}
.avatar{width:120px;height:120px;border-radius:50%;object-fit:cover;margin-bottom:10px;border:2px solid #FFD700;}
.name{font-size:30px;font-weight:bold;margin-bottom:5px;font-family:'Nastaliq', serif;}
.bio{font-size:14px;color:#ccc;margin-bottom:10px;height:40px;overflow:hidden;}
button.followBtn{padding:6px 12px;border:none;border-radius:5px;background:#FFD700;color:#0b0b0b;font-weight:bold;cursor:pointer;}
button.followBtn.following{background:#444;color:#FFD700;}
@media(max-width:768px){.container{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));}.bio{height:auto;}}