/* Basic Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
  line-height: 1.6;
  color: #333;
  background-color: #f9f9f9;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  padding: 1rem;
}

header {
  background-color: #2c3e50; /* A slightly different color for header */
  color: #ecf0f1; /* Lighter text color for contrast */
  padding: 1.5rem 1rem; /* More padding */
  text-align: center;
  margin-bottom: 1.5rem; /* More space below header */
  border-radius: 4px;
}

header h1 {
  margin-bottom: 0.5rem;
  font-size: 2em; /* Larger heading */
}

nav a {
  color: #ecf0f1;
  margin: 0 0.75rem; /* Slightly more margin */
  text-decoration: none;
  font-weight: bold;
}

nav a:hover {
  text-decoration: underline;
  color: #ffffff;
}

main {
  flex-grow: 1;
  max-width: 800px;
  width: 100%; /* Ensure it takes full width up to max-width */
  margin: 0 auto 1.5rem auto; /* Centering and bottom margin */
  padding: 2rem; /* More padding inside main content */
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Slightly more pronounced shadow */
}

h1, h2, h3, h4, h5, h6 {
  margin-bottom: 1rem; /* More space below headings */
  color: #2c3e50; /* Consistent heading color */
}

footer {
  text-align: center;
  padding: 1.5rem 1rem;
  font-size: 0.9em;
  color: #7f8c8d; /* Softer footer text color */
  background-color: #ecf0f1; /* Light background for footer */
  border-top: 1px solid #bdc3c7; /* Subtle top border */
  border-radius: 4px;
  margin-top: auto; /* Pushes footer to the bottom */
}
/* Apply to the main content area */
main {
  /* If the background of 'main' itself needs to be a clean, light color,
     you can set it here. For example:
     background-color: #ffffff; /* or a very light gray like #f8f9fa */
  */

  /* Set a default text color for content directly within main.
     #333333 is a dark gray that offers good contrast on light backgrounds
     without being as stark as pure black. */
  color: #333333;
}

/* Target common text elements within main to ensure they adopt a readable color.
   This is helpful if they have their own styles that currently result in low contrast. */
main p,
main li,
main span,
main td, /* Table cells */
main th, /* Table headers */
main div { /* Generic containers that might hold text */
  /* You can either set the color directly or use 'inherit' if you want them
     to pick up the color set on the 'main' tag directly.
     Explicitly setting it can be more robust. */
  color: #333333;
}

/* Headings often benefit from being a bit darker or bolder for emphasis.
   #1a1a1a is a very dark gray, close to black, providing strong emphasis. */
main h1,
main h2,
main h3,
main h4,
main h5,
main h6 {
  color: #1a1a1a;
}

/* Links need to be clearly identifiable and meet contrast requirements. */
main a {
  color: #0056b3; /* A standard, accessible blue that contrasts well on light backgrounds. */
  /* text-decoration: underline; /* Recommended for accessibility, so links are not identified by color alone. */
}

main a:hover,
main a:focus {
  color: #003d80; /* A darker shade of blue for hover/focus states, maintaining good contrast. */
  /* text-decoration: none; /* Optional: some designs remove underline on hover if distinction is clear. */
}

img, video {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto;
}

.content {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}

.content img, .content video {
    flex: 1 1 auto;
    margin: 1rem;
}

.content p {
    flex: 1 1 auto;
    margin: 1rem;
}

@media (max-width: 768px) {
    .content {
        flex-direction: column;
    }
}