/* Mobile Viewport Meta equivalent (Note: @viewport is deprecated in modern CSS; use standard meta viewport in HTML) */

/* Base Body Styles */
body {
  margin: 0;
  padding: 0 16px;
  box-sizing: border-box;
  display: flex;
  justify-content: center; /* Centers the 800px column on larger screens */
}

/* Layout Container */
#main-content {
  display: flex;
  flex-direction: column;
  align-items: center;     /* Centers flex children horizontally */
  width: 100%;
  max-width: 600px;        /* Restricts column width to 800px */
  text-align: center;      /* Inherits centered text alignment to all child elements */
  padding-top: 2em;
}

/* Paragraph Wrapper Resets */
#main-content p {
  margin: 1rem 0;
  width: 100%;
}

#main-content img {
  display: block;
  width: 100%;             /* Expands image to 100% of the 800px column */
  max-width: 100%; 
  height: auto;            /* Preserves original aspect ratio */
  margin: 0 auto;
}

#main-content p {
  font-size: 1.5em; 
}