/* ============================
   BLACK & PINK CLEAN STYLE
   ============================ */

/* Font */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700;800&display=swap');

/* Variables */
:root{
  --bg:#050505;
  --panel:#111111;
  --pink:#ff2e88;
  --pink-soft:#ff6fa5;
  --text:#f5f5f5;
  --muted:#b88a9b;
  --border:rgba(255,46,136,0.15);
  --radius:14px;
}

/* Reset */
*{margin:0;padding:0;box-sizing:border-box}
body{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.5;
  padding:30px 16px;
}

/* Center */
center{display:block;margin-bottom:20px}

/* Profile */
.my-photo{
  width:140px;
  height:140px;
  object-fit:cover;
  border-radius:16px;
  border:2px solid var(--border);
}

/* Title */
h1{
  text-align:center;
  font-size:20px;
  font-weight:700;
  margin-top:12px;
  color:var(--pink);
  letter-spacing:1px;
}

/* Text */
p{
  text-align:center;
  color:var(--muted);
  font-size:14px;
}

/* Links container */
.links{
  max-width:520px;
  margin:20px auto;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* Card */
.link-card{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:var(--radius);
  background:var(--panel);
  border:1px solid var(--border);
  text-decoration:none;
  color:inherit;
  transition:0.2s ease;
}

/* Hover */
.link-card:hover{
  transform:translateY(-4px);
  border-color:var(--pink);
}

/* Icon */
.link-icon{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  background:rgba(255,46,136,0.1);
}

.link-icon i{
  color:var(--pink);
  font-size:18px;
}

/* Text */
.link-text{
  flex:1;
  font-weight:600;
  font-size:14px;
}

/* Action */
.link-action i{
  color:var(--muted);
}

/* Social */
.social-icons{
  display:flex;
  justify-content:center;
  gap:30px;
  padding:14px;
  margin:20px auto;
  max-width:520px;
  border-radius:40px;
  background:linear-gradient(90deg,var(--pink),var(--pink-soft));
}

.social-icons a{
  font-size:26px;
  color:#000;
  transition:0.2s;
}

.social-icons a:hover{
  transform:scale(1.2);
}

/* Footer */
.copyright{
  text-align:center;
  margin-top:20px;
  font-size:13px;
  color:var(--muted);
}

/* Divider */
.separator{
  height:1px;
  margin:15px auto;
  max-width:400px;
  background:rgba(255,46,136,0.2);
}

/* Responsive */
@media (min-width:768px){
  body{padding:40px}
}