*   {
    margin: 0; padding: 0; border: 0; box-sizing: border-box;
    }
body
    {
    background-color: rgb(134, 248, 220);
    min-height: 100%; /* 100% of the browser height */
    font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    background-image: url(../images/wk04-background-image.jpg);
    background-size: cover;
    }

/* ID selector */
#container
    { 
    border: 10px solid rgb(208, 126, 247);
    min-height: 100vh; /* 100% Viewport height */
    border: 5px solid rgb(0, 38, 255);
    }

h1  
    {
    background-color: hsl(199, 100%, 70%); /*0-359, 0-100%, 0-100% (199 100% 70%, 1) new way to make the color transparent*/
    padding: 20px;
    text-align: center;
    font-weight: light;
    margin: 2vw; /* 2% of the viewport width */
    border-radius: 10px; /* with 1 value, the border radius is the same for all 4 corners */
    box-shadow: 0px 4px 2px black;
    }

/* styles my tripe set photo array */
#photo-array1 
    {
    display: flex;
    justify-content: space-between;
    }
    

/* styles my tripe set photo array */
#photo-array 
    {
    display: flex;
    justify-content: space-between;
    margin-top: 50px;  
    }

figure.photo img
    {
    width: 100%; /* set the width of the parent figure, go bigger to fill out the circle */
    }
figcaption
    {
    text-align: center;
    background-color: lightblue;
    transform: translateY(-10px); /* moves the element position a little up ward*/
    color: hsl(200, 89%, 25%);
    font-size: 22pt;
    padding: 20px 0px;
    border: 2px solid blue;
    
    }
.p
    {
    text-align: center;
    font-size: 20px;
    margin-top: 30px;
    background-color: aqua;
    border-radius: 50%;
    }