/* Reset rule */

* {
margin: 0; border: 0; padding: 0; box-sizing: border-box;
}

body {
	background-color: hsla(273 86% 79% / .5);
	min-height: 100%; /* 100% of the browser height */
	font-family: 'Oswald',sans-serif;
	background-image: url(../images/graphpaper.webp);
}

/* ID selector */
#container {
border: 10px solid hsl(62 52 90 / 0.5);
min-height: 100vh; /* 100% of the viewport height */
}

h1 {
	background-color: lightcoral;
	padding: 50px 20px;
	text-align: center;
	font-weight: italic;
	margin: 2vw;
	border-radius: 10px;
	box-shadow: 0px 4px 4px #222;
	font-size: 60px;
	text-shadow: 4px 4px black;
	color: hsla(209, 86%, 79%, 1);
}

/* photo array style */
#photo-array {
	display: flex; /* making the div a flexbot parent */
	justify-content: space-evenly;
}

/* class attribute */
figure.photo {
	flex: 0 0 auto;
	margin: 20px;
	width: 440px;
	height: 720px;
	border-radius: 50%; /* makes a square block element look like a circle */
	overflow: hidden;
	border: black;
}

/* descendent selector of an image in an element using a class attribute */
figure.photo img {
	width: 180%; /* relative to the parent */
}

figcaption {
	text-align: center;
	background-color: lightcoral;
	height: 40%; /* relative to the parent */
	transform: translateY(-10px); /* moves the element position */
	color: hsla(209, 86%, 79%, 1);
	font-size: 22pt;
	line-height: 80px; /* height of the block */
	text-shadow: 2px 2px black;
}