.broider {
    border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAACRElEQVR4AdTXUYobQQxF0clsLovKdxaV1U36dHSNqabBMP5IBS5SvaeqloQDyefH3Z/fP78+cOenq0HnNfLwql6dO5jzfaNT8L+Ez3NrT50/zr/+/PgAD3cdq4EaVCcHD+lFGtQgXQ4eRt9oo7qGKSDHTHJu1ZmH9CINapAuBw/pRRrUIF0OHkbfaKPT8WNznddoSpjyGRrW+s48PN+R01DdGnlQe7DhRo+uz7/x62Sd8035THp1a8x/viNPX+s756s92GijS+fnVmk3kyU/4jHt+ft2Bxly5KcX09UgXY780Tfa6NL5uR2aqSDHTHYb1MAdyHF7YQw1cAdyjF3YaKO1/K5oG3jXe/PORhv1u8B0/vhbbyvgIf/d0dvwLcjRd+QHG23UFDi6PrcpRxPJkZ/+3dh73kbvybH4G210naTzGk2JJl39V8/d9xbu7vEw/oYbbdKZ4BLyTYlLwYuCu+i9u2uLv9FG69yU6Nyk/85fj38DpH83+hZ6v/c68zDnjTaqazSRHDPJ2zfZd4q+hbvv8Q422miTvSu2mXe9N+9svNE2cvwuzt9n55nsNlT37nvz7oYbnc7PLdpKq5MjP72YrgbpcuSnF9PVIF2Oxd9oo0vnDXaJpkT1RRouF0bgofoiDVN2CTyMsdFGdY0mnQkuIV/tM+mXCyPkP9+Rp0/ZJSz+RhttFFNimeT8fxSNh+qLNKhBuhw8pBdpUIN0OXiQH2y40aPrc3umQBPKkZ9eTFeDdDny09eoBtXJUZ38YJuN/gUAAP//RQfo9wAAAAZJREFUAwBP3Uxhlj3UoQAAAABJRU5ErkJggg==") 14 / 14px / 0 round;
    border-width: 10px;
    border-style: solid;
    background-color: rgba(10, 58, 10, 0.91);
    padding: 18px 36px;
}

.header-broider {
    border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAACRElEQVR4AdTXUYobQQxF0clsLovKdxaV1U36dHSNqabBMP5IBS5SvaeqloQDyefH3Z/fP78+cOenq0HnNfLwql6dO5jzfaNT8L+Ez3NrT50/zr/+/PgAD3cdq4EaVCcHD+lFGtQgXQ4eRt9oo7qGKSDHTHJu1ZmH9CINapAuBw/pRRrUIF0OHkbfaKPT8WNznddoSpjyGRrW+s48PN+R01DdGnlQe7DhRo+uz7/x62Sd8035THp1a8x/viNPX+s756s92GijS+fnVmk3kyU/4jHt+ft2Bxly5KcX09UgXY780Tfa6NL5uR2aqSDHTHYb1MAdyHF7YQw1cAdyjF3YaKO1/K5oG3jXe/PORhv1u8B0/vhbbyvgIf/d0dvwLcjRd+QHG23UFDi6PrcpRxPJkZ/+3dh73kbvybH4G210naTzGk2JJl39V8/d9xbu7vEw/oYbbdKZ4BLyTYlLwYuCu+i9u2uLv9FG69yU6Nyk/85fj38DpH83+hZ6v/c68zDnjTaqazSRHDPJ2zfZd4q+hbvv8Q422miTvSu2mXe9N+9svNE2cvwuzt9n55nsNlT37nvz7oYbnc7PLdpKq5MjP72YrgbpcuSnF9PVIF2Oxd9oo0vnDXaJpkT1RRouF0bgofoiDVN2CTyMsdFGdY0mnQkuIV/tM+mXCyPkP9+Rp0/ZJSz+RhttFFNimeT8fxSNh+qLNKhBuhw8pBdpUIN0OXiQH2y40aPrc3umQBPKkZ9eTFeDdDny09eoBtXJUZ38YJuN/gUAAP//RQfo9wAAAAZJREFUAwBP3Uxhlj3UoQAAAABJRU5ErkJggg==") 14 / 14px / 0 round;
    border-width: 10px;
    border-style: solid;
    background-color: rgba(10, 58, 10, 0.91);
    padding: 18px 36px;
    width: 90%;
}

header {
    padding: 15px;
    text-align: center;
    font-size: 35px;
    font-family: natureFont;
    color: aliceblue;
}

article {
    padding: 10px;
    text-align: center;
    font-size: 25px;
    font-family: natureFont;
    color: floralwhite;
}

.container{
    height: 100%;
    width: 100%;
}

.storiesContainer{
    display: flex;
    flex-direction: row; 
    height: 85%; 
    width: 95%;
}


.storyImagesContainer{
    display: flex; 
    flex-direction: column;
}

.spacer{
    height: 5vw;
}

.inatContainer{
    display: flex;
    flex-direction: row; 
    height: 75%; 
    width: 95%;
}

