html, body {
    height: 100%;
    width: 100%;
}

form {
    width: 400px;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;

    padding: 20px;
    background-color: #012E40;

    display: flex;
    flex-direction: column;
    gap: 20px;

    & div.separator {
        height: 2px;
        background-color: #026773;
    }

    & h1 {
        text-align: center;
        color: #F2E3D5;
    }

    & .form-item {
        display: flex;
        flex-direction: column;
        gap: 10px;

        & label {
            color: #F2E3D5;
        }

        & input {
            padding: 10px;
            font-size: medium;
            outline: none;
            /*border: #026773 solid 5px;*/
            border: none;
            color: #F2E3D5;
            background-color: #024959;
        }
    }

    & button {
        background-color: #026773;
        padding: 10px;
        border: none;
        cursor: pointer;
        color: #F2E3D5;
        margin: auto 0;
        transition: 250ms;
        font-size: medium;

        &:hover {
            background-color: #3CA6A6;
        }
    }
}

.alert {

    background-color: #024959;
    padding: 10px;
    text-align: center;
    color: red;

}