@charset "UTF-8";
/* Global design tokens----------------------------------------------------------------*/
:root {
--full-page-width: 98%;
--bar-image-width:230px;
--bar-image-border-width:3px;
--bar-image-padding:0px;
--bar-image-width-box:calc(var(--bar-image-width) + (2 * (var(--bar-image-border-width) + var(--bar-image-padding))));

--max-book-page-width:600px;

--extras-thumbnail-width:300px;
--extras-thumbnail-width-box:calc(var(--extras-thumbnail-width) + (2 * (var(--bar-image-border-width) + var(--bar-image-padding))));

--party-hat-thumbnail-width:230px;
--party-hat-thumbnail-width-box:calc(var(--party-hat-thumbnail-width) + (2 * (var(--bar-image-border-width) + var(--bar-image-padding))));

--wallpaper-thumbnail-width:600px;
--wallpaper-thumbnail-width-box:calc(var(--wallpaper-thumbnail-width) + (2 * (var(--bar-image-border-width) + var(--bar-image-padding))));

--fontSize-10:2.5rem; 
--fontSize-15:2rem; 
--fontSize-17:1.9rem;
--fontSize-18:1.6rem; 
--fontSize-20:1.5rem; 
--fontSize-30:1.4rem; 
--fontSize-31:1.3rem;
--fontSize-33:1.2rem;
--fontSize-34:1.15rem;
--fontSize-40:1.1rem;
--fontSize-45:1rem;
--fontSize-46:0.95rem; 
--fontSize-50:0.9rem;
--fontSize-55:0.85rem;
--fontSize-60:0.8rem;
}
.calendar-page{
--calendar-width:400px;
}
/*Hyphens-------------------------------------------*/
/* 1. Hyphenation ON for narrative text */
/* p, */
/* figcaption { */
  /* hyphens: auto; */
/* } */

/* 2. Hyphenation OFF for UI and headings */
/* .extras-page-description, */
/* .books-page-blurb, */
/* h1, h2, h3, h4, h5, h6, */
/* nav, nav a, */
/* button, .btn, */
/* .website-title { */
  /* hyphens: none; */
/* } */
/*------------------------------------------------------------*/
#title-header {
    position: relative;
}

.home-link-logo {
    position: absolute;
    inset: 0;           /* top:0; right:0; bottom:0; left:0 */
}
/* Skip link----------------------------------------------------------------*/
.skip-link {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0.5rem 1rem;
    background: #ffffff;
    color: #000000;
    font-family: "Comic Sans MS", Arial, Helvetica, sans-serif;
    font-size: 1.2rem;
    z-index: 10000;
    transform: translateY(-100%);
    transition: transform 0.15s ease-out;
}
/* Scroll behaviour--------------------------------------------------------------------*/
html {
  scroll-behavior: smooth;
}
/* Reduced motion---------------------------------------------------------------------*/
@media (prefers-reduced-motion: reduce) {
  #back-to-top {
    transition: none;
  }
  .img-modal {
    transition: none;
  }
}
/* ARROW TO TOP OF PAGE----------------------------------------------------------------*/
#back-to-top {
appearance: none;    /* removes Safari/Firefox quirks for intrinsic styling of buttons */
position: fixed;
right: 1rem;
bottom: 1rem;
width: 3.25rem;
height: 3.25rem;
font-size: 2.6rem;
border-radius: 50%;
border: none;
background: #f7cabe;
color: black;
padding-bottom:0.9rem;
display: flex;              /* reliable centering */
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 150ms ease-out;
}
#back-to-top.visible {
  opacity: 0.75;
  pointer-events: auto;
}
/* focus-visible-----------------------------------------------------------------------*/
.skip-link:focus,
.skip-link:focus-visible {
transform: translateY(0);
}
.jumpto:focus-visible,
.skip-link:focus,
.skip-link:focus-visible,
#bookhtml-arrow-back:focus-visible,
#bookhtml-arrow-forward:focus-visible,
#bookhtml-arrow-forward-start:focus-visible,
#bookhtml-read-again:focus-visible,
#bookhtml-book:focus-visible, 
a:focus-visible img.features-image,
#latest-blog-post:focus-visible,
a:focus-visible,
button:focus-visible {
outline: 5px dotted black;
outline-offset: 3px;
}
.focus-buffer:focus-visible,
.jumpto:focus-visible {
outline: 5px dotted black;
outline-offset: -6px;
}
.books-content{
padding:1rem;
}
.books-content a{
display:block;
}
/* Used for a link in the text to make sure have enough space around the text when using tab to get to the element (accessiblity)*/
.focus-buffer { 
padding: 3px 9px 9px 9px; /* needed to make .focus-buffer:focus-visible look nice when tab to element */
display: inline-block;   /* ensures padding behaves predictably */
}
/*Generic classes-----------------------------------------------------------------------------*/

