:root { --bg: #ffffff; --text: #1a1a1a; } @media (prefers-color-scheme: dark) { :root { --bg: #1a1a1a; --text: #ffffff; } } body { margin: 0; min-height: 100vh; display: flex; align-items: flex-start; justify-content: center; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, sans-serif; transition: background-color 0.3s; } .buttons { display: grid; grid-template-columns: repeat(6, 4rem); gap: 1rem; padding: 2rem; justify-items: center; justify-content: center; } .social-button { display: flex; align-items: center; justify-content: center; width: 3rem; height: 3rem; border-radius: 50%; border: 2px solid var(--text); background: transparent; cursor: pointer; transition: transform 0.2s, background-color 0.2s; } .social-button:hover { transform: translateY(-3px); background: var(--text); } .social-button:hover svg { fill: var(--bg); } .social-button svg { width: 1.5rem; height: 1.5rem; fill: var(--text); transition: fill 0.2s; } @media (max-width: 600px) { .buttons { grid-template-columns: repeat(3, 4rem); padding: 1rem; gap: 1.5rem; } }