@import 'modules/reset.css';
@import 'modules/colors.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);
    }



    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;
    }
}