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

body {
  font-family: Arial, sans-serif;
  background-color: #f4f4f9;
}

header {
  background-color: #333;
  color: #yellow;
  padding: 1rem;
  text-align: center;
}

nav a {
  color: #fff;
  margin: 0 1rem;
  text-decoration: none;
}

main {
  padding: 2rem;
}

h2 {
  color: #333;
  margin-bottom: 1rem;
}

#newsContainer {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  align-items: center;
  justify-content:center;
  background-color: grey;
  padding: 10px;
}

#newsContainer .newsItem {
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 1rem;
  border-radius: 5px;
}

.newsItem{
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  background-color: #fff;
  border: 1px solid #ddd;
  padding: 1rem;
  border-radius: 5px;
  width: 75%;                  /* Full width of the display */
  height: auto;                 /* Automatic height based on content */         /* For absolute positioning of inner elements if needed */             /* Hide any overflow content */
  aspect-ratio: 11/3;
  justify-content: center;
}

.newsDate p{
  font-style: italic;
}

.newsData{
  display: flex;
  flex-direction: row;
  justify-content: center;
}

.newsBullets{
  text-align: start;
  margin: 5px;
  margin-left: 0px;
}

.newsArticle{
  display: flex;        /* Use flexbox for centering */      /* Center horizontally */
  flex-direction: column;
}

.newsArticle img{
  width: 100%;       /* Make the image fill the width of the parent div */
   height: 500px;
   padding: 25px;
}

.newsArticle p{
  margin-top: 2px;
}

.disclaimer {
  background-color: yellow;
  padding: 10px;
  border: 3px solid black;
}

footer {
  text-align: center;
  padding: 1rem;
  background-color: #333;
  color: #fff;
}
/* For screens larger than 768px */
@media (min-width: 768px) {
    .container {
        flex-direction: row;
    }
}

/* For screens smaller than 768px */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
    .item {
        width: 100%;
    }
}
.container {
    max-width: 1200px;
    margin: 0 auto;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
}
.container {
    max-width: 1200px;
    margin: 0 auto;
}
img, video {
    max-width: 100%;
    height: auto;
}
/* Credits Section Styling from adnan m. */
#credits {
  padding: 30px 20px;
  background-color: #e9ecef; /* Slightly different background for distinction */
  text-align: center;
}

.credits-container {
  max-width: 800px;
  margin: 0 auto;
}

#credits h3 {
  font-size: 1.8em;
  color: #333;
  margin-bottom: 15px;
}

#credits p {
  font-size: 1em;
  color: #555;
  line-height: 1.6;
  margin: 5px 0;
}

#credits a {
  color: #007bff;
  text-decoration: none;
  font-weight: bold;
}

#credits a:hover {
  color: #0056b3;
}
 /*  disclaimer section */
#disclaimer {
  background-color: yellow;
  padding: 10px;
  border-radius: 5px;
}

/* contact section */
#contact {
  text-align: center;          /* Centers text and content within the section */
  margin: 0 auto;              /* Centers the section horizontally */
  max-width: 600px;            /* Limits the section width, adjust as needed */
  padding: 20px;               /* Adds space inside for a clean look */
}

#contact h2 {
  margin-bottom: 10px;         /* Adds spacing between the heading and content */
}
/* i dont know whats the use of below this, but gpt gave me */
/* Base styles for desktop */
body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

.container {
    width: 80%;
    margin: auto;
}

/* Responsive layout for smaller devices */
@media (max-width: 768px) {
    .container {
        width: 95%;
        padding: 10px;
    }

    h1, h2, p {
        font-size: 1em; /* Adjust font sizes for readability on mobile */
    }
}

/* Further adjustments for very small screens */
@media (max-width: 480px) {
    h1, h2, p {
        font-size: 0.9em; /* Slightly smaller font sizes for compact screens */
    }
}
/* for heaeder yellow */
/* General styling for the body */
body {
  background-color: yellow; /* Set background color to black if desired */
  color: white; /* Default text color to white */
  font-family: Arial, sans-serif;
}

/* Styling for About Section to keep text yellow */
#about p {
  color: yellow; /* Set paragraph text color to yellow */
}

/* Optional: Heading and other custom styles */
h1 {
  color: yellow; /* Set heading color to yellow */
}

a {
  color: yellow; /* Make sure your links are also visible */
}