body { /* Use a very dark grey background for contrast, making the container pop */ font-family: 'Inter', sans-serif; /* Suggest a modern font (requires import) */ display: flex; justify-content: center; align-items: center; min-height: 100vh; /* Use min-height for responsiveness */ background-color: #0d1117; /* Dark Mode base color */ background-image: linear-gradient(135deg, #0d1117 0%, #161b22 100%); /* Subtle gradient */ margin: 0; color: #e6edf3; /* Light text color for contrast */ } .container { text-align: center; padding: 50px; /* Slightly more padding */ background-color: #161b22; /* Lighter dark-mode color for the box */ border-radius: 12px; /* Smoother corners */ /* Modern, subtle layered shadows for depth */ box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4), /* Primary shadow */ 0 10px 30px rgba(0, 0, 0, 0.7); /* Deep, soft shadow */ /* Optional: Small border for definition */ border: 1px solid #30363d; /* Slightly increase size */ max-width: 380px; width: 90%; } .twitch-btn { display: inline-flex; /* Use flex for easy icon alignment if you add one */ align-items: center; justify-content: center; /* Use a slightly brighter, but still core Twitch purple */ background-color: #9146FF; color: white; padding: 12px 28px; /* Slightly larger padding */ border-radius: 8px; /* Smoother corners */ text-decoration: none; font-weight: 600; /* Medium bold */ letter-spacing: 0.5px; /* Better readability */ transition: all 0.3s ease; /* Enable smooth transitions */ border: none; cursor: pointer; /* Subtle inner shadow for 'pressed' look */ box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); } /* Add a sleek hover effect */ .twitch-btn:hover { background-color: #772ce8; /* Slightly darker purple on hover */ transform: translateY(-2px); /* Lift the button slightly */ box-shadow: 0 6px 12px rgba(145, 70, 255, 0.3); /* Glow effect on hover */ }