* {
    margin: 0; padding: 0; border: 0; box-sizing: border-box;
}
body {
    background-color: lightseagreen;
    min-height: 100%; /* 100% of the broweser height */
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    background-image: url(../images/pink-flowers-back.webp); /* add background image from the images folder in this fasion */
}
/* ID selector */
#container {
    border: 10px solid darkgreen;
    min-height: 100vh; /* 100% of the viewport height */
}

h1 {
    background-color: hsl(120, 50%, 70%); 
    padding: 20px;
    text-align: center;
    font-weight: normal;
    margin: 2vw; /* 2% of the viewport width */
    border-radius: 10px;
    box-shadow: 0px 4px 2px;
    margin-bottom: 20px;

}

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

/* class attribute */
figure.photo {
    flex: 0 0 auto; /* this part is a mystery */
    border: 5px solid greenyellow; /* this border was temporary to figure out an image fitting issue */
    margin: 20px;
    width: 300px;
    height: 300px;
    border-radius: 50%; /* makes a square block element look like a circle */
    overflow: hidden; /* hides portion of the content that spills out */

}

/* descendent selector of an image within an element using a class attribute  */
.photo img {
    width: 100%; /* set the width of the image based on the parent figure width */
}

figcaption {
    /* border: 4px solid red; */
    text-align: center;
    background-color: yellow;
    height: 40%; /* a little more than 1/3 of the parent height */
    transform: translateY(-7px); /* moves the element position a little bit upward */
    color: deepskyblue;
    font-size: 20pt;
    line-height: 80px;
}

nav {
    text-align: center;
    font-size: 150%;
    }

    .button1 {
        background-color: rgba(146, 239, 191, 0.5);
        border-radius: 10px;
        padding: 10px;
        transition: all .3s ease-in-out;
        color: white;

        
    }
    .button1:hover {
        background-color: purple;
    }
    .button1:visited {
        color: rgb(80, 2, 80);
    }