html, body
{
   margin: 0;
   padding: 0;
   height: 100%;
   background: #333;
   font-size: 20px;
}


body > header, body > footer
{
   background: #333;
   color: white;
   padding: 12px;
   box-shadow: 0 0 1em 0 rgba(0, 0, 0, 0.5);
}

body > header
{
   display: flex;
   justify-content: center;
   align-items: center;
   gap: 1em;

   text-align: center;
   font-family: "Times New Roman";
   font-size: 30px;
   font-weight: bold;
}


.book
{
   position: relative;
   margin: 20px auto;

   width: 60vw;
   height: 40vw;
}
.book .page
{
   padding: 1em 2em;
   font-family: "Open Sans";
   font-size: 1vw;
}
.book .page .bookmark
{
   border-radius: 0 2px 2px 0;
   visibility: hidden;
}
.book .page header
{
   font-size: 2em;
   margin-top: 0.67em;
   margin-bottom: 0.67em;
   margin-left: 0;
   margin-right: 0;
   font-weight: bold;
}
.book .page footer
{
   position: absolute;
   bottom: 0;
   padding: 1em;
   color: black;
   font-size: 0.8em;
}
.book .page img
{
   border-radius: 10px;
}
.book .page:nth-child(even) footer
{
   left: 0;
}
.book .page:nth-child(odd) footer
{
   right: 0;
}

.book .page:nth-child(1)
{
   background: linear-gradient( 90deg, dodgerblue 2%, transparent 10px ), linear-gradient( 180deg, white 28%, #e5e5f7 28% );
}
.book .page:nth-last-child(1)
{
   background: linear-gradient( -90deg, dodgerblue 2%, transparent 10px ), #e5e5f7
}