html, body {
    height: 100%;
    margin: 0;
}

body {
    font-family: Arial, sans-serif;
    text-align: center;
    padding: 20px;
    max-width: 800px;
    margin: 0 auto;
}

main {
    padding-bottom: 20px; /* Add padding to the bottom of the main content */
}

footer {
    background-color: #ffffff;
    text-align: center;
    padding: 10px;
    width: 100%;
    color: #777;
    font-size: 14px;
}

.breached {
    color: red;
}

.red-text {
    color: red;
}

/* Make the input password box wider */
.input-container input[type="password"],
.input-container input[type="text"] {
    width: 100%; /* Adjust the width as needed */
    max-width: 400px; /* Ensure it doesn't get too wide */
    padding: 10px;
    font-size: 16px;
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
}

/* Style the button container */
.button-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Add some space between the buttons and the dropdown */
}

/* Style the buttons and dropdown */
button,
select {
    padding: 14px 24px; /* Increase padding for larger size */
    font-size: 16px; /* Increase font size */
    margin: 10px 0; /* Add margin for spacing */
    cursor: pointer; /* Add pointer cursor on hover */
}

/* Add responsive design for mobile devices */
@media (max-width: 600px) {
    body {
        font-size: 16px;
        padding: 10px;
    }

    main {
        padding: 10px;
    }

    .input-container {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .input-container input[type="password"],
    .input-container input[type="text"],
    .input-container input[type="checkbox"],
    .input-container label,
    button,
    select {
        width: 100%;
        margin-bottom: 10px;
    }

    .button-container {
        flex-direction: column;
    }

    button,
    select {
        padding: 10px 16px; /* Decrease padding for smaller size */
        font-size: 14px; /* Decrease font size */
    }

    #strengthBar {
        width: 100%;
    }

    #strengthFill {
        width: 100%;
    }
}

/* Custom styles for the Privacy Policy section */
#privacyPolicy {
    border: 1px solid #777; /* Add border with color #777 */
    padding: 20px; /* Optional: add padding inside the border */
    margin-top: 20px; /* Adjust margin to control spacing */
    text-align: left; /* Align text to the left */
}

#privacyPolicy h2 {
    font-size: 1.2em; /* Smaller size for h2 */
    color: #777;
    text-align: center; /* Center align the h2 element */
}

#privacyPolicy p:first-of-type {
    text-align: center; /* Center align the first p element */
}

#privacyPolicy h3 {
    font-size: 1em; /* Same size as p text */
    font-weight: bold; /* Optional: make h3 text weight same as p */
    color: #777;
}

/* Custom styles for the "Great password!" message */
#feedback p {
    font-size: 18px; /* Increase the font size */
    font-weight: bold; /* Optional: make the text bold */
}

.logo {
    display: block;
    margin: 0 auto;
    max-width: 130px; /* Adjust the size as needed */
    height: auto;
}

.header-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px; /* Optional: add some space between the logo and the headline */
    text-align: center;
}

.header-container h1 {
    margin: 0 0 0 -30px; /* Move the headline 30px to the left */
    flex: 1;
    text-align: center;
}

/* Ensure the strength bar is visible */
#strengthBar {
    width: 50%; /* Adjust the width to make it narrower */
    height: 20px; /* Adjust the thickness */
    background-color: #e0e0e0;
    margin-top: 10px;
    border-radius: 10px; /* Rounded edges */
    overflow: hidden; /* Ensure the fill doesn't overflow the bar */
    margin: 10px auto; /* Center the bar horizontally */
}

#strengthFill {
    height: 100%;
    width: 0;
    background-color: green;
    border-radius: 10px; /* Rounded edges */
}

/* Increase the font size of the strength messages */
#strength {
    font-size: 20px; /* Adjust the size as needed */
    font-weight: bold; /* Optional: make the text bold */
}

/* Custom styles for the copy message */
#copyMessage {
    color: rgb(74, 200, 74);
    font-size: 14px; /* Adjust the size as needed */
    font-weight: normal; /* Optional: make the text bold */
}