/* 
  Layout constraints:
  - Page width: between 256px and 600px
  - Centered on the screen
  - body and .container have no padding
  - Semantic sections (.header, .main, .footer) have padding
*/

/* Root / body as a flex centering wrapper */
body {
  margin: 0;
  padding: 0;
  background-color: #f0f0f0;

  display: flex;
  justify-content: center;
  align-items: flex-start; /* top-aligned instead of vertically centered */

  width: 100%;
  min-width: 320px;       /* safety floor for very small devices */
  min-height: 100vh;
}

/* Main content container */
.container {
  display: flex;
  flex-direction: column;
  align-items: stretch;

  width: 100%;
  min-width: 256px;
  max-width: 600px;

  margin: 0 auto;
  padding: 0;
  background-color: #ffffff;
}

/* Shared styles for semantic sections */
.header,
.main,
.footer {
  text-align: left;
  width: 100%;
  box-sizing: border-box; /* ensures padding doesn’t increase width */
  padding: 0.1in;
}

/* If you ever need different padding per section, override here:
.header { padding: 0.1in; }
.main   { padding: 0.1in; }
.footer { padding: 0.1in; }
*/