/* Basic styling for the body */
body {
  font-family: 'Roboto', sans-serif; /* Using Roboto font for a clean look */
  margin: 0;
  padding: 0;
  line-height: 1.6;
  color: #333; /* Basic text color */
  background: #f4f4f4; /* Light grey background for the whole page */
}

/* Style for images to make them responsive */
img {
  max-width: 100%; /* Ensures image is not wider than its container */
  height: auto; /* Scales the height automatically */
  display: block; /* Removes bottom space */
  margin: 0 auto; /* Centers the image */
}

/* Styles for tables within markdown content */
.container table tr:nth-child(odd) {
  background-color: #ececec; /* Light gray for odd rows */
}

.container table tr:nth-child(even) {
  background-color: #b9b9b9; /* Darker shade for even rows */
}

.container table {
  margin: 2.5rem 0; /* Space above and below the table */
  width: 100%; /* Full width */
  border-collapse: collapse; /* Removes space between cell borders */
}

.container td, .container th {
  border: 1px solid #ddd; /* Border for table cells */
  padding: 8px; /* Padding inside cells */
}

.container th {
  text-align: left;
  background-color: #b9b9b9; /* Background for table headers */
  color: black; /* Text color for table headers */
}

/* General container style for content */
.container {
  max-width: 800px; /* Maximum width */
  width: 100%; /* Adaptive width */
  margin: auto; /* Centering the container */
  padding: 0 20px; /* Padding on sides */
  box-sizing: border-box; /* Border and padding included in width */
  overflow: hidden; /* Prevents content overflow */
}

/* Header styling */
header {
  text-transform: uppercase; /* Uppercase letters for header */
  border-bottom: 2px solid #ccc; /* Bottom border for header */
  padding: 10px 0; /* Padding above and below the header */
  margin-top: 20px; /* Space above the header */
  font-size: 1em;
  font-family: 'Nunito Sans', sans-serif; /* Nunito Sans font for the header */
  font-weight: 500;
}

header a {
  color: #333; /* Link color in the header */
  text-decoration: none; /* No underline for links */
  text-transform: uppercase; /* Uppercase letters for links */
  font-size: 16px; /* Font size for links */
}

.main-header {
  text-align: center; /* Center aligning the main header */
  margin: 0; /* Removing default margin */
}

/* Styling for blog post articles */
article {
  margin-bottom: 40px; /* Space below each article */
}

.post-title {
  font-size: 24px; /* Font size for post titles */
  color: #333; /* Text color for post titles */
}

.post-date {
  font-size: 14px; /* Font size for post date */
  color: #5d5c5c; /* Text color for post date */
}

/* Responsive design adjustments */
@media (max-width: 768px) {
  .container {
    width: 100%; /* Full width on smaller screens */
    padding: 10px; /* Increased padding */
  }

  header {
    width: 100%; /* Full width header on smaller screens */
  }
}