@import url('https://googleapis.com');

:root {
  color-scheme: dark;
  --bg: #111014;
  --surface: #19171d;
  --surface-2: #211d25;
  --text: #f4f0ed;
  --muted: #aaa1ad;
  --line: rgba(255, 255, 255, .09);
  --accent: #c66b83;
  --accent-bright: #e39aae;
  --accent-soft: rgba(198, 107, 131, .13);
  --shadow: 0 24px 80px rgba(0, 0, 0, .22);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "New Rocker";
    font-weight: 400;
    font-style: normal;
} 

.card {background: var(--card-bg); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid var(--border-color); border-radius: 16px; padding: 1.8rem; width: 100%; max-width: 650px; margin-bottom: 1.5rem; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37); transition: transform 0.3s ease, border-color 0.3s ease;}
.social-links {display: flex; gap: 0.8rem; flex-wrap: wrap;}
.social-btn {text-decoration: none; color: var(--text-primary); background: rgba(255, 255, 255, 0.05); border: 1px solid var(--border-color); padding: 0.6rem 1.2rem; border-radius: 10px; font-size: 0.95rem; display: flex; align-items: center; gap: 0.5rem; flex: 1; justify-content: center; min-width: 130px; transition: all 0.2s ease;}
.social-btn:hover {background: linear-gradient(135deg, var(--accent-purple), var(--accent-cyan)); color: #fff; border-color: transparent; box-shadow: 0 0 15px rgba(6, 182, 212, 0.4);}

footer {
    text-align: center;
    color: var(--text-secondary);
    font-size: 0.85rem;
    margin-top: 1rem;
}