/*
    Basic CSS reset to remove default browser margins and padding.
*/
body {
    margin: 0;
    padding: 0;
    font-family: 'EB Garamond', serif; /* A fallback font */
    visibility: hidden; /* Initially hide the body content */
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
}

/*
    This container uses flexbox to center its content both horizontally and vertically.
    `min-height: 100vh` ensures it takes up the full height of the viewport.
*/
.container {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    /* gap: 20px; /* Space between items */
}

/*
    Styling for the "Tiberi" text.
    We apply the IM Fell Double Pica font, which we imported.
    The font size is set to a large value (e.g., 5rem) to make it prominent.
*/
.logo-text {
    font-family: 'IM Fell DW Pica', serif;
    font-style: italic; /* Explicitly set to italic for consistency */
    font-size: 5rem;
    font-weight: 400;
    color: #333; /* A dark gray color for a soft, elegant look */
    text-align: center;
    padding: 20px; /* Add some padding for spacing */
}

.logo-svg {
    width: 200px; /* Adjust the size as needed */
    height: auto; /* Maintains the aspect ratio */
    padding: 20px 10px 20px 20px;
}

.dictionary-entry {
    padding: 20px;
    margin-left: 0;
}

.page-footer {
    background-color: #f8f8f8; /* A very light gray background */
    color: #999; /* A medium gray for the text */
    padding: 20px;
    text-align: center;
    font-size: 0.8rem; /* Smaller font size for a subtle look */
}

.page-footer a {
    color: #999;
    text-decoration: underline; /* No underline on links */
    text-underline-offset: 4px; /* Slightly offset underline for better aesthetics */
    margin: 0 10px;
}

.page-footer a:hover {
    color: #333; /* Darker gray on hover for interaction feedback */
}

.page-header {
    max-height: 20dvh;
    position: relative;
    overflow: hidden;
    aspect-ratio: 2 / 1;
    width: 100%;
}

.header-video {
    position: absolute;
    top: -20%;
    left: -20%;
    width: 160%;
    height: 160%;
    filter: blur(5px);

    /* This is the crucial line: it tells the video to fill the space
        while maintaining its aspect ratio and cropping the excess. */
    object-fit: cover;
}

.nav-bar {
    display: flex;
    justify-content: center;
    /* background-color: #f8f8f8; */
    padding: 20px 0;
    font-family: 'EB Garamond', serif;
    font-size: 1.1rem;
    color: #999;
}

/*
    Styling for the individual links.
    `text-decoration: none` removes the default underline.
*/
.nav-bar a {
    color: #999;
    text-decoration: none;
    margin: 0 15px;
    letter-spacing: 1px;
    /* text-transform: uppercase;*/
    text-decoration: underline; /* No underline on links */
    text-underline-offset: 4px; /* Slightly offset underline for better aesthetics */
}

.nav-bar a:hover {
    color: #333;
}

.cta-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px; /* Space above the CTA button */
}

.cta-button {
    text-decoration: none;
    display: inline-block;
    padding: 15px 60px;
    margin: 0 auto 70px;
    /* background-color: rgb(182, 99, 72);*/
    background-color: rgb(209, 125, 98);
    color: #fff;
    border-radius: 0px;
    cursor: pointer;
    text-transform: uppercase;
}

.cta-button:hover {
    filter: brightness(1.05);
}

.hi {
    padding-right: 20px;
}

.drop-photo {
    width: 100%;
    max-width: 500px;
    height: auto;
    display: block;
    margin: 20px auto 10px;
}

.content {
    flex: 1;
    width: 100%;
    max-width: 800px; /* or whatever max width fits your design */
    margin: 0 auto;
    padding: 1rem;
    box-sizing: border-box;
    text-align: center;
}