:root {
    --behaviour-focus-primary: var(--system-color-info-violet-main);
    --behaviour-disabled-content: var(--color-neutral-600);
    --behaviour-disabled-background: var(--color-neutral-400);
    --behaviour-selected-tertiary: var(--color-brand-600);
    --behaviour-selected-secondary: var(--color-brand-100);
    --behaviour-selected-primary: var(--color-brand-900);
    --behaviour-hover-secondary: var(--color-brand-50);
    --behaviour-hover-primary: var(--color-brand-700);
    --surface-color-contrast: var(--surface-color-light);
    --surface-color-popover: var(--surface-color-light);
}

html,
body {
    height: 100%;
}

body {
    background-color: rgba(var(--color-brand-50));
    display: grid;
    min-height: 100vh;
    width: 100%;
    margin: 0;
}

body cl-pictogram.pictogram-background {
    position: absolute;
    --pictogram-size: 100%;
    margin: 0 auto;
    z-index: -1;
}

body main {
    background-color: rgba(var(--surface-color-contrast));
    border-bottom: none;
    border-radius: var(--border-radius-large);
    box-shadow: var(--elevation-1);
    margin: var(--spacing-10) auto;
    max-width: 26rem;
    padding: var(--spacing-6);
    text-align: center;
    justify-items: center;
    width: 100%;
    height: fit-content;
}

body main cl-toast {
    margin-right: auto;
    margin-top: calc(var(--spacing-5) * -1);
    margin-bottom: var(--spacing-2);
    margin-left: auto;
    text-align: left;
    right: 0;
}

body main form {
    justify-content: center;
    display: grid;
}

body main form cl-text-field-scoped {
    margin-bottom: var(--spacing-3);
}

body main section.footer {
    width: 100%;
    margin-top: var(--spacing-5);
}

body main form cl-button[variant="primary"] {
    --color: rgb(var(--color-neutral-50));
}

@media (max-width: 768px) {
    body main {
        max-width: 20rem;
    }
}

@media (max-width: 539px) {
    body {
        margin: 0;

        cl-pictogram {
            display: none;
            --pictogram-size: 0;
        }

        main {
            padding: var(--spacing-6) 0 0 0;
            margin: 0;
            height: auto;
            max-width: 100%;
        }
    }
}

@media (max-width: 414px) {}

@media (max-width: 360px) {}