*{
    font-family: 'Times New Roman', Times, serif;
}
html, body {
    height: 100%;
    margin: 0;
}

h1{
    text-align: center;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}

header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

nav {
    flex: 1;
    display: flex;
    justify-content: center;
}

nav ul.lists {
    display: flex;
    list-style: none;
    gap: 20px;
}

.container { 
    position: relative; 
    /* Makes this box the reference for absolutely positioned children */
    width: 100vw;
    /* Full viewport width */
    height: 100vh;
    /* Full viewport height */
    overflow: hidden;
    /* Hide any image overflow when it is cropped */
}
.container img { 
    display: block; 
    /* Removes inline-image bottom gap */
    width: 100%; 
    /* Stretch to container width */
    height: 100%;
    /* Stretch to container height */
    object-fit: cover; 
    /* Fill container while preserving aspect ratio (may crop) */
}

.container h1 {
    text-align: center;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    font-size: 4rem; 
}

.container p {
    padding: 20px;
    text-align: left;
}

.overlay {
  position: absolute; top: 50%; left: 0;
  /* Take out of normal flow and place relative to .container */
  transform: translateY(-50%);
  /* Vertically center the overlay block */
  color: #fff; text-align: left;
  /* White, left-aligned text for readability */
  max-width: 48ch;
  /* Limit line length to ~48 characters (about 6–8 words) */
}

/* Button style for the call to action link */
.btn {
    display: inline-block;
    /* Behaves like text but allows padding/width */
    padding: 12px 20px;
    color: white;
    font-weight: 600;
    /* Slightly bolder text */
    text-decoration: none;
    /* Remove underline from the link */
    border: solid 4px;
    /* Thick outline */
}

.overlay .btn {
    display: block;
    /* Make the button its own line so we can center it */
    width: fit-content;
    /* Shrink width to match the text (plus padding) */
    margin: 12px auto 0;
    /* Center horizontally with auto side margins */
}