/* Global reset and box-sizing */
* {
    box-sizing: border-box; /* Set box model to include padding and borders in width/height calculations */
}

/* Root font stack */
:root {
    --font-main: "Helvetica Neue", Arial, sans-serif; /* Define main font family for the root element */
}

/* Fill viewport and base styles */
html,
body {
    height: 100%; /* Set HTML and BODY elements to fill entire viewport vertically */
    margin: 0; /* Remove default margins from HTML and BODY elements */
    overflow: hidden; /* Hide scrollbars for better full-screen experience */
    font-family: var(--font-main); /* Apply main font family defined in :root */
    background-color: #000; /* Fallback background */
}

/* Background image */
img {
    position: fixed; /* Pin background image to viewport using position: fixed */
    inset: 0; /* Set image dimensions to fill entire viewport */
    width: 100%; /* Set image width to 100% of its parent element (viewport) */
    height: 100%; /* Set image height to 100% of its parent element (viewport) */
    object-fit: cover; /* Fill viewport, crop if necessary */
}

/* Text overlay */
.overlay {
    position: fixed; /* Pin overlay to viewport using position: fixed */
    inset: 0; /* Set overlay dimensions to fill entire viewport */
    display: flex; /* Display overlay elements as a flexible container */
    align-items: center; /* Center vertically */
    justify-content: center; /* Center horizontally */
}

.bottom-text {
    position: absolute; /* Pin text to bottom of viewport using position: absolute */
    bottom: 0; /* Push text to bottom edge of viewport */
}

h1, h2 {
    color: #fff; /* Set heading colors to white */
    font-size: clamp(2rem, 8vw, 8rem); /* Scale heading font size based on screen width, with minimum and maximum limits */
    line-height: 1.2; /* Set line height for headings to 120% of font size */
    text-align: center; /* Center text horizontally */
    letter-spacing: 0.05em; /* Apply subtle letter spacing to headings */
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6); /* Add drop shadow effect to headings with dark color and soft edges */
}

h2 {
    font-size: clamp(2rem, 2vw, 8rem); /* Scale heading font size based on screen width, with minimum and maximum limits (different from h1) */
}