/* Reset some basic elements */
body, h1, h2, h3, p {
  margin: 0;
  padding: 0;
}

/* Ensure that the image does not exceed the viewport width */
img {
  max-width: 100%;
  height: auto;
}

/* This is the responsive grid layout for the main content */
main {
  display: block;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

/* Styling for the header */
header {
  width: 100%;
  margin-bottom: 20px;
}

/* Styling for the main content section */
#about {
  text-align: center;
  padding: 40px;
  background-color: #f5f5f5; /* A light grey background */
}

/* Styling for the footer */
footer {
  background-color: #333; /* A dark background for the footer */
  color: white;
  text-align: center;
  padding: 10px 0;
}

/* Media queries for responsiveness */
@media (max-width: 768px) {
  main, footer {
    padding: 10px;
  }

  #about {
    padding: 20px;
  }
}
header {
  background-image: url('FantasyHome.png');
  background-size: cover;
  background-position: center;
  height: 400px; /* or any appropriate height */
}

#companyLogo {
  display: block; /* This will allow you to use margin auto for centering */
  max-width: 50%; /* Adjust this value as needed to scale your logo */
  height: auto; /* This maintains the aspect ratio of the image */
  margin: 0 auto; /* This centers the image horizontally */
}