body {
    margin: 0;
    font-family: "Roboto", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 1.2rem; 
    line-height: 1.2em; 
}

.container {
    /* width:800px; replace with max-width */
    height: 1400px; 
    margin: 0 auto;

    box-sizing: border-box;
    /* include padding, gap and margin in the total width/height */

    max-width: 800px;
    /* set max with of the container element */
    
    border: 1em solid orange;
    /* set border size, style, and colour  */
    
    padding-left: 40px;
    padding-right: 40px;
    /* set padding for left and right */
}

.relative-box {
    /* create container to act as starting point/relative element for .photo-caption to be positioned against */
    position: relative;
    padding-top: 1.5em;
}

.relative-box > .photo-caption {
    position: absolute;
    /* positioned in relation to its position: relative parent */
    top: 2em;
    left: 2em;
    /* position caption close to the top-left corner of the cat photo, on top of the photo */
    /* combinator selector to target the .photo-captain item */
}

.photo-caption {
    background-color: rgba(0,0,0, 0.6); 
    color: #fff; 
    padding: 15px; 
}

header {
    top: 0;
    /* so the browser knows we want to stick the item at the top of the page */
    position: sticky;
    /* makes item stick to parent even when page is scrolled */
    z-index: 100;  
    /* keeps the header on top of the other elements */
    background-color: #000; 
    color: #fff; 
    padding: 20px; 
}

/* CSS Challenge Instructions Instructions */ 

/* 1.
On container, adding a border and padding of 40px to the left and right. Make sure that the width of .container does not exceed 800px */
/* done */

/*2. 
Position .caption on top of the cat image. Include an example of a combinator selector in your answer  */
/* done */

/* 3. 
Create a sticky header at the top of the page. Make sure the head is always on top of other elements */ 
/* done */