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

:root {
    font-size: 62.5%;
}

body {
    background-color: black;
    color: aliceblue;
}

header {
    border: 2px solid transparent;
    text-align: center;
}

header h1 {
    font-family: 'Momo Signature', cursive;
    font-weight: 400;
    font-style: normal;
    font-size: 3rem;
}

nav a {
    /* text-decoration: none; */
    color: aliceblue;

}

main.album { 
    border: 2px solid transparent;
    min-height: 200px;
    display: flex;
}

main.album section {
    border: 2px solid transparent;
    min-height: 300px;
}

.thumbnails {
    flex: 0 0 450px;
    display: flex;
    justify-content: center;
    flex-flow: row wrap;
    gap: 20px;
    padding: 10px 0;
}

.thumbnails figure {
    border: 2px solid transparent;
    flex: 0 0 150px;
    aspect-ratio: 1;
    background-size: fill;
    background-position: center;

}

.thumbnails figure:hover {
    filter: opacity(95%);
    cursor: pointer;
}

figure#tn1 {
    background-image: url(/cis195/images/photo-album/crater-lake_tn.jpg);
}

figure#tn2 {
    background-image: url(/cis195/images/photo-album/haystack-rock_tn.jpg);
}

figure#tn3 {
    background-image: url(../images/photo-album/lake_tn.jpg);
}

figure#tn4 {
    background-image: url(../images/photo-album/man-under-mtn_tn.jpg);
}

figure#tn5 {
    background-image: url(../images/photo-album/mt-hood_tn.jpg);
}

figure#tn6 {
    background-image: url(../images/photo-album/multnomah-falls_tn.jpg);
}

figure#tn7 {
    background-image: url(../images/photo-album/river_tn.jpg);
}

figure#tn8 {
    background-image: url(../images/photo-album/seattle_tn.jpg);
}

.viewer {
    flex: 1 1 auto;
    text-align: center;
    /* margin: 50px; */
}

.viewer #bigimage {
    width: 75%;
    padding: 10px;
    align-items: center; 
}

.viewer figcaption {
    text-align: center;
    font-size: 2rem;
}

footer {
    text-align: center;
    padding-top: 200px;
}