/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* New: Set a dark theme using Material Design color variables */
:root {
    --md-sys-color-primary: #224223; /* Matches your original button color */
    --md-sys-color-on-primary: #ffffff;
    --md-sys-color-background: #181818;
    --md-sys-color-on-background: #e0e0e0;
    --md-sys-color-surface: #1a1a1a;
    --md-sys-color-on-surface: #e0e0e0;
    --md-sys-color-on-surface-variant: #e0e0e0;
}

body {
    font-family: 'Roboto', sans-serif;
    background-color: var(--md-sys-color-background);
    color: var(--md-sys-color-on-background);
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

p {
    font-size: 18px;
    margin: 10px 0;
}

.container {
    text-align: center;
    background-color: var(--md-sys-color-surface);
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    /* Add a gap for space between elements */
    gap: 1.5rem; 
}

/* This is the key change. We are targeting the specific Material Button tags 
and setting a minimum width to ensure they have enough space.
*/
md-filled-button, 
md-outlined-button, 
md-text-button {
    min-width: 200px; /* Adjust this value to your liking */
    /* Add some margin to separate them */
    margin: 10px 0;
}


/* Responsive Design */
@media (max-width: 768px) {
    .container {
        width: 100%;
        padding: 15px;
        /* Use a flex column for smaller screens */
        flex-direction: column;
        gap: 1rem;
    }
}