body {
  background-color: #6D3131;
  margin: 0;
  padding: 0;
  position: relative; /* Set position relative to allow absolute positioning of children */
  height: 100%; /* Full height of the viewport */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

/* Add a black background color to the top navigation */
.topnav {
  position: fixed;
  top: 0%;
  height: 10vh; /* Set the height of the top bar */
  width: 100%; /* Full width */
  background-color: rgb(0, 48, 48);
  overflow: hidden;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  z-index: 1000;
}

/* Style the links inside the navigation bar */
.topnav a {
  float: left;
  color: #f2f2f2;
  text-align: center;
  text-decoration: none;
  font-size: 3vw;
  font-family:Verdana, Tahoma, sans-serif;
  border: solid 5px black;
}

/* Change the color of links on hover */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Add a color to the active/current link */
.topnav a.active {
  background-color: #811136;
  color: white;
}
h1,h2, p {
  color: white;
  text-align: center;
  margin: 0; /* Remove default margin */
  padding: 0;
}

@media (max-width: 1300px) {
  .home {
      flex-direction: column;
      align-items: center; /* Stack items on smaller screens */
      padding-top: 15vh; /* Adjust top padding to avoid nav bar overlap */
  }

  .left,
  .right {
      flex: none;
      width: 100%; /* Full width for both sections on small screens */
      text-align: center;
  }

  .photo {
      width: 80%; /* Scale down image to fit smaller screens */
  }

  /* Stack navigation links vertically on smaller screens */
  

  .topnav a {
      font-size: 4vw; /* Make the text smaller for mobile devices */
  }
}

/* Responsive Design for smaller screens */
@media (max-width: 768px) {
  .home {
      flex-direction: column;
      align-items: center; /* Stack items on smaller screens */
      padding-top: 15vh; /* Adjust top padding to avoid nav bar overlap */
  }

  .left,
  .right {
      flex: none;
      width: 100%; /* Full width for both sections on small screens */
      text-align: center;
  }

  .photo {
      width: 80%; /* Scale down image to fit smaller screens */
  }

  /* Stack navigation links vertically on smaller screens */
  .topnav {
      grid-template-columns: 1fr 1fr; /* 2 columns for better stacking on mobile */
  }

  .topnav a {
      font-size: 4vw; /* Make the text smaller for mobile devices */
  }
}

/* Further adjustments for very small screens */
@media (max-width: 480px) {
  .topnav a {
      font-size: 5vw; /* Further reduce font size */
      padding: 3px; /* Adjust padding for better spacing */
  }

  .topnav {
    grid-template-columns: 1fr 1fr; /* 2 columns for better stacking on mobile */
}

  .photo {
      width: 90%; /* Further reduce image size */
  }
  
}
.home {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  font-size: 30px;
  gap: 80px;
   flex-wrap: wrap; /* Allow wrapping on smaller screens */
}

.home p {
  font-size: 50px;
  font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

.home h1 {
  font-size: 80px;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

.photo {
  margin-top: 147px;
}

.right {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.left {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  gap: 100px;
}