@charset "UTF-8";

/* Style of Index */
body {
  background-color: black;
  color: #e0f0f0; /* Light greenish-white */
  font-family: 'Arial', sans-serif;
  font-size: 110%;
  margin: 0; /* Reset default margin */
  padding: 0; /* Reset default padding */
}

/* Header styles */
header {
  background-image: url('backgroundheader.jpg'); /* Path to your image */
  background-size: cover; /* Ensures the image covers the entire area */
  background-position: center; /* Centers the image */
  height: 10vh; /* Reduced height */
  display: flex; /* Enables Flexbox for horizontal alignment */
  justify-content: space-between; /* Spreads the elements apart */
  align-items: center; /* Aligns items vertically at the center */
  padding: 10px 20px; /* Adds some padding around the header */
  background-color: #333; /* Dark background for the header */
  color: #fff; /* White text for contrast */
  margin: 0; /* Removes default margin */
  border-bottom: none; /* Removes any border at the bottom */
}

/* Logo styles */
header figure {
  margin-top: 10px; /* Adds space between the logo and the top of the page */
  margin-bottom: 0; /* Removes bottom margin */
}

/* Navigation styles */
nav {
  display: flex; /* Flexbox to align the nav links horizontally */
  gap: 15px; /* Adds space between the links */
  margin-right: 3%; /* Aligns the nav menu with the end of the hr element */
}

/* Navigation link styles */
nav ul {
  list-style-type: none; /* Removes default bullet points from list */
  margin: 0; /* Removes default margin */
  padding: 0; /* Removes default padding */
}

nav ul li {
  display: inline; /* Displays list items inline */
}

nav ul li a {
  color: #e0f0f0; /* Light greenish-white for the links */
  text-decoration: none; /* Removes default underline from links */
  font-size: 0.9em; /* Slightly smaller font size */
}

nav ul li a:hover {
  color: #ffffff; /* Changes color to white on hover */
  text-decoration: underline; /* Adds underline on hover */
}

/* Main page styles */
#mainpage {
  padding: 20px; /* Adds some padding around the main content */
  margin: 0 3%; /* Adds margin to the left and right */
}

/* General link styles */
a:link, a:visited {
  color: #e0f0f0; /* Light greenish-white */
}

a:hover {
  color: #ffffff; /* Pure white */
  text-decoration: underline; /* Adds underline on hover */
}

a:active {
  color: #a0c0c0; /* Even darker greenish-white */
}

/* Header text styles */
h1 {
  text-align: center;
  font-family: 'Playfair Display', serif; /* Example of serif contrast */
  color: #ffffff; /* Pure white color for h1 */
  font-size: 3em; /* Font size */
}

/* Paragraph styles */
p {
  line-height: 1.3; /* Adjust this value as needed */
  margin-bottom: 20px; /* Adjust this value as needed */
  margin-left: 2em; /* Indent 2em from the left */
  margin-right: 0.5em; /* Small margin to the right */
}

/* Blockquote styles */
blockquote {
  color: white; /* Sets text color to pure white */
  background-color: black; /* Optional: Set background to make the white text stand out */
  padding: 10px; /* Add some padding for better readability */
  text-align: center;
  font-style: italic; /* Optional: Italicize the text */
}

/* Footer styles */
footer {
  background-color: #333; /* Dark background for the footer */
  color: #fff; /* White text for contrast */
  padding: 10px 20px; /* Adds some padding around the footer */
  text-align: center; /* Centers the text in the footer */
  font-size: 0.8em; /* Smaller font size for footer text */
}

footer p {
  margin: 5px 0; /* Adds some margin around the paragraphs in the footer */
}

/* Articles section styles */
.articles-section {
  font-size: 0.9em; /* Slightly smaller font size for articles */
  margin: 20px 2em; /* Adds margin around the articles section */
  text-align: justify; /* Ensures full justification for text */
}

.articles-section h3 {
  margin-left: 0; /* Resets margin for h3 within the articles section */
}

/* Responsive adjustments */
@media (max-width: 768px) {
  header {
    flex-direction: column; /* Stacks header elements vertically on small screens */
    height: auto; /* Adjust height for small screens */
  }

  nav {
    flex-direction: column; /* Stacks nav links vertically on small screens */
    align-items: center; /* Centers nav links on small screens */
    margin-right: 0; /* Resets margin for small screens */
  }

  nav ul li {
    display: block; /* Displays list items as block elements */
    margin: 5px 0; /* Adds some margin around the list items */
  }
}

/* Horizontal rule styles */
hr {
  margin: 0; /* Removes default margin */
  border: none; /* Removes default border */
  border-top: 1px solid #e0f0f0; /* Adds a custom top border */
}