/* css/styles.css */
body {
    text-align: center;
    background-color: #121212;
    /* Sets the background color to black */
    color: #fff;
    /* Sets the text color to white for contrast */
}

pre {
    white-space: pre-wrap;
    /* Ensures whitespace is preserved, and lines wrap */
    color: #0f0;
    /* Gives the ASCII art a classic green-on-black look */
}

.button-container {
    margin: 20px;
}

.my-button {
    padding: 10px 20px;
    margin: 5px;
    font-size: 16px;
    background-color: #444;
    /* Dark grey background for the buttons */
    color: #fff;
    /* White text color */
    border: none;
    /* Removes the default border */
    border-radius: 5px;
    /* Adds rounded corners */
    transition: background-color 0.3s, transform 0.1s;
    /* Smooth transition for hover and click effects */
}

.my-button:hover,
.my-button:focus {
    background-color: #666;
    /* Lightens the button on hover/focus for feedback */
    cursor: pointer;
}

/* Responsive design adjustments */
@media (max-width: 768px) {
    .my-button {
        padding: 12px 24px;
        /* Increases padding for larger touch targets on smaller screens */
        font-size: calc(10px + 2vw);
        /* Adjusts font size based on viewport width */
    }
}

/* Add to your existing style.css */
.content {
    max-width: 800px;
    /* Adjust based on your preference */
    margin: 0 auto;
    /* Centers the block */
    text-align: center;
    /* Aligns text to the left within the centered block */
}

/* Optional: further styling for the list */
ul {
    padding-left: 20px;
    /* Adjusts the space for bullets */
    list-style-position: inside;
    /* Keeps bullets inside the content flow */
}

/* Ensure list items are not centered if you prefer a traditional list appearance */
ul li {
    text-align: left;
}

#birthdayPicker {
    margin: 20px 0;
}

.button-container a.my-button {
    display: inline-block;
    margin: 5px;
    padding: 10px 15px;
    text-decoration: none;
    color: #fff;
    background-color: #444;
    border-radius: 5px;
}

.button-container a.my-button:hover {
    background-color: #666;
}