html, a,img,ul,li,div{ 
margin:0;	/*advised in http://www.w3schools.com/css/css_align.asp*/
padding:0;	/*advised in http://www.w3schools.com/css/css_align.asp*/
border:0;	/*advised on https://www.w3schools.com/html/html_images.asp and p11 of HTML and CSS3 by Josh Hill to set margin, padding and border to 0 on html, body and header and any other html elements to avoid browser defaults*/
}

body, h1, h2, h3, h4, h5{
color: #000000;
background-color: #ffffff;
text-align:center;
font-family: "Comic Sans MS", Arial, Helvetica, sans-serif;
font-size:100%; /* see http://www.w3schools.com/css/css_font.asp */ 
font-style:normal;
font-weight:normal;
font-variant:normal;
width: 100%;
padding: 0;  
border: 0;	/*need to specify as 0 as some browsers otherwise put border on elements*/
margin: 0; 
line-height:100%;
vertical-align:baseline;
}
button{
font-family: "Comic Sans MS", Arial, Helvetica, sans-serif;
}

img { /* see https://www.w3schools.com/css/css3_images.asp*/
display: inline-block; /*default of most browsers -put this for others for consistency*/
max-width:100%; /*so image never displays wider than screen -and unless forced, its own width- and scales with browser*/
height:auto; /*needed as otherwise when image scales for smaller screens, height remains constant */
} 

a{
color: #000000;
text-decoration: none;}

ul{
list-style-type: none;	/* following http://www.w3schools.com/css/css_navbar.asp */
}
.visually-hidden {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 1px;
padding: 0;
margin: 0;
overflow: hidden;
white-space: nowrap;
border: 0;
clip-path: inset(50%);
}
/*end of Generic classes----------------------------------------------------------------------*/
/*Master section---------------------------------------------------------------------------------------------------*/
#main-content{
max-width:var(--full-page-width);
margin:0 auto;
}
#moochie-logo{
aspect-ratio: 130/135;
}
#cornelia-logo{
aspect-ratio: 265/151;
}
.blog-button-image.wave3{
aspect-ratio: 140/75;
}
.blog-button-image.harrisons-head{
aspect-ratio: 140/80;
}
.christmas-button-image.wave3{
aspect-ratio: 170/52;
}
.christmas-button-image.stinkys-head{
aspect-ratio: 170/72;
}
.main-navigation-link.on-home-page{
background-color:#e6ffff;
}
.main-navigation-link.on-about-page{
background-color: #ffccff;
}
.main-navigation-link.on-books-page{
background-color:#ffff99;
}
.main-navigation-link.on-blog-page{
background-color: #ccffcc;
}
.main-navigation-link.on-christmas-page{
background-color:#ffe6e6;
}
.main-navigation-link.on-extras-page{
background-color:#dfabff;
}
.main-navigation-link.on-contact-page{
background-color:#a5fff8;
}
/*Stories for My Little Sister format*/
.page-heading,
.website-title{
text-shadow: 0.5px 0.5px 0 rgba(0,0,0,0.5);
-webkit-text-stroke: 0.7px rgba(0,0,0,0.5);
}
.s-stories{
color: #ff591f;
}

.t-stories{
color: #b0ff3a;
}

.o-stories{
color: #0000dd;
}

.r-stories{
color: #fcfe13;
}

.i-stories{
color: #ff75f4;
}

.e-stories{
color: #24b000;
}

.s2-stories{
color: #c40036;
}

.f-stories{
color: #24b000;
}

.o2-stories{
color: #00b092;
}

.r2-stories{
color: #ff4700;
}

.m-stories{
color: #9000c4;
}

.y-stories{
color: #3a6aff;
}

.l-stories{
color: #ff5b3a;
}

.i2-stories{
color: #00d79b;
}

.t2-stories{
color: #d7c700;
}

.t3-stories{
color: #009c0b;
}

.l2-stories{
color: #fe13b8;
}

.e2-stories{
color: #d5eb00;
}

.s3-stories{
color: #ff4b27;
}

.i3-stories{
color: #008930;
}

.s4-stories{
color: #ffac27;
}

.t4-stories{
color: #ff27c4;
}

.e3-stories{
color: #fff300;
}

