html {
  scroll-behavior: smooth;
}

body {
  /*background-color:hsl(5, 52.4%, 95.9%);*/   /* was rgb(250, 240, 239) */
  background-color:rgb(250, 240, 239);   /* was hsl(5, 52.4%, 95.9%) */
  overflow-y: scroll; /* Show vertical scrollbar */  
  font-family: Karla, verdana, helvetica, arial;
  line-height: 1.2;
  color:white;
  text-align:center;
}

div.titleBarContainer {
  position: fixed;
  width: 100%;
  height: 60px;
  top: 0px;
  left: 0px;
  background-color:rgb(50, 80, 255);
  margin: 0px;
  z-index: 1;   /* To make sure history goes "under" titlebar.  */
  cursor:default;
  font-size: 12px; 
}

div.chapter {
  position: absolute;
  width:  110px;
  top: 30%;
  left: 5%;                        /* Same as score class */
  transform: translate(-10%, 0%);  /* To the left of score */
  text-align:left;
  /* padding: 5px; */
}

div.score {
  position: absolute;
  width:  110px;
  top: 5px;
  left: 5%;                        /* Same as chapter class */
  transform: translate(80%, 0%);   /* To the right of chapter */
  padding: 0px;
}

div.titleLogo {
  padding-top: 10px;
  text-align:center;
  font-family:"Brush Script MT", "lucida Handwriting", cursive;
  font-size: 32px;
  color:white;
}

p.promptClass {
  font-size: 18px;
  text-align:center;
  max-width:400px;
  color:black; 
  padding:10px;
  padding-left:35px;
  padding-right:35px;  
  margin: auto;
  margin-left: 50%;     /* Centered (initially). */  
  transform: translate(-50%, 0%);
  animation: fadeIn 0.75s 1;    /* Animation duration, # iterations. */
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  margin-top: 40px;     /* A big gap at the top to separate the new topic. */
  margin-bottom: 20px;  /* And a moderate gap between prompt and the options below. */
  cursor:default;
  white-space: pre-wrap;   /* So newlines work */
}

p.promptImageClass {
  max-width:400px;  /* Required? */
  text-align:center;  /* Required - otherwise the image is left of centre. */
  padding:10px;
  margin: auto;
  margin-left: 50%;     /* Centered (initially). */  
  transform: translate(-50%, 0%);
  animation: fadeIn 0.75s 1;    /* Animation duration, # iterations. */
  animation-fill-mode: forwards;
  animation-timing-function: ease-in-out;
  margin-top: 40px;     /* A big gap at the top to separate the new topic. */
  margin-bottom: 20px;  /* And a moderate gap between prompt and the options below. */
}

p.optionsClass {
  font-size: 18px;
  text-align:center; 
  max-width:400px;
  color:white; 
  padding:10px; 
  margin: auto;
  margin-left: 50%;              
  transform: translate(-50%, 0%);
  animation: fadeIn 0.75s 1;    /* Animation duration, # iterations. */
  animation-fill-mode: forwards;
  margin-top: 5px;
  margin-bottom: 5px;

  background-color:hsl(329,98.9%,63.7%); /* Options have a pink bubble. (Was rgb(254,71,165) ) */
  border-radius:40px;
  box-shadow: 3px 3px 1px lightgrey;
  cursor: pointer;
  white-space: pre-wrap;   /* So newlines work */
}

p.optionsClass:hover {
  background-color:rgb(219,70,154); 
}

p.disableHover {
  pointer-events: none;
}


@keyframes fadeIn {   /* Used when prompts or options arrive. */
  from {opacity: 0;}
  to {opacity: 1;}
}

@keyframes fadeOut {  /* Used when a not-selected option changes to history. */   
  /* from {opacity: 1; font-size:16px; padding:10px; margin-top:5px; margin-bottom:5px;} */
  from {opacity: 1;}
  /* to {opacity:0; font-size:0px; padding:0px; margin-top:0px; margin-bottom:0px; }   */
  to {opacity:0; font-size:0px; padding:0px; margin-top:-5px; margin-bottom:0px; }
}

@keyframes fadeHistoryRight{  /* Used when selected option changes to history.) */
  from {opacity: 1; transform: translate(-40%, 0%); }
  to {opacity: 0.4;  transform: translate(-10%, 0%);}
}

@keyframes fadeHistoryLeft{  /* Used when a prompt (text) changes to history. */
  0% {
    transform: translate(-40%, 0%);     /* Starting position should be same as original prompt. */
    background-color:hsl(5, 52.4%, 95.9%);   /* Same as canvas background. */
    color:black;    /* Should be this colour already. */
  }
  100% {
    transform: translate(-90%, 0%);     /* (Already at final position, but needs to be specified, otherwise it goes back to ceneter.) */
    color:white;    
    border-radius:40px;
    box-shadow: 3px 3px 1px lightgrey;   /* grey at 30% opacity (for everything) is similar to lightgrey */
    background-color:hsl(230, 100%, 85.9%); /* was rgb(63, 95, 255) */   
    margin-top: 5px;    /* Remove big gap at the top to separate the new topic. */
    margin-bottom: 5px;  /* Remove gap between prompt and the options below. */ 
  }
}

