@import url('https://fonts.googleapis.com/css2?family=Junge&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

.header-text{
    font-family: "Open Sans", Arial, sans-serif;
    font-weight: bold;
}

.body-text{
    font-family: "Open Sans", Arial, sans-serif;
}

input[type=submit],
button[type=submit],
.button,
.wpforms-form input[type=submit],
.wpforms-form button[type=submit],
.wpforms-page-button{
    background-color: crimson;
    color: white;
    border-radius: 20px;        /* Rounded corners - adjust the value as needed */
    padding: 10px 20px;         /* Adjust padding */
    border: none;   
}

.custom-button {
    font-weight: normal;
    font-family: "Rubik", Arial, Helvetica, sans-serif;
}

.passwordStuff {
    max-width: 100%;
    margin: 0 auto;
    text-align: center;
    font-family: "Rubik", sans-serif;
    font-style: normal;
}


.password-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    gap: 10px;
    justify-content: center;
    margin-top: 20px;
    max-width: 75%;
}
@media (max-width: 1050px) {
    .password-grid {
        grid-template-columns: repeat(2, 1fr); /* 2 columns, rows will adapt to fit 5 items */
    }
}

/* When the grid width is below 200px */
@media (max-width: 750px) {
    .password-grid {
        grid-template-columns: repeat(1, 1fr); /* 1 column, rows will adapt to fit 5 items */
    }
}

.password-item {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    max-width: 1000px; /* Set maximum size for the box */
    min-width: 200px; /* Set minimum size for the box */
    border: 1px solid black;
}


.copy-icon {
    cursor: pointer;
    margin-left: 5px;
    height: 10px;
}

.slider-container {
    display: flex;
    align-items: center;
    justify-content: center; 
}

.slider-label {
    margin-right: 20px;  /* Increase the space between text and slider */
    font-weight: bold;
}

.slider {
    margin-right: 15px;
    flex: none;

}

.slider-text {
    font-weight: bold;
}/* End custom CSS */