body {
  font-size: 16px; /* Base font size */
  font-family: Lato, sans-serif;
  color: rgb(61, 66, 70);
  margin: auto;
  width: 100%;
  text-align: center;
  }
  
body2, html2 {
  height: 100%; /* Ensures the body and html elements cover the full viewport height */
  margin: 0; /* Removes default browser margins */
}

main {
  margin: auto;
  width: 60%;
  text-align: center;
  border: 0px solid gray;
}

img.logo {
  width: calc(25%);
  height: auto;
  opacity: 0.75;
}

hr {
  width: 50%;
  height:3px;
  border-width:0;
  color: #ccc;
  background-color: #ddd;
  margin-top: 30px;
  margin-bottom: 30px;
}

h1 {
  font-size: 2em; /* 2.5 * 16 = 40px */
  font-family: "Playfair Display", Garamond, serif;
}

h2 {
  font-size: 1.33em; /* 1.875 * 16 = 30px */
  font-style: bold;
}

p,li {
  font-size: 1em; /* 1 * 16 = 16px */
}

p.nav-links {
  font-size: 1em;
  font-weight: normal;
}

.hero-text h1 {
  font-size: 4em;
  font-family: "Playfair Display", Garamond, serif;
  text-shadow: rgba(0, 0, 0, 0.4) 0px 0px 4px;
}

.hero-text p {
  font-size: 1.5em;
  font-style: normal;
  font-family: Lato, serif;
  text-shadow: rgba(0, 0, 0, 0.4) 0px 0px 4px;
}

/* The hero image container */
.hero-image {
  background-image: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url("./images/IMG_5568p3.jpg"); /* Linear gradient adds a dark overlay */
  /* height: 100vh; /* Sets the height to 100% of the viewport height (full screen height) */
  height: 450px;
  width: 100%; /* Ensures the container spans the full width of the screen */
  background-position: center; /* Centers the image within the container */
  background-repeat: no-repeat; /* Prevents the image from repeating */
  background-size: cover; /* Resizes the image to cover the entire container, potentially cropping the edges */
  position: relative; /* Required for absolute positioning of child elements (text) */
  margin-top: 25px;
  margin-bottom: 25px;
}

/* Place text in the middle of the image */
.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); /* Centers the text both horizontally and vertically */
  color: white;
}

/* unvisited & visited link */
a:link, a:visited {
  color: #2b8aad;
  text-decoration: none;
}

/* mouse over link */
a:hover {
  color: #999;
}

/*@media only screen and (max-width: 768px) {
  img.logo {
    width: calc(50%);
  }
}

@media only screen and (max-width: 480px) {
  img.logo {
    width: calc(100%);
  }
}*/