:root {
    --base-font: "Montserrat", sans-serif; /* Set a base font stack */
    --main-color: #333; /* Define a main text color */
    --accent-color: #4CAF50; /* Define an accent color */
  }
  
  body {
    margin: 20px; /* Add some margin for content spacing */
    padding: 0;
    font-family: var(--base-font);
    background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,1)), url(../images/cross.jpg);
    background-repeat: no-repeat; /* Set background-repeat to no-repeat */
    background-size: cover;
    color: white;
  }
  
  h1, h2, h3 {
    font-weight: bold; /* Set boldness for headings */
  }
  
  h1 {
    font-size: 2em; /* Adjust heading size as needed */
  }
  
  h2 {
    font-size: 1.5em; /* Adjust heading size as needed */
  }
  
  h3 {
    font-size: 1.2em; /* Adjust heading size as needed */
  }
  
  p {
    font-size: 1em; /* Adjust paragraph font size */
    line-height: 1.5; /* Adjust line height for better readability */
    color: var(--main-color); /* Use defined color for text */
  }
  
  header {
    background-color: #f8f8f8;
    padding: 10px 20px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  header ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex; /* Use flexbox for responsive navigation */
    justify-content: flex-end; /* Align items to the right */
    gap: 20px;
  }
  
  header li {
    display: inline-block;
  }
  
  header a {
    text-decoration: none;
    color: var(--main-color);
  }
  
  #container {
    margin-top: 30px; /* Adjust margin for spacing */
    display: flex; /* Consider using flexbox or grid for layout */
    justify-content: center; /* Center horizontally if needed */
    align-items: center; /* Center vertically if needed */
  }
  
  #logo,
  #picture,
  #churchimg {
    aspect-ratio: 16/9; /* Set a consistent aspect ratio */
    background-size: cover; /* Ensure image covers the entire div */
    background-position: center; /* Center the background image */
  }
  
  #logo,
  #picture {
    width: 200px; /* Adjust image width as needed */
    height: auto; /* Maintain aspect ratio with width */
    padding: 10px; /* Adjust padding if needed for text spacing */
    text-align: center; /* Center text within the image container */
  }
  
  #churchimg {
    width: 100%; /* Full width */
    height: 400px; /* Adjust height as needed */
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)), url('../images/welcome.gif');
    background-size: cover;
    background-position: center;
    margin-top: auto;
  }