:root { --bg: #0d1117; --accent: #58a6ff; --text: #c9d1d9; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background-color: var(--bg); color: var(--text); font-family: 'Segoe UI', system-ui, sans-serif; height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; } h1 { margin-bottom: 3rem; letter-spacing: 4px; font-weight: 300; text-transform: uppercase; } h1 span { color: var(--accent); font-weight: 800; } .dock { display: flex; gap: 1.5rem; padding: 25px; background: rgba(255, 255, 255, 0.02); border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(10px); } .icon-link { text-decoration: none; color: inherit; display: flex; flex-direction: column; align-items: center; transition: transform 0.2s ease; } .icon-link:hover { transform: translateY(-8px); } .icon-box { width: 60px; height: 60px; background: #161b22; border-radius: 15px; display: flex; justify-content: center; align-items: center; border: 1px solid #30363d; margin-bottom: 8px; } /* Force icons to show up */ .icon-box svg, .icon-box i { width: 28px !important; height: 28px !important; color: var(--accent); } .label { font-size: 12px; opacity: 0.7; font-weight: 500; } .search-container { margin-top: 2.5rem; width: 100%; max-width: 450px; } .search-wrapper { display: flex; align-items: center; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 30px; padding: 10px 20px; transition: all 0.3s ease; } .search-wrapper:focus-within { border-color: var(--accent); background: rgba(255, 255, 255, 0.05); } .search-icon { width: 18px; height: 18px; color: var(--accent); margin-right: 12px; } .search-wrapper input { background: transparent; border: none; outline: none; color: var(--text); font-size: 15px; width: 100%; }