<style>
    html {
        scroll-behavior: smooth;
    }

    /* Ensure Password Container adjusts for long passwords */
    .password-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap; /* Allow wrapping on smaller screens */
        width: 100%;
        word-wrap: break-word; /* Prevent overflow */
        box-sizing: border-box; /* Ensure padding and borders are included in width */
    }

    /* Password Text Styling */
    #password-display {
        word-wrap: break-word; /* Break the password into multiple lines if too long */
        overflow-wrap: break-word; /* Same as word-wrap for better cross-browser support */
        white-space: normal; /* Allow text to wrap instead of staying on one line */
        width: 100%; /* Ensure password display takes up the full width */
    }

    /* For the Copy Button on Mobile */
    @media (max-width: 768px) {
        .password-box {
            flex-direction: column; /* Stack password and button vertically */
            align-items: flex-start;
        }
        .copy-btn {
            margin-top: 10px; /* Add space for the mobile layout */
        }
    }

    /* Default styling for larger screens */
    section {
        max-width: 800px;
        margin: 0 auto;
        padding: 1rem;
    }

    /* Responsive styling for mobile screens */
    @media (max-width: 768px) {
        section {
            padding: 0.5rem;
        }

        /* Adjust the range slider container to fit within screen */
        .mb-6 {
            padding-left: 1rem;
            padding-right: 1rem;
        }

        input[type="range"] {
            width: 100%; /* Ensure slider is 100% of the width on smaller screens */
        }

        .text-sm {
            font-size: 0.875rem; /* Adjust font size for mobile */
        }

        .mt-10 {
            margin-top: 4rem; /* Reduce top margin for smaller screens */
        }
    }
</style>