body{
    background-color: skyblue;
    color: #234;

}

header{
    /* border: 2px solid red; */
    margin-bottom: 1%;
    text-align: center;
}
main#photos{
    /* border: 2px solid black; */
    display:flex;
    flex-flow: row wrap;
}
main#photos section{
    /* border: 4px solid orange; */
    min-height: 100px;
}
.thumbnails {
    flex: 0 25%;
    display: flex;
    justify-content: center;
    flex-flow:row wrap;
    height: 80%;
    justify-content: space-evenly;
    background-color: #f05d27;
    border-radius: 1rem 0 0 1rem;
}
.thumbnails figure{
    /* border: 4px solid hotpink; */
    flex: 0 40%;
    aspect-ratio: 1;
    background-size: cover;
    background-position: center;
    margin: 15px 0;
}
.thumbnails figure:hover {
    cursor: pointer;
}
/* .figure# {
    background-image: url(../images/catPhotos/);
} */
 .figure1 {
    background-image: url(../images/catPhotos/IMG20230504080533-thumb.webp);
}
.figure3 {
    background-image: url(../images/catPhotos/IMG20240910173516-thumb.webp);
}
.figure5 {
    background-image: url(../images/catPhotos/IMG20250421125250-thumb.webp);
}
.figure7 {
    background-image: url(../images/catPhotos/IMG20250616103926-thumb.webp);
}
.figure9 {
    background-image: url(../images/catPhotos/IMG20250519151804-thumb.webp);
}
.figure2 {
    background-image: url(../images/catPhotos/IMG20230615133247-thumb.webp);
}
.figure4 {
    background-image: url(../images/catPhotos/IMG20230615133256-thumb.webp);
}
.figure6 {
    background-image: url(../images/catPhotos/IMG20230623143448-thumb.webp);
}
.figure8 {
    background-image: url(../images/catPhotos/IMG_20210709_013310383-thumb.webp);
}
.figure10 {
    background-image: url(../images/catPhotos/IMG20250614200749-thumb.webp);
}

#bigimage{
    flex: 1 0 auto;
    max-width: 75%;
    background-color: #f05d27;
    border-radius: 0 1.75rem 1.75rem 1.75rem;
}
#mainfigure {
    display: flex;
    justify-content: center;
    flex-flow: column wrap;
}
#mainimg {
    max-height: 94svh;
    max-width: 70.5svw;
    margin: 0 2.5% 2.5%;
    min-height: 73svh;
    object-fit: contain;
    /* max-height: 100svh; */
}
#maincap {
    flex: 1 0 auto;
    margin: 1svh auto;
    min-height: 2em;
    width: 100%;
    text-align: center;
    color: #000d0d;
    font-size: 1.5em;
}