:root{ 
     --navwidth: 100px;            /* default navigation block width */

     --bgcol: #ffffff;             /* default background colour */

     --fontc: Cursive;             /* cover font */
     --fontp: Cursive;             /* page font */
     --fsizec: 20px;               /* default cover font size */
     --fsizep: 20px;               /* default cover font size */
     --fsizept: 20px;              /* default page title font size */
     --fsizepr: 20px;              /* default page text font size */
     --fsizeqm: 40px;              /* default ? font size */

     --transr1: 50px;             /* default right transiton */
     --transh1: 50px;             /* default height transiton */
     --transr2: 50px;             /* default right transiton */
     --transh2: 50px;             /* default height transiton */
     --transr3: 50px;             /* default right transiton */
     --transh3: 50px;             /* default height transiton */
     --transaw: 50px;             /* answer width transiton */
     --transah: 50px;             /* answer height transiton */
     --duration: 4s;              /* default animation time */
}



/* Font Family and Sizes */

#cover1, #cover2, {
  font-family: var(--fontc); 
  font-size: var(--fsizec); }   

.pagetitle {
  width: 100%;
  font-family: var(--fontc); 
  font-size: var(--fsizept); 
  text-align: center; }   

#story {
  font-family: var(--fontc); 
  font-size: var(--fsizepr); 
  display: inline-block;  
  padding-left: 10px; 
  padding-right: 10px;  } 

.storypage {
  background-color: var(--bgcol); }

.img {
  mix-blend-mode: darken; }

@keyframes qmark {
    0%     { color:red; }
    50.0%  { color:black; }
    100.0%  { color:red; } }  

@keyframes qmarkanim {
 100% {
    transform: translate(rotate(360deg)); } }
 
.qmark {
  font-family: var(--fontc); 
  font-size: var(--fsizeqm); }

.qmarkanim {
  animation: qmark;
  animation-duration: 5s; 
  animation-iteration-count: infinite; }

@keyframes cover1 {
    100% {
    transform: translate(var(--transr1),var(--transh1)); } }

.loadhide {
  background: white;
  z-index: 100;  }

.cover1  {
    font-size: var(--fsizec);
    animation: cover1; 
    animation-fill-mode: both;
    animation-duration: var(--duration); }

.bground:hover {
  transform: translate(100px); }

@keyframes cover2 {
    100% {
    transform: translate(var(--transr2),var(--transh2)) rotate(360deg); } }
 
.cover2  {
    font-size: var(--fsizec);
    animation: cover2; 
    animation-fill-mode: both;
    animation-duration: var(--duration); }


@keyframes cover3 {
   100% {
    transform: translate(var(--transr3),var(--transh3)) rotate(360deg); } }
 
.cover3  {
    animation: cover3; 
    animation-fill-mode: both;
    animation-duration: var(--duration); }

/* centre page title */
#pagetitle {
  text-align: center; }

/* enlarge jpg on hover */
.img:hover {
  transform: scale(2); }

.answer {
  display: inline-block; } 

@keyframes showanswer {
  
  100% {
    transform: translate(var(--transaw),var(--transah)) rotate(720deg); } }

.showanswer  {
    animation: showanswer; 
    animation-fill-mode: both;
    animation-duration: var(--duration); }

/* spin answer on hover */
.playanswer:hover {
  animation: playanswer;
  animation-duration: 4s; }

@keyframes playanswer {
  100% {
    transform: translate(rotate(720deg)); } } 

/* Menu */
.menu {
  width: 100%; }

/* enlarge jpg on hover */
.menu:hover {
  transform: scale(2); }


/* Navigation */
.block {
  width: var(--navwidth);
}


/* Story */

div#story {
  border: 1px solid blue; }