/*
    insecure.css serves as the base styles for the application when not in the
    grid-based secure area. It provides general spacing and layout for elements.

    Note: insecure.css loads when the route is outside of the /home/* path. (secure.css loads otherwise)

 */


@layer app {

    body {
        padding: 3rem;

        @media(max-width: 500px) {
            padding: 1.5rem;
            padding-block: 3rem;
        }
    }


    app-wrapper {
        display: flex;
        flex-direction: column;
        min-height: calc(100vh - 6em); /* Account for body padding */

        @media(max-width: 500px) {
            min-height: calc(100vh - 4.5em); /* Account for body padding on small screens */
        }

        input {
            max-width: 450px;
        }
    }


    logos-container {
        margin-top: auto;
        padding-top: 2em;
    }

}