/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Stop the document from ever scrolling sideways. Any overflowing grid / flex
   descendant should clip to the viewport instead of pushing the whole app off
   to the side — mobile Safari in particular would otherwise position native
   alerts relative to the overflowing scroll width, not the viewport, which
   makes them look shifted. Any element that legitimately needs horizontal
   scroll (e.g. image thumbnail strips) still gets it via its own overflow-x. */
html, body {
    max-width: 100%;
    overflow-x: hidden;
}