:root{
      --bg:#f5f7fa;
      --card:#ffffff;
      --muted:#6b7280;
      --accent:#DA4453;
      --glass: rgba(0,0,0,0.03);
      --maxw:1100px;
      --radius:14px;
      color-scheme: light;
    }

        ::selection {
    background: #DA4453;
    color: white;
    text-shadow: none;
}

::-moz-selection {
    background: #DA4453;
    color: white;
    text-shadow: none;
}

    *{box-sizing:border-box;transition: all 0.3s ease;}
    html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,'Helvetica Neue',Arial; background:linear-gradient(180deg,#ffffff 0%, #ffffff 60%); color:#111827}
    .wrap{max-width:var(--maxw);margin:40px auto;padding:28px;animation:fadeIn 0.8s ease forwards;opacity:0}

    @keyframes fadeIn {
      to {opacity:1;}
    }

    /* Header */
    .profile{display:grid;grid-template-columns: 1fr 320px;gap:20px;align-items:start;margin-bottom:26px}
    .hero{background:linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01));padding:22px;border-radius:var(--radius);box-shadow:0 6px 18px rgba(0,0,0,0.06);animation:slideUp 0.6s ease forwards;opacity:0}

    @keyframes slideUp {
      from {transform:translateY(20px);opacity:0;}
      to {transform:translateY(0);opacity:1;}
    }

    .top{display:flex;gap:18px;align-items:center}
    .avatar{width:84px;height:84px;border-radius:999px;flex:84px 84px;background:linear-gradient(135deg,#93c5fd,#60a5fa);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:32px;color:white;box-shadow:0 4px 10px rgba(0,0,0,0.1)}
    .avatar:hover{transform:scale(1.05)}
    .name{display:flex;flex-direction:column}
    .name h1{margin:0;font-size:20px;letter-spacing:-0.2px}
    .handle{color:var(--muted);font-size:13px;margin-top:6px}
a{
  text-decoration: none;
  display:flex;
  color: #DA4453;
}
    .subscribe-row{margin-top:14px;display:flex;gap:12px}
    .btn{background:var(--accent);color:white;padding:10px 14px;border-radius:10px;font-weight:700;border:0;cursor:pointer;box-shadow:0 2px 6px #f3f3f3}
    .btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px #f3f3f3}
    .btn.ghost{background:transparent;padding:10px 14px; color:var(--accent);border:1px solid #DA4453}

    .bio{margin-top:16px;color:var(--muted);line-height:1.5}
  .bio{
    color: black;
    font-weight: 600;
      }

    /* posts area */
    .posts{margin-top:18px;display:grid;gap:14px}
    .post{background:linear-gradient(180deg, rgba(0,0,0,0.015), rgba(0,0,0,0.01));padding:16px;border-radius:12px;display:flex;justify-content:space-between;align-items:center;cursor:pointer;transform:translateY(0)}
    .post:hover{transform:translateY(-3px);box-shadow:0 4px 10px rgba(0,0,0,0.05)}
    .post .meta{display:flex;flex-direction:column}
    .post .title{font-weight:600;color:#111827}
    .post .excerpt{color:black;font-size:13px;margin-top:8px; font-size: 15px;}
    .post .read{color:var(--muted);font-size:13px}

    /* sidebar */
    .sidebar{position:sticky;top:28px;animation:slideUp 0.7s ease forwards;opacity:0}
    .card{background:var(--card);padding:16px;border-radius:12px;box-shadow:0 4px 8px rgba(0,0,0,0.05)}
    .subscribe-form{display:flex;gap:8px;margin-top:12px}
    .field{flex:1;padding:10px;border-radius:10px;background:var(--glass);border:1px solid rgba(0,0,0,0.06);color:inherit}

    /* footer */
    footer{margin-top:32px;text-align:center;color:var(--muted);font-size:13px;opacity:0;animation:fadeIn 1s ease 0.3s forwards}

    /* responsive */
    @media (max-width:880px){
      .profile{grid-template-columns:1fr;}
      .top{align-items:flex-start}
      .avatar{width:64px;height:64px;font-size:26px}
      .subscribe-row{flex-direction:column;align-items:stretch}
      .sidebar{position:static}
    }
    .prev-p{
  float: left;
  font-size: 18px;
}
.next-p{
  float: right;
  font-size: 18px;
}

.ul-icon {
  display: inline-flex;
  position: relative;
}
.li-icon {
  list-style: none;
  margin: 10 15px;
  padding: 0px 5px;
  height: 80px;
  width: 80px;
  color: #000;
  border: 0px solid #000;
  border-radius: 50%;
  display: flex;
  align-items: center;
  font-size: 30px;
  transition: all ease 0.3s;
}

.li-icon:hover {
  color: #c31432;
  margin: 10 5px;
  background: #fff;
  border: 0px solid #fff;
  cursor: pointer;
}

.social-share {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 20px;
  justify-content: center;
}

.share-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  font-size: 16px;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  color: #fff;
  transition: background 0.3s ease;
  flex: 1 1 auto; /* responsive shrinking/growing */
  justify-content: center;
  min-width: 120px;
}

/* Platform colors */

    .twitter   { background: #1da1f2; }
    .facebook  { background: #1877f2; }
    .linkedin  { background: #0077b5; }
    .whatsapp  { background: #25d366; }
    .email     { background: #6c757d; }
    .copy      { background: #6c757d; }
    .universal { background: #444; }

.share-btn:hover {
  opacity: 0.9;
  color: white;
}

/* Mobile responsiveness */
@media (max-width: 600px) {
  .share-btn {
    flex: 1 1 100%;
    font-size: 18px;
    padding: 14px;
  }

  .social-share {
    flex-direction: column;
    align-items: stretch;
  }
}