77 lines
2.1 KiB
CSS
77 lines
2.1 KiB
CSS
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 */
|
|
} |