body {
    color: #44697e;
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    margin: 0;
    padding: 0;
    line-height: 1.6;       /* Improves readability by adding a bit of space between lines */
  }

header {
    text-align: center;     /* Centers the text horizontally within the header */
    margin: 50px auto;      /* Centers the header within the body, with 50px margin on top and bottom */
    font-size: 2rem;        /* Sets the font size to 2 rem units, which is based on the root font size (often 16px by default) */
    letter-spacing:1rem;    /* Adds a large amount of space between each letter in the header tex */
    }

.image_box {
    height: 100%;           /* Sets the height of the image box to 100% of its containing element. */
    width: 100%;            /* The image box takes up the full width of its container. */
    display: flex;          /* Enables flexbox layout for the image box, making it easier to align and size the images within it. */
    margin: 0 auto;         /* Centers the image box horizontally */
    box-sizing: border-box; /* Ensures that padding and border widths are included in the total width and height, so the size of the element is easier to manage */
    }

    /*  
        flex-basis to 0 and flex-grow to 1. This means:Each image starts at a width of 0.
        They will equally share the available space in the container when the container expands or shrinks. 
    */        
.image {
    margin: 0;              /* Removes any default margin around the image */
    flex-grow: 1;           /* Allows the image to grow and fill available space within the .image_box containe */
    flex-basis: 0;          /* flex item will have no base size initially. It starts with a width or height of zero (depending on the flex direction). */
    transition: 1s;         /* Adds a smooth transition effect over 2 seconds when the size of the image changes */
    }

.image img {                /* refers to any <img> element that is inside an element with the class image */
    height: 75vh;           /* Sets the image height to 75% of the viewport heigh */
    width: 100%;            /* Makes the image as wide as its container */
    object-fit: cover;      /* Ensures the image covers its container, cropping parts of the image if necessary, without stretching */
    }

.image:hover {
    flex-basis: 75%;        /* When the user hovers over an image, it grows to 75% of the available space, creating a zoom-in effect */
    transform: scale(1.05); /* Slightly enlarges the image for a zoom-in effect */
    }

footer {
    text-align: center;    
    margin: 0 auto;
    letter-spacing: 0.2rem;
    font-size: 0.75rem; 
    }