body { margin: 0; padding: 0; width: 100vw; height: 100vh; background-color: #121212; color: #e0e0e0; font-family: "Inter", "Helvetica Neue", Arial, sans-serif; display: flex; justify-content: center; align-items: center; }
#project-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
#project-list a { min-width: 175px; display: flex; gap: 12px; justify-content: flex-start; align-items: center; padding: .5rem .75rem; background-color: #1e1e1e; border: 1px solid #2a2a2a; border-radius: 10px; width: max-content; text-decoration: none; color: #e0e0e0; font-weight: 500; transition: all 0.25s ease; box-shadow: 0 2px 6px rgba(0,0,0,0.35); position: relative; overflow: hidden; }
#project-list a:hover { background-color: #262626; border-color: #4dabf7; color: #82cfff; box-shadow: 0 6px 16px rgba(77, 171, 247, 0.25); transform: translateY(-2px); }
#project-list a::before { content: ""; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(120deg, transparent, rgba(77,171,247,0.15), transparent); transform: skewX(-25deg); }
#project-list a:hover::before { left: 125%; transition: left 0.6s ease; }
#project-list img { max-width: 40px; max-height: 40px; border-radius: 6px; }
#project-list span { font-size: 15px; letter-spacing: 0.3px; }