:root{
    --primary-button-color: rgb(121, 39, 245);
    --form-section-border: 1px solid black;
}

#main-section {
    display: flex;
    flex-direction: column;
    width: 100vw;
    /* height: calc(100vh - (var(--navbar-height) + var(--navbar-margin-top))); */
    align-items: center;
    justify-content: center;
}

#main-container {
    min-height: 200px;
    min-width: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border: 2px solid black;
    border-radius: 10px;
}


/******* Password Form ********/

#form-title {
    width: 100%;
    text-align: center;
    border-bottom: var(--form-section-border);
    margin: 5px;
    padding: 10px;
}

.password-form {
    padding: 10px;
}

.form-field {
    padding: 10px;
    margin: 10px;
}

.form-number-field {
    border-radius: 6px;
}

fieldset {
    border: none !important;
    margin: 0;
    padding: 0;
}

.form-character-field {
    border: none;
}

#password-button {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
}

#password-button > button {
    padding: 5px;
}

#generated-password-div {
    display: flex;
    width: 100%;
    gap: 10px;
    align-items: center;
    justify-content: center;
    border-top: var(--form-section-border);
}

#generated-password {
    min-height: 30px;
    text-align: center;
}

#generated-password-div > button {
    padding: 5px;
}