@layer base {
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body {
        font-family: var(--font-main), sans-serif;
        background-color: var(--bg);
        color: var(--text);
        line-height: 1.5;
        -webkit-font-smoothing: antialiased;
        padding-bottom: 0;
        overflow: hidden;
        min-width: 0;
    }

    main.theContent {
        height: auto;
        min-height: 0;
        align-self: stretch;
        background-color: var(--surface);
        margin: 0 0 var(--spacing-md) var(--spacing-md);
        padding: var(--padding-block);
        border-radius: var(--radius-md);
        overflow: hidden;
        min-width: 0;
        width: auto;
    }

    img {
        display: block;
        max-width: 100%;
    }

    @media (max-width: 768px) {
        html,
        body {
            min-height: 100%;
            overflow-x: hidden;
            overflow-y: auto;
        }

        body {
            padding-bottom: 0;
        }

        main.theContent {
            height: auto;
            min-height: calc(100dvh - 60px - var(--spacing-sm));
            margin: 0 var(--spacing-sm) calc(72px + var(--spacing-sm) + env(safe-area-inset-bottom));
            padding: var(--spacing-sm);
            overflow: visible;
        }
    }

    @media (max-width: 480px) {
        main.theContent {
            min-height: calc(100dvh - 56px);
            margin: 0;
            margin-bottom: calc(72px + env(safe-area-inset-bottom));
            border-radius: 0;
        }
    }
}