* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* Header styling */
.hero-header {
    /* Full viewport width */
    width: 100vw;
    /* 16:9 aspect ratio (9/16 = 0.5625) */
    aspect-ratio: 16 / 9;
    /* Background image */
    background-image: url('peterb-imgs/ring-of-fire.webp'); /* Replace with your image path */
    background-size: cover; /* Scales image to cover the header */
    background-position: center; /* Centers the image */
    background-repeat: no-repeat;
    /* Center content */
    display: flex;
    justify-content: center;
    align-items: center;
    /* Ensure header doesn't exceed viewport width */
    max-width: 100%;
}

/* Text styling */
.header-text {
    color: white; /* Adjust as needed */
    font-family: "Open Sans", sans-serif;
    font-size: clamp(2rem, 5vw, 4rem); /* Responsive font size */
    text-align: center;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5); /* Optional: improves readability */
    padding: 1rem; /* Optional: adds spacing around text */
}
.hero-header {
  max-height: 30vh;
}


h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6, navbar  {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}

body, p {
  font-family: "Tinos", serif;
  font-weight: 400;
  font-style: normal;
}
.bold {
  font-family: "Tinos", serif;
  font-weight: 700;
  font-style: normal;
}
.em {
  font-family: "Tinos", serif;
  font-weight: 400;
  font-style: italic;
}
.embold {
  font-family: "Tinos", serif;
  font-weight: 700;
  font-style: italic;
}

/*
.open-sans-<uniquifier> {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: <weight>;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
}
.tinos-regular {
  font-family: "Tinos", serif;
  font-weight: 400;
  font-style: normal;
}
.tinos-bold {
  font-family: "Tinos", serif;
  font-weight: 700;
  font-style: normal;
}
.tinos-regular-italic {
  font-family: "Tinos", serif;
  font-weight: 400;
  font-style: italic;
}
.tinos-bold-italic {
  font-family: "Tinos", serif;
  font-weight: 700;
  font-style: italic;
}

*/