* { box-sizing: border-box; }

html { min-height: 100%; }

body {
    margin: 0;
    padding:
        max(20px, env(safe-area-inset-top))
        max(20px, env(safe-area-inset-right))
        max(20px, env(safe-area-inset-bottom))
        max(20px, env(safe-area-inset-left));
}

main {
    max-width: 900px;
    margin: auto;
}

button, a {
    min-width: 44px;
    min-height: 44px;
    padding: 12px;
    touch-action: manipulation;
}

@media (max-width: 768px) {
    body {
        padding:
            max(16px, env(safe-area-inset-top))
            max(16px, env(safe-area-inset-right))
            max(16px, env(safe-area-inset-bottom))
            max(16px, env(safe-area-inset-left));
    }

    main { width: 100%; }
}

@media (orientation: landscape) {
    main { max-width: 1100px; }
}

@media (orientation: portrait) {
    main { max-width: 700px; }
}