figure {
	/*
		By setting a positioning for our figure element, any absolutely positioned elements (inside the element) remain inside
	*/
	position: relative;
	max-width: 100%;
}

figcaption {
	/*
		Setting position to absolute for our caption allows us to
		position it overtop of the image. In this case to make sure
		it appears overtop we set a bottom value of 0, which
		positions it at the very bottom of our figure element.
	*/
	position: absolute;
	bottom: 0;

	/*
		Setting a z-index allows us to layer things differently, the
		default is 0 and any higher values layer items overtop
		z-index only works if a positioning has been set.
	*/
	z-index: 10;

	/*
		Setting an rgba() value is much like setting an rgb() value 
		but it adds on an 'alpha' channel to set the transparency of the colour. This can be quite helpful in setting colours with a bit of transparency to them. Alpha values much like the opacity property are set on a 0-1 scale, 0 being fully transparent and 1 being not-at-all transparent.
	*/
	background-color: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 0.75rem;
}



img {
	/*
		You may have noticed a small little space at the bottom of the image element, that means our caption does not quite align with the image. This is because the <img> element by default is an 'inline' element. To remove this space we have to set it to display as a 'block' element.
	*/
	display: block;
}


#showcase {
	/*
		Setting position to fixed means that our navigation will not move when we scroll the page. Also, because we are positioning something fixed, the other elements on the page ignore it when they are layed out (pay attention to the first and second headings on the page when switching this off and on)
	*/
	position: fixed;

	/*
		We can only specify distance from top, right, bottom or left when we have specified a positioning type other than static (the default value)
	*/
	top: 0;

	/*
		Setting a z-index property changes the layering of items that also have a positioning set. In this example, setting the z-index to 100 means that our navigation will be layered above anything up to layer 99.
	*/
	z-index: -1;

	}

/*
	We do not want our navigation to be fixed by default as it takes up too much of the screen if fixed. Using the breakpoints we defined in grid.css we can have it become fixed only at a specific size.
*/
@media (min-width: 51.25rem) {
	
    #showcase > .container > img {
        width: 200%;
    }
	
	/*
		At this size our fixed navigation overlaps with our heading, making it not visible. In this case we can use margin-top to add some space at the top of our heading allowing it to appear below the navigation.
	*/
	h1 {
		margin-top: 8rem;
	}

}




@media (min-width: 70rem) {

	/* 
		Because our navigation stacks differently at this size we probably want to adjust the spacing at the top of the heading again. An example is provided below.
	*/
	h1 {
		margin-top: 5rem;
	}

}