.observationGrid{
    display: grid;
    grid-template-columns: auto auto auto;
    padding: 10px;
    column-gap: 5px;
}

.natureJournal{
    height: 80%; 
    width: 95%;
}

.holdingGrid{
    display: grid;
    grid-template-columns: auto auto auto auto;
    padding: 20px;
    padding-top: 10px;
    padding-bottom: 20px;
    column-gap: 10px;
}

@font-face {
    font-family: natureFont;
    src: url(Pine\ Forest\ Personal\ Use\ Only.otf)
}

.book {
    width: 400px;
    height: 585px;
    position: relative;
    transform-style: preserve-3d;
}

.cover {
    background-image: url(Nature_Journal_-_Front_Cover-removebg-preview.png);
    width: 100%;
    height: 100%;
    border-radius: 0 15px 15px 0;
    box-shadow: 0 0 5px rgb(41, 41, 41);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 11;
    transform-origin: center left;
    transition: transform 1s;
}

.cover label {
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.page label {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
}

input {
    display: none;
}

.backcover {
    background-image: url(Nature_Journal_-___Backcover-removebg-preview.png);
    width: 100%;
    height: 100%;
    border-radius: 0 15px 15px 0;
    box-shadow: 0 0 5px rgb(41, 41, 41);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    z-index: 0;
}

.page {
    position: absolute;
    background-color: white;
    width: 350px;
    height: 555px;
    border-radius: 0 15px 15px 0;
    margin-top: 10px;
    transform-origin: left;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    transform: translateX(30px);
}

.page img {
    width: 100%;
    height: 100%;
    border-radius: 15px 0 0 15px;
}

.front-page {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    box-sizing: border-box;
    padding: 1rem;
}

.back-page {
    position: absolute;
    width: 100%;
    height: 100%;
    transform: rotateY(180deg);
    backface-visibility: hidden;
    z-index: 99;
}

.next,
.prev {
    position: absolute;
    bottom: 1em;
    cursor: pointer;
}

.next {
    right: 1em;
}

.prev {
    left: 1em;
}

#page1 {
    z-index: 10;
}

#page2 {
    z-index: 9;
}

#page3 {
    z-index: 8;
}

#page4 {
    z-index: 7;
}

#page5 {
    z-index: 6;
}

#page6 {
    z-index: 5;
}

#page7 {
    z-index: 4;
}

#page8 {
    z-index: 3;
}

#page9 {
    z-index: 2;
}

#page10 {
    z-index: 1;
}

#checkbox-cover:checked~.book {
    transform: translateX(500px);
}

#checkbox-cover:checked~.book .cover {
    transform: rotateY(-180deg);
    z-index: 1;

}

#checkbox-cover:checked~.book .page {
    box-shadow: 0 0 3px rgb(99, 98, 98);
}

#checkbox-page1:checked~.book #page1 {
    transform: rotateY(-180deg);
    z-index: 2;
}

#checkbox-page2:checked~.book #page2 {
    transform: rotateY(-180deg);
    z-index: 3;
}

#checkbox-page3:checked~.book #page3 {
    transform: rotateY(-180deg);
    z-index: 4;
}

#checkbox-page4:checked~.book #page4 {
    transform: rotateY(-180deg);
    z-index: 5;
}

#checkbox-page5:checked~.book #page5 {
    transform: rotateY(-180deg);
    z-index: 6;
}

#checkbox-page6:checked~.book #page6 {
    transform: rotateY(-180deg);
    z-index: 7;
}

#checkbox-page7:checked~.book #page7 {
    transform: rotateY(-180deg);
    z-index: 8;
}

#checkbox-page8:checked~.book #page8 {
    transform: rotateY(-180deg);
    z-index: 9;
}

#checkbox-page9:checked~.book #page9 {
    transform: rotateY(-180deg);
    z-index: 10;
}

