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

body {
    background-image: url(../images/dogbones.jpg); 
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    color: cadetblue; font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
    padding: 90px;
    ;
    text-align: center;
}

h1 {
    text-align: center;
    border: bottom 4px solid;
    margin: 20px: padding: 20px;
    box-shadow: 5px 5px 17px 20px;
    text-shadow: 2px 2px 1.5px #222  
     
}

h1 span {
    font-weight: normal;
}

.span1, .span2 {
    display: inline-block 1300px;
    width: 200px; height: 200px; margin: 20px;
    border: 5px solid #222;
    
}

.span1 {
background-color: thistle;
box-shadow: 4px 4px 3px cadetblue;
}

.span2 {
    background-color: thistle;
    box-shadow: 4px 4px 3px cadetblue;
}

article {
    color: black;
    text-shadow: 4px 4px 8px darkviolet;
}

.thumb_gallery {
    margin: 40px auto; 
    box-shadow: 4px 4px 5px cadetblue;
    border: 1px solid;
    overflow: hidden;
    width: auto;
    
}

.thumb_gallery figure {
float: left;
margin: 20px;
}

.thumb_gallery img {
    border-style: solid;
    border-color: darkslategray;
    border-width: 7px;
    background-position: center;
}


/* styles for the big picture pages  */

.big_image {

}

.big_image > div {
    float: left;
}

.big_image > div:nth-child(1) {
    width: 20%;
}

.big_image > div:nth-child(2) {
    width: 60%;
}

.big_image > div:nth-child(2) > img {
    width: 100%;
}

.big_image > div:nth-child(3) {
    width: 20%;
    
}

#previous {
    background-image: url(../images/pawprintthumb.jpg);
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    padding: 15px;
    width: 10%;
}

#next {
    background-image: url(../images/pawprintthumb.jpg);
    background-size: 50%;
    background-repeat: no-repeat;
    background-position: center;
    padding: 15px;
    width: 10%
    
}

#marie {
    text-shadow: 4px 4px 4px cadetblue;
    color: black;
}

#rooky {
    text-shadow: 4px 4px 4px cadetblue;
    color: black;
}

#sam {
text-shadow: 4px 4px 4px cadetblue;
    color: black;
}

#jack {
    text-shadow: 4px 4px 4px cadetblue;
    color: black;
}

#molly {
    text-shadow: 4px 4px 4px cadetblue;
    color: black;
}

#leroy {
    text-shadow: 4px 4px 4px cadetblue;
    color: black;
}

#scooter {
    text-shadow: 4px 4px 4px cadetblue;
    color: black;
}

#duke {
    text-shadow: 4px 4px 4px cadetblue;
    color: black;
    
}