*, html {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    font-family: Inter, sans-serif;
    font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */

    --p-font: Inter, sans-serif;


    --r1: .25rem;
    --r2: .5rem;
}

html, body {
    height: 100dvh;
}

form {
    display: flex; flex-direction: column;
    width: fit-content;
    gap: 1rem;
    padding: 1rem;


    .input-container {
        display: flex; flex-direction: column;
        gap: .25rem;

        &.double {
            display: grid; column-gap: 1rem;
            grid-template-rows: auto auto;
            grid-auto-flow: column;
        }
    }

    input, button {
        padding: .25rem;
        border: 1px solid #b3b3b3;
        border-radius: var(--r1);
        font-family: var(--p-font);
        transition: .25s ease;
        
        &::placeholder {
            color: gray;
            transition: .25s ease;
        }
        &:focus {
            outline: none;
            border-color: black;
            /* background-color: #fbfbfb; */

            &::placeholder {
                color: lightgray;
            }
        }
    }

    button {
        cursor: pointer;
    }

    label {
        font-family: .8rem;
    }

    button[type="submit"] {
        width: fit-content;
        padding: .5rem 2rem;
        align-self: flex-end;
    }
}


main {
    display: flex; flex-direction: column;

    &:has(form.login) {
        align-items: center; justify-content: center;
        height: 100%;
    }
    form.login {
        background-color: #f5f5f5;
        border: 1px solid lightgray;
        border-radius: var(--r1);
        min-width: 16rem;
    }
}