@import 'modules/reset.css';
@import 'modules/colors.css';
@import 'modules/flash-messages.css';

body {
    font-family: "Roboto", sans-serif;
    background: var(--color-blue);
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
}

form {
    background: var(--color-white);
    padding: 20px;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    width: 500px;

    h1 {
        text-align: center;
        color: var(--color-black);
    }

    fieldset {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        border: none;

        label {
            font-weight: bold;
            color: var(--color-black);
        }

        input {
            padding: 8px;
            border: 1px solid var(--color-light-grey);
            border-radius: 5px;
            transition: border-color 0.2s, box-shadow 0.2s;
        }

        input:focus {
            border-color: var(--color-orange);
            box-shadow: 0 0 0 3px rgba(255, 140, 0, 0.25);
            outline: none;
        }
    }

    button[type="submit"] {
        padding: 10px 15px;
        border: none;
        border-radius: 0.5rem;
        cursor: pointer;
        background: var(--color-orange);
        color: var(--color-white);
        text-transform: uppercase;
        font-weight: bold;
        margin-top: auto;
    }

    a[id="forgot_password_link"] {
        text-align: center;
        color: var(--color-blue);
    }
}