/* Modern responsive CSS */
    * { box-sizing: border-box; }
    body {
      margin: 0;
      font-family: sans-serif;
       line-height: 1.5;
      color: black;
      background-color: #6bddff; /* blue */
      border : 0px solid #000000;
    }
    .container {
      max-width: 75ch;  /* Readable line length */
      margin: 0 auto;
      padding: 1rem;
      width: 100%;
background-color: #ffffff; /* yellow feffb3 */
      border : 5px double #000000;
border-radius: 16px;
display: flex;
    }

 


    img { max-width: 100%; height: auto; display: block; margin: 1rem auto; }  /* Fluid images, centered */
    .menubar { text-align: center; margin: 1rem 0; border : 0px double red; }
    .menubar a { padding: 0.5rem 1rem; text-decoration: none; color: #000000; font-weight: bold; }
    .menubar a:hover { background: rgba(255,255,255,0.5); }
    h1, h2 { font-size: clamp(1.5rem, 4vw, 3rem); text-align: left; }
    .dialogue-box, .angel-box { margin: 1rem 0; padding: 1rem; background: transparent; border-radius: 8px; }


.logo { 
display : block;
text-align: center; 
margin-bottom: 1rem; 
border : 0px double red; 
height: 100%; 
width: 100%; }

    /* Mobile-first media queries */
    @media (min-width: 768px) {
      .container { padding: 2rem; max-width: 90ch; }
      .menubar a { padding: 0.75rem 1.5rem; }
    }
    @media (min-width: 1024px) {
      .container { max-width: 100ch; }
    }


figure {
border: 3px pink solid;
padding : 4px;
margin : auto;
}

figcaption {
background-color : purple;
color : white;
font-style : italic;
padding : 3px;
text-align : right;
}



  
.navtext {
font-size : .90em;
color : #000000;
font-family : sans-serif;
text-decoration : none;
font-weight : bold;
}

.navtext:hover {
font-size : .90em;
color : #17af29;
font-family : sans-serif;
text-decoration : none;
font-weight : bold;
}

.navtext:active {
font-size : .90em;
color : #000000;
font-family : sans-serif;
text-decoration : none;
font-weight : bold;
}


.nextpage_placement {
left : 3px;
width : 200px;
height : 20px;
border : 1px solid #000000;
font-family : arial, helvetica, sans-serif;
text-align : center;
background-color : #e4e4e4;
font-size : .9em;
position : relative;
z-index : 6;
}

.nextpage2_placement {
top : 428px;
left : 527px;
width : 310px;
height : 20px;
border : 1px solid #000000;
font-family : arial, helvetica, sans-serif;
text-align : center;
background-color : #e4e4e4;
font-size : .9em;
font-weight : bold;
position : absolute;
z-index : 6;
}


.menubar_books {
top : 5px;
left : 0px;
bottom : 40px;
padding : 3px;
border : 3px solid #000000;
border-radius: 8px;
font-family : arial, sans-serif;
text-align : center;
background-color : white;
font-size : .83em;
font-weight : bold;
width : 100%;
position : relative;
z-index : 32;
}


h1 {
  font-size: 1.7em; 
}

h2 {
  font-size: 1.5em; 
}

h3 {
  font-size: 1em; 
}

h4 {
  font-size: 1em; 
}

h5 {
  font-size: 1em; 
}

h6 {
  font-size: 1em; 
}