/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/* GENERAL PAGE SETTINGS */
body {
    font-family: Helvetica, sans-serif; /* Font style for the whole page */
    margin: 0; /* Remove default browser spacing */
    padding: 0;
    background-color: #ffffff; /* Light grey background */
    color: #004B9C; 
}

/* HEADER STYLES */
header {
    background-color: #004B9C; /* Green background */
    color: white; /* White text */
    text-align: center; /* Center text */
    padding: 2rem 1rem; /* Spacing inside the header */
}

header h1 {
    margin: 0; /* Removes space above and below */
    font-size: 2.5rem;
}

.centered-image {
    display: block;      /* Makes the image a block element so margin auto works */
    margin: 0 auto;      /* Centers the image horizontally */
    width: 1000;        /* Makes the image smaller */
    height: auto;        /* Keeps the aspect ratio so it doesn’t stretch */
}

.conveyor {
  width: 100%;
  overflow: hidden;
  background: #f9f9f9;
}

.conveyor-track {
  display: flex;
  flex-wrap: nowrap;
  animation: scrollRight 29s linear infinite;
}

.conveyor-track img {
  height: 200px;
  width: auto;
  flex-shrink: 0;
}

/* Scroll right by 1000px (one set width) */
@keyframes scrollRight {
  0% {
    transform: translateX(-1000px); /* start showing second set */
  }
  100% {
    transform: translateX(0);       /* scroll right into first set */
  }
}



/* MAIN CONTENT AREA */
main {
    max-width: 800px; /* Limits width so it’s easier to read */
    margin: 2rem auto; /* Centers main content */
    padding: 0 1rem; /* Space inside edges */
}

/* INDIVIDUAL POST STYLING */
.post {
    background-color: white;
    margin-bottom: 1.5rem; /* Space between posts */
    padding: 1.5rem;
    border-radius: 8px; /* Rounded corners */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1); /* Soft shadow */
}

.post h2 {
    margin-top: 0;
    color: #004B9C; /* Match the header green */
}

.meta {
    font-size: 0.9rem; /* Slightly smaller text */
    color: #CC4C1B; /* Lighter grey for less emphasis */
}

/* FOOTER STYLES */
footer {
    text-align: center;
    padding: 1rem;
    background-color: #0D2444; /* Dark background */
    color: #FFA000; /* White text */
}