/* Original Styles */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #f4f4f4; /* [cite: 175] */
    display: flex; /* Added for sticky footer */
    flex-direction: column; /* Added for sticky footer */
    min-height: 100vh; /* Added for sticky footer */
}

main {
    flex: 1; /* Added for sticky footer */
}

header {
    background-color: #4CAF50; /* [cite: 176] */
    color: white; /* [cite: 176] */
    text-align: center; /* [cite: 176] */
    padding: 1em 0; /* [cite: 176] */
}

header h1 {
    margin: 0; /* [cite: 177] */
}

header p {
    margin: 0.5em 0; /* [cite: 178] */
}

nav a {
    color: white; /* [cite: 178] */
    text-decoration: none; /* [cite: 178] */
    margin: 0 0.5em; /* [cite: 178] */
}

nav a:hover {
    text-decoration: underline; /* [cite: 179] */
}

.container {
    display: flex; /* [cite: 179] */
    max-width: 1200px; /* [cite: 179] */
    margin: 0 auto; /* [cite: 179] */
    padding: 20px; /* [cite: 180] */
}

.content {
    flex: 3; /* [cite: 180] */
    margin-right: 20px; /* [cite: 180] */
}

.article, .tool {
    background-color: white; /* [cite: 180, 184] */
    padding: 20px; /* [cite: 180, 184] */
    border-radius: 5px; /* [cite: 181, 185] */
    margin-bottom: 20px; /* [cite: 181, 185] */
}

.article h2, .tool h2 {
    color: #333; /* [cite: 181, 185] */
    margin-top: 0; /* Added for consistency */
}

.article h4 {
    color: #000000; /* [cite: 182] */
    font-weight: bold; /* [cite: 183] */
}

.read-more {
    display: inline-block; /* [cite: 183] */
    color: #4CAF50; /* [cite: 183] */
    text-decoration: none; /* [cite: 183] */
    font-weight: bold; /* [cite: 183] */
    margin-top: 10px; /* [cite: 183] */
}

.read-more:hover {
    text-decoration: underline; /* [cite: 184] */
}

form {
    display: flex; /* [cite: 185] */
    flex-direction: column; /* [cite: 186] */
}

form label {
    margin-top: 10px; /* [cite: 186] */
    font-weight: bold; /* [cite: 186] */
}

form select,
form input {
    margin-top: 5px; /* [cite: 187] */
    margin-bottom: 5px; /* [cite: 187] */
    padding: 8px; /* [cite: 187] */
    border: 1px solid #ccc; /* [cite: 187] */
    border-radius: 4px; /* [cite: 187] */
    width: 100%; /* [cite: 187] */
    box-sizing: border-box; /* [cite: 187] */
}

.age-inputs {
    display: flex; /* [cite: 188] */
    gap: 10px; /* [cite: 188] */
}

.age-inputs select {
    flex: 1; /* [cite: 189] */
}

form button {
    margin-top: 10px; /* [cite: 189] */
    padding: 10px; /* [cite: 189] */
    background-color: #4CAF50; /* [cite: 189] */
    color: white; /* [cite: 189] */
    border: none; /* [cite: 189] */
    border-radius: 4px; /* [cite: 189] */
    cursor: pointer; /* [cite: 189] */
}

form button:hover {
    background-color: #45a049; /* [cite: 190] */
}

#result h3 {
    margin-top: 0; /* Added for consistency */
}

.ads {
    flex: 1; /* [cite: 190] */
    background-color: #f9f9f9; /* [cite: 190] */
    padding: 20px; /* [cite: 191] */
    border-radius: 5px; /* [cite: 191] */
    height: fit-content; /* Added to prevent stretching */
}

.ad {
    margin-bottom: 10px; /* [cite: 191] */
    padding: 10px; /* [cite: 191] */
    background-color: white; /* [cite: 191] */
    border: 1px solid #ddd; /* [cite: 191] */
    border-radius: 4px; /* [cite: 192] */
}

.ad a {
    text-decoration: none; /* Added */
    color: #4CAF50; /* Added */
}

.ad a:hover {
    text-decoration: underline; /* Added */
}

footer {
    background-color: #e0e0e0; /* [cite: 192] */
    color: #333; /* [cite: 192] */
    text-align: center; /* [cite: 192] */
    padding: 1em 0; /* [cite: 192] */
    width: 100%; /* [cite: 192] */
    margin-top: auto; /* Added for sticky footer */
}

footer a {
    color: #4CAF50; /* [cite: 193] */
    text-decoration: none; /* [cite: 193] */
}

footer a:hover {
    text-decoration: underline; /* [cite: 193] */
}

/* Mobile-Friendly Additions */

/* General rule for responsive images */
img {
    max-width: 100%;
    height: auto;
    display: block; /* Prevent potential spacing issues */
}

/* Media Query for smaller screens (e.g., tablets and phones) */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Stack content and sidebar */
        padding: 15px; /* Reduce padding on smaller screens */
    }

    .content {
        margin-right: 0; /* Remove right margin when stacked */
        margin-bottom: 20px; /* Add space below content when stacked */
    }

    .article, .tool, .ads {
        padding: 15px; /* Reduce padding inside boxes */
    }

    .age-inputs {
        flex-direction: column; /* Stack age inputs */
        gap: 5px; /* Adjust gap for stacked inputs */
    }

    header h1 {
        font-size: 1.8em; /* Slightly reduce header size */
    }

    nav a {
        margin: 0 0.3em; /* Reduce space between nav links */
    }
}

/* Media Query for very small screens (optional fine-tuning) */
@media (max-width: 480px) {
     body {
         font-size: 15px; /* Adjust base font size slightly */
     }

    .container, .article, .tool, .ads {
        padding: 10px; /* Further reduce padding */
    }

     header h1 {
        font-size: 1.5em;
    }

     header p {
        font-size: 0.9em;
    }

     nav a {
        display: block; /* Stack nav links */
        margin: 0.5em 0; /* Add vertical space */
     }

     form button {
        padding: 12px; /* Make button slightly larger */
     }
}