body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

.seal-container {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50%;
}

.seal {
    width: 60%;
}

.login-container {
    display: flex;
    background-color: #14284b;
    border-radius: 30px;
    width: 800px;
    padding: 20px;
    min-height: 400px;
}

.overhang-container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    width: 50%;
}

.form-container {
    position: absolute;
    border-radius: 30px;
    padding: 10px;
    width: 460px;
    min-height: 200px;
    z-index: 10;
}

.login-form {
    display: flex;
    flex-direction: column;
}

    .login-form input {
        border-radius: 9px;
        border: 1px solid rgba(119, 141, 169, 0.3);
        /*box-shadow: 0px 0px 2px 0px inset #778DA9;*/
    }

    .login-form button {
        margin: 10px 0;
        max-width: 120px;
        min-height: 40px;
        background: linear-gradient(#778da9, #2f3e5a 75%);
    }

.extra-small {
    font-size: 11px;
}

.lock {
    width: 50px;
    float: right;
}

/* set up a mobile size media query */
@media screen and (max-width: 800px) {
    body {
        align-items: flex-start;
        height: auto;
        min-height: 100vh;
        padding: 12px;
    }

    .d-flex.vw-100.vh-100 {
        width: 100% !important;
        height: auto !important;
        min-height: calc(100vh - 24px);
        padding: 0;
    }

    .login-container {
        flex-direction: column;
        width: min(100%, 460px);
        min-height: 0;
        padding: 16px;
        border-radius: 24px;
    }

    .overhang-container {
        position: relative;
        width: 100%;
        justify-content: center;
    }

    .form-container {
        position: relative;
        width: 100%;
        min-height: 0;
        border-radius: 24px;
        padding: 16px;
    }

    .seal-container {
        width: 100%;
    }

    .seal {
        width: min(150px, 45vw);
        margin-bottom: 12px;
    }

    .login-form .row {
        row-gap: .35rem;
    }

    .login-form button {
        max-width: none;
        width: 100%;
        margin: 0;
    }

    .lock {
        width: 42px;
    }
}

@media screen and (max-width: 420px) {
    body {
        padding: 8px;
    }

    .d-flex.vw-100.vh-100 {
        min-height: calc(100vh - 16px);
    }

    .login-container,
    .form-container {
        border-radius: 18px;
    }

    .login-container {
        padding: 12px;
    }

    .form-container {
        padding: 14px;
    }
}