Style :
/* Reset and base */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

body {
background-color: #1c1c1c;
color: #f0f0f0;
font-family: Arial, sans-serif;
line-height: 1.6;
}

/* Header / navigation */
header {
background-color: #111;
padding: 20px 0;
display: flex;
justify-content: center;
}

nav {
display: flex;
gap: 20px;
flex-wrap: wrap;
}

nav a {
color: #f0f0f0;
text-decoration: none;
font-size: 18px;
padding: 10px 20px;
border-radius: 6px;
transition: background-color 0.3s, transform 0.2s;
}

nav a.home-button {
font-size: 24px;
font-weight: bold;
color: #ff9900;
}

nav a:hover {
background-color: #333;
transform: scale(1.05);
}

/* Main content area */
main {
max-width: 900px;
margin: 50px auto;
text-align: center;
}

main h1 {
font-size: 32px;
margin-bottom: 40px;
}

/* Button container */
.button-container {
display: flex;
flex-direction: column;
gap: 20px;
align-items: center;
}

.button-container a.btn {
background-color: #333;
color: #f0f0f0;
text-decoration: none;
font-size: 18px;
padding: 15px 30px;
border-radius: 8px;
transition: background-color 0.3s, transform 0.2s;
}

.button-container a.btn:hover {
background-color: #555;
transform: scale(1.05);
}

/* Responsive adjustments */
@media (min-width: 600px) {
.button-container {
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.button-container a.btn {
margin: 10px;
}
}