#checkbox-page10:checked~.book #page10 {
    transform: rotateY(-180deg);
    z-index: 11;
}
@media screen and (max-width: 1024px)
{
.header-broider {
     border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAACRElEQVR4AdTXUYobQQxF0clsLovKdxaV1U36dHSNqabBMP5IBS5SvaeqloQDyefH3Z/fP78+cOenq0HnNfLwql6dO5jzfaNT8L+Ez3NrT50/zr/+/PgAD3cdq4EaVCcHD+lFGtQgXQ4eRt9oo7qGKSDHTHJu1ZmH9CINapAuBw/pRRrUIF0OHkbfaKPT8WNznddoSpjyGRrW+s48PN+R01DdGnlQe7DhRo+uz7/x62Sd8035THp1a8x/viNPX+s756s92GijS+fnVmk3kyU/4jHt+ft2Bxly5KcX09UgXY780Tfa6NL5uR2aqSDHTHYb1MAdyHF7YQw1cAdyjF3YaKO1/K5oG3jXe/PORhv1u8B0/vhbbyvgIf/d0dvwLcjRd+QHG23UFDi6PrcpRxPJkZ/+3dh73kbvybH4G210naTzGk2JJl39V8/d9xbu7vEw/oYbbdKZ4BLyTYlLwYuCu+i9u2uLv9FG69yU6Nyk/85fj38DpH83+hZ6v/c68zDnjTaqazSRHDPJ2zfZd4q+hbvv8Q422miTvSu2mXe9N+9svNE2cvwuzt9n55nsNlT37nvz7oYbnc7PLdpKq5MjP72YrgbpcuSnF9PVIF2Oxd9oo0vnDXaJpkT1RRouF0bgofoiDVN2CTyMsdFGdY0mnQkuIV/tM+mXCyPkP9+Rp0/ZJSz+RhttFFNimeT8fxSNh+qLNKhBuhw8pBdpUIN0OXiQH2y40aPrc3umQBPKkZ9eTFeDdDny09eoBtXJUZ38YJuN/gUAAP//RQfo9wAAAAZJREFUAwBP3Uxhlj3UoQAAAABJRU5ErkJggg==") 14 / 14px / 0 round;
    border-width: 10px;
    border-style: solid;
    background-color: rgba(10, 58, 10, 0.91);
    padding: 18px 36px;
    width: 120%;
}

.storiesContainer{
    display: flex;
    flex-direction: row; 
    height: 120%; 
    width: 120%;
}

.storyImagesContainer{
    display: flex; 
    flex-direction: column;
}

.spacer{
    height: 10vw;
}

.inatContainer{
    display: flex;
    flex-direction: row; 
    height: 75%; 
    width: 120%;
}

.observationGrid{
    display: grid;
    grid-template-columns: auto auto auto;
    padding: 10px;
    column-gap: 5px;
}

.holdingGrid{
    display: grid;
    grid-template-columns: auto auto auto auto;
    padding-top: 10px;
    padding-bottom: 20px;
    padding: 20px;
    column-gap: 10px;
}

.costaRica{
    width: 120%;
}

.holding{
    width: 120%;
}

.natureJournal{
    height: 80%; 
    width: 120%;
}
}
@media screen and (max-width: 853px)
{
.header-broider {
     border-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAqCAYAAADFw8lbAAACRElEQVR4AdTXUYobQQxF0clsLovKdxaV1U36dHSNqabBMP5IBS5SvaeqloQDyefH3Z/fP78+cOenq0HnNfLwql6dO5jzfaNT8L+Ez3NrT50/zr/+/PgAD3cdq4EaVCcHD+lFGtQgXQ4eRt9oo7qGKSDHTHJu1ZmH9CINapAuBw/pRRrUIF0OHkbfaKPT8WNznddoSpjyGRrW+s48PN+R01DdGnlQe7DhRo+uz7/x62Sd8035THp1a8x/viNPX+s756s92GijS+fnVmk3kyU/4jHt+ft2Bxly5KcX09UgXY780Tfa6NL5uR2aqSDHTHYb1MAdyHF7YQw1cAdyjF3YaKO1/K5oG3jXe/PORhv1u8B0/vhbbyvgIf/d0dvwLcjRd+QHG23UFDi6PrcpRxPJkZ/+3dh73kbvybH4G210naTzGk2JJl39V8/d9xbu7vEw/oYbbdKZ4BLyTYlLwYuCu+i9u2uLv9FG69yU6Nyk/85fj38DpH83+hZ6v/c68zDnjTaqazSRHDPJ2zfZd4q+hbvv8Q422miTvSu2mXe9N+9svNE2cvwuzt9n55nsNlT37nvz7oYbnc7PLdpKq5MjP72YrgbpcuSnF9PVIF2Oxd9oo0vnDXaJpkT1RRouF0bgofoiDVN2CTyMsdFGdY0mnQkuIV/tM+mXCyPkP9+Rp0/ZJSz+RhttFFNimeT8fxSNh+qLNKhBuhw8pBdpUIN0OXiQH2y40aPrc3umQBPKkZ9eTFeDdDny09eoBtXJUZ38YJuN/gUAAP//RQfo9wAAAAZJREFUAwBP3Uxhlj3UoQAAAABJRU5ErkJggg==") 14 / 14px / 0 round;
    border-width: 10px;
    border-style: solid;
    background-color: rgba(10, 58, 10, 0.91);
    padding: 18px 36px;
    width: 90%;
}

.storiesContainer{
    display: flex;
    flex-direction: row; 
    height: 90%; 
    width: 90%;
}

.storyImagesContainer{
    display: flex; 
    flex-direction: column;
}

.spacer{
    height: 10vw;
}

.inatContainer{
    display: flex;
    flex-direction: row; 
    height: 75%; 
    width: 90%;
}

.observationGrid{
    display: grid;
    grid-template-columns: auto auto auto;
    padding: 10px;
    column-gap: 5px;
    width: 80%;
}

.holdingGrid{
    display: grid;
    grid-template-columns: auto auto auto;
    padding-top: 10px;
    padding-bottom: 20px;
    padding: 20px;
    column-gap: 10px;
}

.costaRica{
    width: 90%;
}

.holding{
    width: 90%;
}

.natureJournal{
    height: 80%; 
    width: 90%;
}
}