.r3-stories{
color: #fe4eb1;
}
.clear-it{
clear:both;
}
.centre-it{
text-align:center;
}
.block-it{
display:block;
}
.bold-text{
font-weight:bold;
}
.underline-text{
text-decoration: underline;
}
.strikethrough-text{
text-decoration: line-through;
}
.red-text{
color:#d60000;
}
.pink-text{
color:#d600c9
}
.bright-pink-text{
color:#d61aa8;
}
.light-pink-text{
color:#d98a9a
}
.violet-text{
color:#a020e0;
}
.blue-text{
color:#0034d1
}
.dark-blue-text{
color:#02024a;
}
.royal-blue-text{
color:#0028c8;
}
.light-blue-text{
color:#2a8fb3;
}
.teal-text{
color:#2a8fa0;
}
.purple-text{
color:#5e03b5;
}
.bright-purple-text{
color:#8c00d6;
}
.turquoise-text{
color:#00b8cc;
}
.green-text{
color:#009a17;
}
.light-green-text{
color:#00a82f;
}
.dark-green-text{
color:#146a1a;
}
.yellow-text{
color:#c7c900
}
.orange-text{
color:#d65f00;
}
.brown-text{
color:#6a2400;
}
.black-text{
color:#000000;
}
#copyright-notice{
clear:both;
font-size:var(--fontSize-50);
padding:0.5rem 0;
margin:0.5rem auto;
line-height:1.5rem;
border-style:solid;
border-width:0.15rem 0 0;
border-color:#000000;
width:var(--full-page-width);
}
/*-----------------------------------------------*/
/* Modal */
.img-modal {
  position: fixed;
  inset: 0; /*stretches modal to fill screen*/
  background: rgba(0,0,0,0.65);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 15;
  opacity: 0; /*modal invisible by default*/
  pointer-events: none; /*makes modal unclickable when invisible*/
  transition: opacity 0.25s ease; /*adds a fade‑in / fade‑out animation*/
}
.img-modal.show {
  opacity: 1; /*makes the modal visible*/
  pointer-events: auto; /*makes the modal clickable again*/
}
.modal-inner {
  position: relative;
}
.modal-inner img {
  max-width: 90vw;
  max-height: 90vh;
  border-radius: 4px;
}
/* Close X button */
.modal-close-btn {
position: absolute; /*to position the close element inside the modal.*/
bottom:5px;
right: 1px;
background: rgba(0,0,0,0.2);
opacity:0.8;
color: #fff;
font-size: 30px;
line-height: 1;
border-radius: 50%;
cursor: pointer;
user-select: none;
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
z-index: 20;
}
/*-----------------------------------------------*/
/*Index page----------------------------------------------------------------------------*/
.home-page{
--features-img-width: 450px;
--features-img-width-box: calc(var(--features-img-width) + (2 * (var(--bar-image-border-width) + var(--bar-image-padding))));
}
.features-title{
font-weight: bold;
color: #17b82a;
}
.features-link{
color:#0034d1;
font-weight: bold;
}
.features-image{
display:block;
width: var(--features-img-width-box);
aspect-ratio: 1/1;
object-fit:contain; 
box-sizing:border-box;
padding:var(--bar-image-padding);
border:var(--bar-image-border-width) solid;
margin:0.8rem auto; 
}
/*end of Index page----------------------------------------------------------------------------*/
.samantha-and-diana-then-caption,
.samantha-and-diana-now-caption{
display:block;
}
.samantha-and-diana-then-caption{
color:#0034d1;
}
.samantha-and-diana-now-caption{
color:#d60000;
}
.about-then-photo,
.about-now-photo{
width: 300px;
box-sizing: border-box;
object-fit: contain; 
}
.about-then-photo{
aspect-ratio: 300/301;
}
.about-now-photo{
aspect-ratio: 300/347;
}
/*Book bar and Blog bar------------------------------------------------------------------*/
.book-bar-image,
.blog-bar-image{
display:block;
width: var(--bar-image-width-box); 
aspect-ratio: 1 / 1;
object-fit:contain;
box-sizing:border-box;
padding:var(--bar-image-padding);
border:var(--bar-image-border-width) solid;
}
/*end of Book bar and Blog bar-----------------------------------------------------------*/
/*Books pages----------------------------------------------------------------------------*/
.books-page hr{
margin-top:1rem;
border-top: 6px dotted #5e03b5;
}
.books-page-image{
grid-area: image;
width: var(--bar-image-width-box);
aspect-ratio: 230/230;
object-fit:contain;
box-sizing:border-box;
padding:var(--bar-image-padding);
border-style: solid;
border-width:  var(--bar-image-border-width);
}
/*end of Books pages----------------------------------------------------------------------------*/
/*Blog page---------------------------------------------------------------------------------------*/
#latest-blog-post>h2{
text-align:center;
color:#3930ef;
font-weight: bold;
margin: 0.1rem auto 1rem;
font-size:var(--fontSize-33);
line-height:2rem;
text-decoration:underline wavy #3930ef;
text-underline-offset: 0.3rem;
text-decoration-thickness: 0.15rem;
}
#post-no{
margin:0.3rem 0;
font-size:var(--fontSize-40);
color:#3930ef;
text-align:right;
}
#on-my-mind-content>h3{
margin:1rem auto;
color:#d60000;
text-align:center;
font-size:var(--fontSize-40);
}
.blog-post-description,
#on-my-mind-content>img,
#on-my-mind>img,
#about-my-blog-image,
#about-my-blog-text,
#my-earlier-posts-image,
#latest-blog-post,
#latest-blog-post>img,
#harrisons-blog-title-image{
display:block;
}
#harrisons-blog-title-image{
width: 650px;
aspect-ratio:650/325;
box-sizing: border-box;
object-fit: contain;
}
#about-my-blog-image{
width: 244px;
aspect-ratio:244/61;
box-sizing: border-box;
object-fit: contain;
}
#my-earlier-posts-image{
width: 300px;
aspect-ratio:300/75;
box-sizing: border-box;
object-fit: contain; 
}
#on-my-mind>img{
width: 198px;
aspect-ratio:198/66;
box-sizing: border-box;
object-fit: contain; 
}
#on-my-mind-content>img{
width: 275px;
aspect-ratio:275/275;
box-sizing: border-box;
object-fit: contain; 
}
#latest-blog-post>img{
width:500px;
max-height: 80vh;
box-sizing: border-box;
object-fit: contain;
}
#latest-blog-post>img:nth-of-type(1){
aspect-ratio: 500/572;
}
#latest-blog-post>img:nth-of-type(2){
aspect-ratio: 500/499;
}
#latest-blog-post>img:nth-of-type(3){
aspect-ratio: 500/522;
}
#latest-blog-post>img:nth-of-type(4){
aspect-ratio: 500/505;
}
#latest-blog-post>img:nth-of-type(5){
aspect-ratio: 500/789;
}
#latest-blog-post>img:nth-of-type(6){
aspect-ratio: 500/718;
}
#latest-blog-post>img:nth-of-type(7){
aspect-ratio: 500/823;
}
#latest-blog-post>img:nth-of-type(8){
aspect-ratio: 1000/696;
}
#latest-blog-post>img:nth-of-type(9){
aspect-ratio: 500/808;
}
#latest-blog-post>img:nth-of-type(10){
aspect-ratio: 1000/576;
}
#latest-blog-post>img:nth-of-type(11){
aspect-ratio: 1000/576;
}
#latest-blog-post>img:nth-of-type(12){
aspect-ratio: 500/494;
}
#latest-blog-post>img:nth-of-type(13){
aspect-ratio: 500/594;
}
#latest-blog-post>img:nth-of-type(14){
aspect-ratio: 1000/742;
}
#latest-blog-post>img:nth-of-type(15){
aspect-ratio: 500/299;
}
/*end of Blog page--------------------------------------------------------------------------------*/
/*Bookhtml pages-----------------------------------------------------------------------------------*/
#pdf-link{
padding:0.2rem 0.4rem 0.1rem;
font-weight:bold;
font-size:var(--fontSize-55);
color:red;
border-left:solid  var(--bar-image-border-width);
border-color: #2a6f3a;
background-color: #b3ffff;
}
.bookhtml-page-wrapper>img{
flex: 1 1 auto; /* allow shrinking */
object-fit: contain;
width: var(--max-book-page-width);
min-height: 0; /*not needed, but a bit of future-proofing. Allow image to shrink below intrinsic content height*/
box-sizing: border-box;
display:block;
margin:0 auto;
}
.bookhtml-page-wrapper>img:nth-of-type(1){
aspect-ratio: 1000/858;
}
.bookhtml-page-wrapper>img:nth-of-type(2){
aspect-ratio: 924/556;
}
.bookhtml-page-wrapper>img:nth-of-type(3){
aspect-ratio: 1185/1090;
}
.bookhtml-page-wrapper>img:nth-of-type(4){
aspect-ratio: 1202/820;
}
.bookhtml-page-wrapper>img:nth-of-type(5){
aspect-ratio: 500/585;
}
.bookhtml-page-wrapper>img:nth-of-type(6){
aspect-ratio: 500/518;
}
.bookhtml-page-wrapper>img:nth-of-type(7){
aspect-ratio: 588/456;
}
.bookhtml-page-wrapper>img:nth-of-type(8){
aspect-ratio: 932/1012;
}
.bookhtml-page-wrapper>img:nth-of-type(9){
aspect-ratio: 780/788;
}
.bookhtml-page-wrapper>img:nth-of-type(10){
aspect-ratio: 1112/872;
}
.bookhtml-page-wrapper>img:nth-of-type(11){
aspect-ratio: 1175/1701;
}
.bookhtml-page-wrapper>img:nth-of-type(12){
aspect-ratio: 1184/960;
}
.bookhtml-page-wrapper>img:nth-of-type(13){
aspect-ratio: 1082/1295;
}
.bookhtml-page-wrapper>img:nth-of-type(14){
aspect-ratio: 1280/1736;
}
.bookhtml-page-wrapper>img:nth-of-type(15){
aspect-ratio: 992/848;
}
.bookhtml-page-wrapper>img:nth-of-type(16){
aspect-ratio: 1080/1326;
}
.bookhtml-page-wrapper>img:nth-of-type(17){
aspect-ratio: 1109/952;
}
.bookhtml-page-wrapper>img:nth-of-type(18){
aspect-ratio: 1068/1009;
}
.bookhtml-page-wrapper>img:nth-of-type(19){
aspect-ratio: 928/616;
}
.bookhtml-page-wrapper>img:nth-of-type(20){
aspect-ratio: 463/373;
}
.bookhtml-page-wrapper>img:nth-of-type(21){
aspect-ratio: 1117/845;
}
.bookhtml-page-wrapper>img:nth-of-type(22){
aspect-ratio: 356/399;
}
/*End of Bookhtml pages-----------------------------------------------------------------------------------*/
/*Error page-----------------------------------------------------------------------------*/
.error-page{
margin:1rem auto;
}
.error-text{
display:block;
max-width:600px; /*make sure total width of elements less than responsive design break for large.css: 1221px > 600(details)+300(image)+0(margin)*/
vertical-align:top;
padding:0 1rem;
margin:0 auto; /*centres image in containing div*/
}
.error-gif{
width:456px;
aspect-ratio: 456 / 369;
display:block;
margin:0 auto; /*centres image in containing div*/
}
/*end of Error page----------------------------------------------------------------------*/
/*Extras pages---------------------------------------------------------------------------*/
.extras-array{
padding:0;
border:0;
margin:0 auto;
}
.party-hats-thumbnail,
.wallpaper-thumbnail,
.extras-thumbnail{
display:block;
margin:0 auto 0.6rem;
object-fit:contain;
box-sizing:border-box;
padding:var(--bar-image-padding);
border:var(--bar-image-border-width) solid;
}
.extras-thumbnail{
width:var(--extras-thumbnail-width-box);
aspect-ratio: 1 / 1;
}
.party-hats-thumbnail{
width:var(--party-hat-thumbnail-width-box);
aspect-ratio: 1 / 1;
}
.wallpaper-thumbnail{
width: var(--wallpaper-thumbnail-width-box);
aspect-ratio: 600 / 437;
}
#extras-runner .extras-thumbnail{
margin-bottom:1rem;
}
#extras-runner h3{
font-weight:bold;
color:#0034d1;
}
#extras-runner .extras-array{
white-space: nowrap;
overflow:auto;
border-style: solid;
border-width:  var(--bar-image-border-width);
border-color: #d60000;
padding:0.5rem;
margin-top:1rem;
}
.extras-cornelia-logo{
aspect-ratio: 150/202;
}
.extras-harrison-logo{
aspect-ratio: 230/200;
}
.calendar-image{
width:var(--calendar-width);
aspect-ratio: 400/484;
}
.party-hats-page hr{
margin-top:1rem;
border-top: 6px dotted #d61aa8;
}
/*end of Extras pages-----------------------------------------------------------------------------*/
/*Christmas page----------------------------------------------------------------------------------*/
#main-content.christmas-page {
max-width: 1500px;    
/* position: relative; */
}
.christmas-page .extras-heading{
width:fit-content;
}
.christmas-page hr{
margin-top:1rem;
border-top: 6px dotted #d60000;
}
.tuppence-stars-image{
width:120px;
aspect-ratio: 120/314;
display:inline-block;
float:right;
}
.corduroy-receives-image,
.corduroy-gives-image{
width:150px;
}
.corduroy-receives-image{
aspect-ratio: 150/109;
display:inline-block;
float:left;
margin:0 1rem 0 0;
}
.corduroy-gives-image{
aspect-ratio: 150/126;
display:inline-block;
float:right;
margin: -1.5rem -5% 0 0;
}
/*end of Christmas  page--------------------------------------------------------------------------*/