:root{
    --text:#e6e6e6;
    --muted:#6b7280;
    --accent:#6d28d9;
    --btn-bg:#ffffffaa;
    --btn-hover:#ffffffcc;
    --radius:999px;
  }

  html,body{
    height:100%;
    margin:0;
    font-family: 'Montserrat', sans-serif;
    color:var(--text);
    background:linear-gradient(180deg,#838689,#353A3F);
  }

  .copyable {
  cursor: pointer;
  color: var(--accent);
  font-weight: 600;
}
.copyable:hover {
  opacity: 0.8;
}

  a{
    color: #979797;
    text-decoration: none;
    }

  .wrap{
    min-height:100%;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:48px 16px;
    box-sizing:border-box;
  }

  .card{
    width:100%;
    max-width:420px;
    text-align:center;
  }

  .avatar{
    width:100px;
    height:100px;
    border-radius:50%;
    overflow:hidden;
    margin:0 auto 12px;
    border:4px solid rgba(145, 145, 145, 0.35);
    box-shadow:0 6px 18px rgba(70, 70, 70, 0.06);
  }
  .avatar img{
    width:100%;
    height:100%;
    object-fit:cover;
    display:block;
  }

  h1{
    margin:8px 0 4px;
    font-size:30px;
    letter-spacing:0.2px;
  }

  p.bio{
    margin:0 0 18px;
    color:var(--muted);
    font-size:14px;
  }

  .links{
    display:flex;
    flex-direction:column;
    gap:12px;
    padding:6px 0;
  }

  .btn{
    display:flex;
    align-items:center;
    gap:12px;
    padding:14px 16px;
    background:var(--btn-bg);
    border-radius:var(--radius);
    text-decoration:none;
    color:var(--text);
    font-weight:600;
    transition:transform .08s ease,background .12s;
    backdrop-filter:blur(8px);
  }

  .btn:hover{
    transform:translateY(-3px);
    background:var(--btn-hover);
  }

  .btn svg{
    width:20px;
    height:20px;
    flex:0 0 20px;
    opacity:0.95;
  }

.btn.insta {
  background: rgb(220, 47, 117);
  color: rgb(0, 0, 0);
}
.btn.insta:hover {
  background: rgba(220, 47, 116, 0.5);
  color: white;
}

.btn.snap {
  background: rgb(225, 225, 84);
  color: #000;
}
.btn.snap:hover {
  background: rgba(255, 255, 84, 0.5);
  color: white;
}
.btn.web {
  background: #cecece;
  color: #000000;
}
.btn.web:hover {
  background: #cecece3f;
  color: white;
}
.btn.mail {
  background: #ffc400;
  color: #000000;
}
.btn.mail:hover {
  background: #ffc4003f;
  color: white;
}

  .copy-notice{
    opacity:0;
    transform:translateY(-6px);
    transition:all .28s;
    display:inline-block;
    margin-left:8px;
    font-size:13px;
    color:var(--accent);
  }

  .copy-notice.show{
    opacity:1;
    transform:translateY(0);
  }

footer {
    background: #222;
    text-align: center;
    color: #bbb;
    font-size: 14px;
    padding: 20px 0;
    margin-top: 0px;
    opacity: 0.7;
}

  @media (max-width:420px){
    .avatar{
      width:88px;
      height:88px;
    }
  }