body { font-family: 'Courier New', monospace; background-color: #1a202c; color: #e2e8f0; transition: background-color 0.3s ease, color 0.3s ease; background-image: url('https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ8Z9FTzLDjysW6fJlPwTO2wjmuKJanIst3rDXXsejK-h-v6yS1fHdUpeI&s=10'); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; position: relative; } body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(26, 32, 44, 0.85); z-index: -1; } .light-mode { background-color: #f7fafc; color: #2d3748; } .link-card { transition: all 0.3s ease; } .link-card:hover { transform: translateY(-5px); box-shadow: 0 4px 6px rgba(66, 153, 225, 0.5); } #dark-mode-toggle { transition: all 0.3s ease; } #dark-mode-toggle:hover { transform: rotate(45deg); } .light-mode #dark-mode-toggle svg { fill: #2d3748; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } .fade-in { animation: fadeIn 0.5s ease-in-out; }