/* Body styling for a calming and friendly appearance */
body {
    background-color: #f0f8ff; /* Light blue background for a calming effect */
    color: #333; /* Darker text for readability */
    font-family: 'Arial', sans-serif; /* Simple and clean font */
    margin: 0;
    padding: 0;
}

/* Container for centering and spacing */
.container {
    max-width: 600px;
    margin: 20px auto;
    padding: 20px;
    background-color: #fff; /* White background for content */
    border-radius: 10px; /* Rounded corners for a friendly look */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Soft shadow for depth */
}

/* Welcome screen styling */
#welcome {
    text-align: center;
}

/* Buttons styling */
button {
    display: inline-block;
    background-color: #87CEEB; /* Light blue background */
    color: #fff; /* White text */
    padding: 10px 20px;
    margin: 10px;
    border: none;
    border-radius: 5px; /* Rounded corners */
    cursor: pointer;
    transition: background-color 0.3s ease;
}

button:hover {
    background-color: #00BFFF; /* Darker blue on hover */
}

button:active {
    background-color: #1E90FF; /* Even darker blue on click */
}

button.bg-green-500 {
    background-color: #28a745; /* Green background */
}

button.bg-green-500:hover {
    background-color: #218838; /* Darker green on hover */
}

button.bg-green-500:active {
    background-color: #1e7e34; /* Even darker green on click */
}

button.bg-yellow-500 {
    background-color: #ffc107; /* Yellow background */
}

button.bg-yellow-500:hover {
    background-color: #e0a800; /* Darker yellow on hover */
}

button.bg-yellow-500:active {
    background-color: #c69500; /* Even darker yellow on click */
}

button.bg-orange-500 {
    background-color: #fd7e14; /* Orange background */
}

button.bg-orange-500:hover {
    background-color: #e76700; /* Darker orange on hover */
}

button.bg-orange-500:active {
    background-color: #d65b00; /* Even darker orange on click */
}

button.bg-red-500 {
    background-color: #dc3545; /* Red background */
}

button.bg-red-500:hover {
    background-color: #c82333; /* Darker red on hover */
}

button.bg-red-500:active {
    background-color: #bd2130; /* Even darker red on click */
}

/* Headings styling */
h1, h2, h3 {
    color: #333; /* Darker heading text */
    margin-bottom: 20px;
}

/* Step container styling */
#steps-container {
    margin-bottom: 20px;
    padding: 10px;
    background-color: #e6f7ff; /* Light blue background for steps */
    border-left: 4px solid #007BFF; /* Blue border */
}

/* Suggestion box styling */
#suggestions {
    padding: 10px;
    background-color: #fffbe6; /* Light yellow background for suggestions */
    border-left: 4px solid #ffd700; /* Gold border */
}