@keyframes fadeHistoryCentre{  /* Used when a prompt (image) changes to history. */
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0.6; 
    margin-top: 5px;    /* Remove big gap at the top to separate the new topic. */
    margin-bottom: 5px;  /* Remove gap between prompt and the options below. */ 
  }
}


div.transitionContainer {
  position:  fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  /*background-color:rgb(198, 183, 247);*/  /* Pale purple. */
  /*background-color:rgb(139, 150, 255);*/  /* Pale blue. */
  /*background-color:rgb(34, 175, 132);*/  /* pale green */
  background-color:rgb(200, 200, 200);  /* light grey */

  margin: 0px;
  z-index: 1;   /* To make sure it goes over the top of everything, hopefully.  */
  cursor:default;
  font-size: 12px; 

  animation: fadeIn 0.75s 1;    /* Animation duration, # iterations. */
  /*animation-fill-mode: forwards;*/
  animation-timing-function: ease-in-out;
}


p.imageClass {
  position: fixed;
  top: 60%;   /* was 40%. */
  left:50%;
  /*width: 500px;*/   /* Doesn't have any effect, even without setting in js. */
  transform: translate(-50%, -118%);
}

p.chapterClass {
  position: fixed;
  top: 60%;   
  left:50%;
  transform: translate(-50%, -60px);
  font-size: 28px; 
}

p.titleClass {
  position: fixed;
  top: 60%;   
  left:50%;
  /*transform: translate(-50%, -10px);*/
  transform: translate(-50%, -30px);
  /*margin-top: 40px;*/
  width: 600px;   /* Was 500, but needs to be wide enough for the longest title. */
  font-family: "Merriweather Sans";
  font-size: 42px;        
}

p.barClass {
  position: fixed;
  top: 60%;   
  left: 50%;
  /*transform: translate(-50%, 104px);*/
  transform: translate(-50%, 80px);
  font-size: 12px; 
  width: 320px;
  height: 24px;
  background-color:white;
  border-radius:40px;
  animation: fadeIn 1s 1;    /* Animation duration, # iterations. */
  animation-delay: 2s;
  animation-fill-mode: backwards;
  animation-timing-function: ease-in-out;       
}

p.innerBarClass {
  position: fixed;
  top: 60%;   
  left:50%;
  /*transform: translate(-155px, 108px);*/  /* x must be in pixels (for correct animation). */
  transform: translate(-155px, 84px);  /* x must be in pixels (for correct animation). */
  font-size: 12px; 
  width: 310px;
  height: 16px;
  background-color:rgb(254,71,165);
  border-radius:37px; 
  animation: growRight 5s 1;    /* Animation duration, # iterations. */
  animation-delay: 2s;
  animation-fill-mode: backwards;
  animation-timing-function: ease-in-out; 
}

@keyframes growRight {   /* To suggest "loading". */
  from {width: 0px;}
  to {width: 310px;}
}


div.skillContainer {
  position:  fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  /*background-color:rgb(200, 200, 200);*/  /* light grey */
  background-color:rgb(200, 200, 200);  /* light grey. Not used? */

  margin: 0px;
  z-index: 1;   /* To make sure it goes over the top of everything, hopefully.  */  
  cursor:default;
  font-family: Karla, verdana, helvetica, arial;
  font-size: 20px;

  color:white;
  text-align:center;
  padding: 10px;

  animation: fadeIn 0.75s 1;    /* Animation duration, # iterations. */
  /*animation-fill-mode: forwards;*/
  animation-timing-function: ease-in-out;
}

div.completionContainer {
  position:  fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  /*background-color:rgb(200, 200, 200);*/  /* light grey */
  background-color:rgb(200, 200, 200);  /* light grey. Not used? */

  margin: 0px;
  z-index: 1;   /* To make sure it goes over the top of everything, hopefully.  */  
  cursor:default;
  font-family: Karla, verdana, helvetica, arial;
  font-size: 20px;

  color:white;
  text-align:center;
  padding: 0px;

  animation: fadeIn 0.75s 1;    /* Animation duration, # iterations. */
  /*animation-fill-mode: forwards;*/
  animation-timing-function: ease-in-out;
}

p.gotItButtonClass {
  width:110px;
  padding: 15px;
  margin: auto;
  margin-top: 60px;
  background-color:hsl(329,98.9%,63.7%);
  border-radius:40px;
  /*box-shadow: 3px 3px 1px rgba(100, 100, 100, 0.4);*/
  box-shadow: 3px 3px 1px rgba(60, 60, 60, 0.4);
  cursor: pointer;
}
p.gotItButtonClass:hover {
  background-color:rgb(219,70,154); 
}

a:link, a:visited {
  color: white;
  text-decoration: none;
}
a:hover, a:active {
  color: white;
  text-decoration: underline;
}

div.BlankCanvas {
  position:  fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background-color:rgb(200, 200, 200);  /* Default. Expect caller to set appropriately. */
  z-index: 1;   /* To make sure it goes over the top of previous (non-indexed) elements.  */
  /* No animation */
}