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

body {
    background-image: linear-gradient(150deg, pink, indigo);
    min-height: 100vh;
    font-family: 'Oswald', sans-serif;
}

#container {
    width: 80%; min-height: calc(100vh - 40px); 
    margin: 20px auto;
    background-color: rgba(56, 26, 25, 0.397);
    border: 4px solid rgb(36, 35, 35);
}

header {
    background-color: rgba(122, 40, 122, 0.226);
    width: 80%;
    padding: 25px 0px;
    margin: 20px auto;
    text-align: center;
    color: ivory;
    outline: 4px dotted rgba(76, 0, 130, 0.342);
    outline-offset: -4px 4px;
}

h1 {
    text-transform: uppercase;
    text-shadow: 3px 3px rgba(0, 0, 0, 0.699);
}

p {
    padding-top: 5px;
    text-shadow: 1px 1px rgba(0, 0, 0, 0.699);
}

/* thumbnail rules */

#thumbnails {
    text-align: center;
}

#thumbnails figure {
    width: 200px; height: 1000px;
    border: 4px solid rgba(0, 0, 0, 0.425);
    display: inline-grid;
}

#thumbnails a {
    display: block;
    width: 100%; height: 100%;
    background-size: 100%;
}

#thumbnails figure:nth-child(1) a {
    background-image: url(/photo_story/photos/thumbnail1.jpg);
}

#thumbnails figure:nth-child(2) a {
    background-image: url(/photo_story/photos/thumbnail2.jpg);
}

#thumbnails figure:nth-child(3) a {
    background-image: url(/photo_story/photos/thumbnail3.jpg);
}

#thumbnails figure:nth-child(4) a {
    background-image: url(/photo_story/photos/thumbnail4.jpg);
}

#thumbnails figure:nth-child(5) a {
    background-image: url(/photo_story/photos/thumbnail5.jpg);
}

#thumbnails figure:nth-child(6) a {
    background-image: url(/photo_story/photos/thumbnail6.jpg);
}

#thumbnails figure:nth-child(7) a {
    background-image: url(/photo_story/photos/thumbnail7.jpg);
}

#thumbnails figure:nth-child(8) a {
    background-image: url(/photo_story/photos/thumbnail8.jpg);
}

/* big picture styles */
.bigpicture {
    text-align: center;
}

.bigpicture img {
    width: 900px;
}

.bigpicture a[role=prev], .bigpicture a[role=next], .bigpicture a[role=homepage] {
    display: block;
    width: 100px; height: 100px;
    position: absolute;
}

.bigpicture a[role=prev] {
    top: 360px; left: 600px;
}

.bigpicture a[role=next] {
    top: 360px; right: 600px;
}

.bigpicture a[role=homepage] {
    top: 50px; left: 305px;
}


.bigpicture a[role=prev] img, .bigpicture a[role=next] img, .bigpicture a[role=homepage] img {
    width: 100%; height: 100%;
}