/* Makes width and height calculations include padding and borders. */
* {
    box-sizing: border-box;
}

/* Sets the default page spacing, colors, background, and font. */
body {
    /* Removes the browser's default outer spacing. */
    margin: 0;
    /* Makes the background cover at least the full screen height. */
    min-height: 100vh;
    /* Sets the default text color. */
    color: #000000;
    /* Uses the image as a fixed, full-page background. */
    background: #080b10 url("BlackBackground.avif") center / cover fixed no-repeat;
    /* Uses a classic serif font for the page text. */
    font-family: Georgia, "Times New Roman", serif;
}

/* Controls the width and spacing of the main content area. */
.page-content {
    /* Keeps the content narrow enough to read on large screens. */
    width: min(1100px, calc(100% - 40px));
    /* Centers the content horizontally. */
    margin: 0 auto;
    /* Adds space above and below the content. */
    padding: 64px 0;
}

/* Styles the large page title. */
h1 {
    /* Removes the default top margin and adds space below the title. */
    margin: 0 0 36px;
    /* Uses a sand-gold color that stands out on the dark background. */
    color: #f3d58a;
    /* Makes the heading resize between its minimum and maximum sizes. */
    font-size: clamp(2.25rem, 6vw, 4.5rem);
    /* Centers the title. */
    text-align: center;
    /* Adds slight spacing between heading letters. */
    letter-spacing: 0.03em;
    /* Adds a dark shadow to improve readability. */
    text-shadow: 0 3px 12px rgb(0 0 0 / 70%);
}

/* Arranges the three boxes in an equal-width grid. */
.boxes {
    /* Turns the section into a CSS Grid container. */
    display: grid;
    /* Creates three equal columns. */
    grid-template-columns: repeat(3, 1fr);
    /* Adds space between the boxes. */
    gap: 24px;
    /* Makes all boxes stretch to the same row height. */
    align-items: stretch;
}

/* Provides the shared appearance for all three boxes. */
.time-box {
    /* Gives each box enough room for its content. */
    min-height: 280px;
    /* Adds space inside each box. */
    padding: 30px;
    /* Creates the visible outline; each box sets its own border color below. */
    border: 3px solid;
    /* Rounds the corners more dramatically. */
    border-radius: 50px;
    /* Adds depth against the background image. */
    box-shadow: 0 14px 30px rgb(0 0 0 / 45%);
    /* Centers text inside the boxes. */
    text-align: center;
    /* Smoothly changes the shadow when the mouse hovers over a box. */
    transition: box-shadow 180ms ease;
}

/* Changes only the shadow when a box is hovered; the box does not move. */
.time-box:hover {
    box-shadow: 0 18px 36px rgb(0 0 0 / 60%);
}

/* Styles the headings inside the boxes. */
.time-box h2 {
    /* Adds space below each box heading. */
    margin: 0 0 16px;
    /* Makes the box headings easy to notice. */
    font-size: 2rem;
}

/* Styles paragraphs inside the boxes. */
.time-box p {
    /* Adds space below each paragraph. */
    margin: 0 0 18px;
    /* Sets a comfortable paragraph size. */
    font-size: 1.08rem;
    /* Improves readability by adding space between lines. */
    line-height: 1.6;
}

/* Gives the Past box its orange outline and light peach background. */
.past-box {
    border-color: #b85c38;
    background: #f8d9c9;
}

/* Gives the Present box its teal outline and light teal background. */
.present-box {
    border-color: #238b8b;
    background: #cce9e5;
}

/* Gives the Future box its blue outline and light blue background. */
.future-box {
    border-color: #5267a8;
    background: #dce1f5;
}

/* Controls the size and shape of the hourglass image. */
.hourglass-image {
    /* Allows the image to be centered with automatic side margins. */
    display: block;
    /* Prevents the image from becoming wider than its container. */
    width: min(100%, 210px);
    /* Keeps the image's original proportions. */
    height: auto;
    /* Adds space around the image and centers it horizontally. */
    margin: 8px auto 22px;
    /* Adds a white outline around the image. */
    border: 2px solid #ffffff;
    /* Makes the image circular. */
    border-radius: 50%;
}

/* Styles the copyright text below the boxes. */
footer {
    /* Adds space between the boxes and footer. */
    margin-top: 34px;
    /* Matches the title's sand-gold color. */
    color: #f3d58a;
    /* Centers the copyright text. */
    text-align: center;
    /* Helps the footer stand out from the background. */
    text-shadow: 0 2px 8px rgb(0 0 0 / 70%);
}

/* Applies mobile-friendly layout changes on screens narrower than 760px. */
@media (max-width: 760px) {
    /* Reduces vertical spacing on smaller screens. */
    .page-content {
        padding: 40px 0;
    }

    /* Stacks the boxes vertically instead of using three columns. */
    .boxes {
        grid-template-columns: 1fr;
    }

    /* Allows each mobile box to size itself to its content. */
    .time-box {
        min-height: auto;
    }
}