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

body {
    background-color: rgb(51, 199, 215);
    color: rgb(246, 109, 177);
    font-family: verdana;
    background-image: linear-gradient(rgb(51, 199, 215), rgb(255, 0, 212));
    background-attachment: fixed;
    }



header {
    background-color: rgb(138, 63, 170);
    width: 50%;
    padding: 25px 0px;
    margin: 20px auto;
    color: rgb(100, 237, 244);
    text-align: center;
    outline: 4px solid rgb(247, 98, 210);
    border-radius: 20px;
    outline-offset: -12px;
    font-family: "Lobster Two";
    font-size: 150%;
    text-shadow: 2px 8px 6px rgb(67, 14, 47);
}

/* adjacent selector - the p that's next to h1 */
h1+p {
    margin-top: 8px; 
    text-align: center;
}
.pagedescription {
    margin-bottom: 5%;
}

/* thumbnail rules */
#thumbnails {
    text-align: center;
}

#thumbnails figure {
    width: 200px; height: 200px;
    border: 4px solid white;
    margin: 10px;
    display: inline-block; /* behaves both like an inline element AND a block */
    border-radius: 30%;
}

#thumbnails a {
    display: block; /* makes the inline anchor into a block element */
    width: 100%; height: 100%; /* fill the space of the parent figure */
    /* border: 4px solid orange; */
    /* background-size: 100%; */
    /* filter: saturate(red); - filter is fun to play around with too */
    border-radius: 30%;
}


/* this is the anchor's third child in the set */
/* copy this block and change which child to use for the other photo positions */
#thumbnails figure:nth-child(1) a {
    background-image: url(../images/photostory/Thumbs/disneyFunny_thumb.jpg);
    background-size: 200px;
    
}
#thumbnails figure:nth-child(2) a {
    background-image: url(../images/photostory/Thumbs/disneyCoaster_thumb.jpg);
    background-size: 100%;
    
}
#thumbnails figure:nth-child(3) a {
    background-image: url(../images/photostory/Thumbs/kwikEmart_thumb.jpg);
    background-size: 100%;
}
#thumbnails figure:nth-child(4) a {
    background-image: url(../images/photostory/Thumbs/mexicoDowntown_thumb.jpg);
    background-size: 100%;
}
#thumbnails figure:nth-child(5) a {
    background-image: url(../images/photostory/Thumbs/mexicoLunch_thumb.jpg);
    background-size: 100%;
}
#thumbnails figure:nth-child(6) a {
    background-image: url(../images/photostory/Thumbs/oregonCoast_thumb.jpg);
    background-size: 100%;
}
#thumbnails figure:nth-child(7) a {
    background-image: url(../images/photostory/Thumbs/oregonCoastTree_thumb.jpg);
    background-size: 100%;
}
#thumbnails figure:nth-child(8) a {
    background-image: url(../images/photostory/Thumbs/mtHood_thumb.jpg);
    background-size: 100%;
}
#thumbnails figure:nth-child(9) a {
    background-image: url(../images/photostory/Thumbs/sistersBridge_thumb.jpg);
    background-size: 100%;
}
#thumbnails figure:nth-child(10) a {
    background-image: url(../images/photostory/Thumbs/spaceNeedle_thumb.jpg);
    background-size: 100%;
}


nav {
    text-align: center;
    font-size: 150%;
    width: 100px;
    margin: auto;
    }

.homebutton {
    text-align: center;
    font-size: 150%;
    margin-bottom: 10px;
    background-color: rgb(0, 255, 255, .8);
    border-radius: 10px;
    padding: 10px;
    transition: all .3s ease-in-out;
    color: white;
}
.homebutton {
    background-color: rgb(0, 255, 255, .8);
    border-radius: 10px;
    padding: 10px;
    transition: all .3s ease-in-out;
    color: white;
    
}
.homebutton:hover {
    background-color: purple;
}
.homebutton:visited {
    color: rgb(80, 2, 80);
}

figcaption {
    border: 4px solid rgb(255, 255, 255);
    width: 1000px;
    position: absolute;
    background-color: rgba(250,250,250,.3);
    padding: 10px;
    text-align: center;
    line-height: 1; font-size: 14pt;
    left: 17%;
    color: white;
}