body {
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";

    display: flex;
    min-height:100vh;
    flex-direction:column;
  }

/* this flex, along with the 3 items in body, push the footer to bottom of page if there is not enough content */
main{
  flex:1;
}



/**  young-to-animate... These are all the animation choices **/
/* this is the general code. I don't use it. I had to copy each time for each animation b/c can't just insert animation_name with php in a css file 

#young-to-animate {

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 

  font-size:20rem;
  animation-name:side-to-side-scale;
  animation-duration:3s;
  animation-iteration-count:1;
 
  /* emoji was appearing in front of everything but behind equation; z-index puts it in front of everything */
  /** z-index:1;
}
**/


#rotate {

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 

  font-size:20rem;
  animation-name:rotate;
  animation-duration:3s;
  animation-iteration-count:1;
 
  /* emoji was appearing in front of everything but behind equation; z-index puts it in front of everything */
  z-index:1;
}

#spin {

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 

  font-size:20rem;
  animation-name:spin;
  animation-duration:3s;
  animation-iteration-count:1;
 
  /* emoji was appearing in front of everything but behind equation; z-index puts it in front of everything */
  z-index:1;
}



#spin-scale {

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 

  font-size:20rem;
  animation-name:spin-scale;
  animation-duration:3s;
  animation-iteration-count:1;
 
  /* emoji was appearing in front of everything but behind equation; z-index puts it in front of everything */
  z-index:1;
}

#scale-spin {

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 

  font-size:20rem;
  animation-name:scale-spin;
  animation-duration:3s;
  animation-iteration-count:1;
 
  /* emoji was appearing in front of everything but behind equation; z-index puts it in front of everything */
  z-index:1;
}

#front {

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 

  font-size:20rem;
  animation-name:front;
  animation-duration:3s;
  animation-iteration-count:1;
 
  /* emoji was appearing in front of everything but behind equation; z-index puts it in front of everything */
  z-index:1;
}

#rotate-front {

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 

  font-size:20rem;
  animation-name:rotate-front;
  animation-duration:3s;
  animation-iteration-count:1;
 
  /* emoji was appearing in front of everything but behind equation; z-index puts it in front of everything */
  z-index:1;
}

#side-to-side {

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 

  font-size:20rem;
  animation-name:side-to-side;
  animation-duration:3s;
  animation-iteration-count:1;
 
  /* emoji was appearing in front of everything but behind equation; z-index puts it in front of everything */
  z-index:1;
}

#side-to-side-scale {

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 

  font-size:20rem;
  animation-name:side-to-side-scale;
  animation-duration:3s;
  animation-iteration-count:1;
 
  /* emoji was appearing in front of everything but behind equation; z-index puts it in front of everything */
  z-index:1;
}


#animate-wrong-answer {

  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%); 

  font-size:20rem;
  animation-name:animate-wrong-answer;
  animation-duration:4s;
  animation-iteration-count:1;
 
  /* emoji was appearing in front of everything but behind equation; z-index puts it in front of everything */
  z-index:1;
}


@keyframes rotate {
  from {
      transform:translate(-50%, -50%) rotate(0deg);
      -webkit-transform:translate(-50%, -50%) rotate(0deg);
      -ms-transform:translate(-50%, -50%) rotate(0deg);
  }
  to {
      transform: translate(-50%, -50%) rotate(360deg);
      -webkit-transform: translate(-50%, -50%) rotate(360deg);
      -ms-transform: translate(-50%, -50%) rotate(360deg);
  }
}


@keyframes spin {
  from {
      transform:translate(-50%, -50%) rotate(0deg);
      -webkit-transform:translate(-50%, -50%) rotate(0deg);
      -ms-transform:translate(-50%, -50%) rotate(0deg);
  }
  to {
      transform:translate(-50%, -50%) rotate(1080deg);
      -webkit-transform:translate(-50%, -50%) rotate(1080deg);
      -ms-transform:translate(-50%, -50%) rotate(1080deg);
  }
}


@keyframes spin-scale {
  from {
      transform:translate(-50%, -50%) rotate(0deg) scale(0.1);
      -webkit-transform:translate(-50%, -50%) rotate(0deg) scale(0.1);
      -ms-transform:translate(-50%, -50%) rotate(0deg) scale(0.1);
  }
  to {
      transform:translate(-50%, -50%) rotate(1080deg) scale(2);
      -webkit-transform:translate(-50%, -50%) rotate(1080deg) scale(2);
      -ms-transform:translate(-50%, -50%) rotate(1080deg) scale(2);
  }
}

@keyframes scale-spin {

  0% {
    transform:translate(-50%, -50%) rotate(0deg) scale(0.1);
    -webkit-transform:translate(-50%, -50%) rotate(0deg) scale(0.1);
    -ms-transform:translate(-50%, -50%) rotate(0deg) scale(0.1);
  }

50% {
  transform:translate(-50%, -50%) rotate(0deg) scale(2);
  -webkit-transform:translate(-50%, -50%) rotate(0deg) scale(2);
  -ms-transform:translate(-50%, -50%) rotate(0deg) scale(2);
  }

100% {
    transform:translate(-50%, -50%) rotate(1080deg) scale(2);
    -webkit-transform:translate(-50%, -50%) rotate(1080deg) scale(2);
    -ms-transform:translate(-50%, -50%) rotate(1080deg) scale(2);
  }
}



@keyframes front {
  0% {
    transform:translate(-50%, -50%) scale(0.5);
    -webkit-transform:translate(-50%, -50%) scale(0.5);
    -ms-transform:translate(-50%, -50%) scale(0.5);
  }
  50% {
    transform: translate(-50%, -50%) scale(2);
    -webkit-transform: translate(-50%, -50%) scale(2);
    -ms-transform: translate(-50%, -50%) scale(2);
  }
  100% {
    transform: translate(-50%, -50%)  scale(0.5);
    -webkit-transform: translate(-50%, -50%)  scale(0.5);
    -ms-transform: translate(-50%, -50%)  scale(0.5);
  }
}


@keyframes rotate-front {
  0% {
    -webkit-transform: translate(-50%, -50%) scale(0.5);
    -ms-transform: translate(-50%, -50%) scale(0.5);
    transform: translate(-50%, -50%) scale(0.5);

  }
  50% {
    -webkit-transform: translate(-50%, -50%) rotate(360deg) scale(2);
    -ms-transform: translate(-50%, -50%) rotate(360deg) scale(2);
    transform: translate(-50%, -50%) rotate(360deg) scale(2);

  }
  100% {
    -webkit-transform: translate(-50%, -50%) rotate(-360deg);
    -ms-transform: translate(-50%, -50%) rotate(-360deg);
    transform: translate(-50%, -50%) rotate(-360deg);

  }
}


@keyframes side-to-side {
  0% {
    transform: translate(-50%, -50%) translateX(-200px);
    -webkit-transform: translate(-50%, -50%) translateX(-200px);
    -ms-transform: translate(-50%, -50%) translateX(-200px);
  }
  50% {
    transform: translate(-50%, -50%) translateX(200px);
    -webkit-transform: translate(-50%, -50%) translateX(200px);
    -ms-transform: translate(-50%, -50%) translateX(200px);
  }
  100% {
    transform: translate(-50%, -50%) translateX(-200px);
    -webkit-transform: translate(-50%, -50%) translateX(-200px);
    -ms-transform: translate(-50%, -50%) translateX(-200px);
  }
}

@keyframes side-to-side-scale {
  0% {
    transform: translate(-50%, -50%) translateX(0px) scale(0.5);
    -webkit-transform: translate(-50%, -50%) translateX(0px) scale(0.5);
    -ms-transform: translate(-50%, -50%) translateX(0px) scale(0.5);
  }
  25% {
    transform: translate(-50%, -50%) translateX(100%)  scale(1.25);
    -webkit-transform: translate(-50%, -50%) translateX(100%)  scale(1.25);
    -ms-transform: translate(-50%, -50%) translateX(100%)  scale(1.25);
  }
  50% {
    transform: translate(-50%, -50%) translateX(0px) scale(2);
    -webkit-transform: translate(-50%, -50%) translateX(0px) scale(2);
    -ms-transform: translate(-50%, -50%) translateX(0px) scale(2);
  }
  75% {
    transform: translate(-50%, -50%) translateX(-100%) scale(1.25);
    -webkit-transform: translate(-50%, -50%) translateX(-100%) scale(1.25);
    -ms-transform: translate(-50%, -50%) translateX(-100%) scale(1.25);
  }
  100% {
    transform: translate(-50%, -50%) translateX(0px) scale(0.5);
    -webkit-transform: translate(-50%, -50%) translateX(0px) scale(0.5);
    -ms-transform: translate(-50%, -50%) translateX(0px) scale(0.5);
  }
}


@keyframes animate-wrong-answer {
  0% {
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
  }
  25% {
    transform: translate(-50%, -50%) rotate(-30deg) scale(1.5);
    -webkit-transform: translate(-50%, -50%) rotate(-30deg) scale(1.5);
    -ms-transform: translate(-50%, -50%) rotate(-30deg) scale(1.5);
  }

  75% {
    transform: translate(-50%, -50%) rotate(30deg) scale(1.5);
    -webkit-transform: translate(-50%, -50%) rotate(30deg) scale(1.5);
    -ms-transform: translate(-50%, -50%) rotate(30deg) scale(1.5);
  }

  100% {
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
  }
}





/* copied this font-family css from cheng who made entire homepage be this font with * ; I used this in my header.php for my site name **/
.sitename {
  font-family: omnes-pro, sans-serif !important;
  font-weight: 600;
  color:#198754; 
}


.lightgreen{
    background-color: #bcf5bc !important;   
}

.nextquestion {
  height:30px;
}


/* for the list of hidden words on Points tab */
.wordlist{
  /* background-color:white; */
  text-align:left;
  border: none !important;
  padding-top:0 !important;
}

/* for text on index cards on home page - left align on mobile, justify on sizes above that */
.indexcard {
  text-align:justify;
}


.carousel-caption {
  position: relative;
  left:auto;
  right:auto;
  bottom:auto;
  padding:2px;

  color:white;
  background-color:#00A36C;  /* jade */
}


/** PASSWORD VALIDATION **/
/** https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_password_val **/
/* The message box is shown when the user clicks on the password field */
#message {
  display:none;
  background: #f1f1f1;
  color: #000;
  position: relative;
  padding: 5px;
  margin-top: 10px;
  margin-bottom: 10px;
}

#message p {
  margin:0px;
}

/* Add a green text color and a checkmark when the requirements are right */
.valid {
  color: green;
}

.valid:before {
  position: relative;
  left: -10px;
  content: "✔";
}

/* Add a red text color and an "x" when the requirements are wrong */
.invalid {
  color: red;
}

.invalid:before {
  position: relative;
  left: -10px;
  content: "✖";
}  
/** PASSWORD VALIDATION - END **/

/* this removes the gap after navbar before next div...this overrides what's in bootstrap*/
/* color makes it white instead of light - so my logo looks good */
.navbar {
    margin-bottom: 0 !important;
    border: 0 !important;

    background-color:white !important; 
  }


  .bluebar{
    background-color:#198754; /* jade: #00A36C  shamrock: #009E60  bootstrap 5 success color  #198754; https://getbootstrap.com/docs/5.0/utilities/colors/*/
    color: white;
    min-height:70px;
    margin-bottom:10px;
    margin-top:5px;
  }

  /* LM wrote to override bootstrap 4 ugly green color */
  .btn-success{
    background-color:#198754; /* bootstrap 5 success color  #198754;*/
    border-color:#198754;
  }
 

  .white{
    color:white;
  }

  .asterisk{
    vertical-align: super;
    color:red;
  }

 .bold {
   font-weight:bold;
 }

 /* gift tab is sometimes short; make sure it at least fills viewport verticall */
 .gifttab {
  min-height:100vh;
 }

/** for LL -- adjust size of h1 and h2 to make smaller on mobile **/

/*
  @media screen and (max-width: 48em){
    h1 {
        font-weight:bold;
        font-size:1.6rem;
    }
  }
  @media screen and (max-width: 48em){
    h2 {
        font-weight:bold;
        font-size:1.4rem;
    }
  }

  @media screen and (max-width: 48em){
    h3 {
        font-weight:bold;
        font-size:1.2rem;
    }
  }

  @media screen and (max-width: 48em){
      h4 {
          font-weight:bold;
          font-size:1.0rem;
      }
    }

    @media screen and (max-width: 48em){
    h5 {
        font-weight:bold;
        font-size:0.85rem;
    }
  }

  @media screen and (max-width: 48em){
      h6 {
          font-weight:bold;
          font-size:0.7rem;
      }
    }
*/

  /*
@media screen and (max-width: 48em){
body {
  font-size:0.5rem;
}
}
*/

@media screen and (max-width: 48em){

a[data-answer] {
  height: 55px;
  width: 55px;
  
  border-radius: 50%;
  display: inline-block;


  border-style:solid;
  border-width: 1px;
  border-color:silver;
 
  text-align:center;
  background-color:white;
  
  text-decoration:none;
  /*font-size:16px;  */
}
}



  /* this justifies prompt when on big screen; made font smaller on mobile */
  .q_prompt{
    margin-top:20px;
    font-size: 1.75rem;
    text-align:justify;
    
  }

  /* left aligned not justified on mobile...otherwise there are giant gaps between words */
  @media screen and (max-width: 48em){
    .q_prompt{
        text-align:left;
        font-size:1.25rem;
    }
  }

  .q_image{
    margin-top:20px;
  }


/* added q_emojis to match q_question */
.q_emojis{
  margin-top:20px;
  font-size: 1.75rem;
  text-align:justify;
}

@media screen and (max-width: 48em){
  .q_emojis{
      font-size:1.25rem;
      text-align:justify;

  }
}



  .q_question{
    margin-top:20px;
    font-size: 1.75rem;
  }
  @media screen and (max-width: 48em){
    .q_question{
        font-size:1.25rem;
    }
  }

  .q_instructions{
    margin-top:20px;
    font-size: 1.125rem;
    font-style:italic;
  }
  @media screen and (max-width: 48em){
    .q_instructions{
        font-size:1rem;
    }
  }

  .young{
    font-size:3.0rem;
  }

  /*  try changing h1 and h2 b/c otherwise these are smaller than the rest of young stuff */
  .young  h1{
    font-size:3.1rem;
  }

  .young  h2{
    font-size:2.8rem;
  }

  .young  h3{
    font-size:2.5rem;
  }

  .young  h4{
    font-size:2.1rem;
  }


  .young  h5{
    font-size:1.9rem;
  }

  .young  h6{
    font-size:1.6rem;
  }



  .young small {
    font-size:1.6rem;
  }

  .young .q_prompt{
    font-size:3.0rem;
  }

  .young .q_question{
    font-size:3.0rem;
  }

  .young .q_instructions{
    font-size:2.0rem;
  }

  .young .q_emojis{
    font-size:6.0rem;
  }





/** in LL I use alerts instead of green font for Level advancement*/
/* i also use this for Retry alerts on pset retry */
  .level{
    font-size:1.5rem;
  }



  .text_green{
    color:#198754; /* bootstrap 5 success color  #198754;*/
    /* color:#198754; */
  }

  .text_red{
    color:red;
  }

  /* for non-bold td elements in points */
  .normal{
    font-weight:normal;
  }



  /* for psetquestion submitted and other pages */
  .submission_details{
    font-size:1.75rem;
    margin-top:0.5rem;
  }

  .mediumsize{
    font-size:1.5rem;
  }

  .emoji_small{
    font-size:1.5rem;
  }

  .emoji_medium{
    font-size:3.5rem;
  }

  .emoji_large{
    font-size:6.25rem;
  }


  /* monitor_notice is used in middle of pages (like "Only student can submit answer" */
  .monitor_notice{
    color:white;
    background-color:slategrey;
    padding:0.5rem;
    margin-top:0;
    margin-bottom:0;
  }

  /* monitor_bar and admin_bar at at top of page above empty bluebar or student's pointcounter_strip */
  .monitor_bar{
    color:white;
    background-color:slategrey;
    padding:0.5rem;
    margin-top:0;
    margin-bottom:0px;
  }

  .admin_bar{
    color:white;
    background-color:deeppink;
    padding:0.5rem;
    margin-top:0;
    margin-bottom:0;
  }




  .redx_small{
    font-size:1.5rem;
    color:red;
  }

.prize_small{
    color:white;
    font-size:1.25rem;
}

.prize_medium{
  color:white;
  font-size:3.5rem;
}

.prize_large{
  color:white;
  font-size:5rem;
}


.flag_menubar {

    
  background-color: white;
  background-image:  repeating-linear-gradient(45deg, lightgrey 25%, transparent 25%, transparent 75%, lightgrey 75%, lightgrey), repeating-linear-gradient(45deg, lightgrey 25%, white 25%, white 75%, lightgrey 75%, lightgrey);
  background-position: 0 0, 4px 4px; 
  background-size: 8px 8px;

  padding-left:2px;
  padding-right:2px;
}

.certificate{

  border-style:ridge;
  border-width: 10px;
  border-color:#00A36C;  /* jade */

  background-image: url("../img/LLwatermark.png"); 
  background-repeat: no-repeat;
  background-attachment: local;
  background-position: center;

  /* first percent after size sets width of img */
  background-size:contain; 

  font-size: 1.75rem;

  width:100%;
  height:100%;
  padding:10px;

  margin-bottom:0px;

  font-family: Georgia, serif;

/* to print with background image */
-webkit-print-color-adjust: exact !important;   /* Chrome, Safari, Edge */
color-adjust: exact !important;                 /*Firefox*/

}

.certificate_title {
  font-size:2.8rem;
  font-weight:bold;

}


@media screen and (max-width: 48em){
  .certificate{
    font-size:1.2rem;
  }

  .certificate *{
    font-size: 1.2rem;
  }
  

  .certificate_title {
      font-size:1.5rem;
      font-weight:bold;
  }

}

@page {
  size: letter landscape;
}

@media print {

  html, body {
    
    margin: 0;

    }
   

    header * {
      display: none;
   }
    
    footer * {
     display: none;
  }
  
}


/*  'a' bc this is for links in dashboard with score ...if perfect, it's green */
a[score="perfect"] {
    color: #00A36C;  /* jade */
}





/* this will be for the dashboard circles */
/* https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_circles */
.dot {
  height: 25px;
  width: 25px;
  
  /* background-color: white;  */
  border-radius: 50%;
  display: inline-block;


  border-style:solid;
  border-width: 1px;
  border-color:lightgray;
 
  text-align:center;
}

/* this is  dot for circle of current question in problemset question menu bar */
.dot-current {
  height: 25px;
  width: 25px;
  
  background-color: yellow; 
  border-radius: 50%;
  display: inline-block;


  border-style:solid;
  border-width: 1px;
  border-color:lightgray;
 
  text-align:center;
    color: #000;
}


a[data-answer] {
  height: 25px;
  width: 25px;
  
  border-radius: 50%;
  display: inline-block;


  border-style:solid;
  border-width: 1px;
  border-color:silver;
 
  text-align:center;
  background-color:white;
  
  text-decoration:none;
  /*font-size:16px;  */
}

a[data-answer="right"] {
  background-color:lightgreen;
}

a[data-answer="retry_right"] {
  background-color:lightgreen;
    color: #000;
}

a[data-answer="wrong"] {
  background-color:hsl(0, 100%, 80%);
  color: #000; 

}

input.form-control {
    margin-left: auto;
    margin-right: auto;
    width: inherit;
}


/* css fireworks below from https://jsfiddle.net/elin/7m3bL/  */

.pyro > .before, .pyro > .after {
  position: absolute;
  left: 0;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  box-shadow: -120px -218.66667px blue, 248px -16.66667px #00ff84, 190px 16.33333px #002bff, -113px -308.66667px #ff009d, -109px -287.66667px #ffb300, -50px -313.66667px #ff006e, 226px -31.66667px #ff4000, 180px -351.66667px #ff00d0, -12px -338.66667px #00f6ff, 220px -388.66667px #99ff00, -69px -27.66667px #ff0400, -111px -339.66667px #6200ff, 155px -237.66667px #00ddff, -152px -380.66667px #00ffd0, -50px -37.66667px #00ffdd, -95px -175.66667px #a6ff00, -88px 10.33333px #0d00ff, 112px -309.66667px #005eff, 69px -415.66667px #ff00a6, 168px -100.66667px #ff004c, -244px 24.33333px #ff6600, 97px -325.66667px #ff0066, -211px -182.66667px #00ffa2, 236px -126.66667px #b700ff, 140px -196.66667px #9000ff, 125px -175.66667px #00bbff, 118px -381.66667px #ff002f, 144px -111.66667px #ffae00, 36px -78.66667px #f600ff, -63px -196.66667px #c800ff, -218px -227.66667px #d4ff00, -134px -377.66667px #ea00ff, -36px -412.66667px #ff00d4, 209px -106.66667px #00fff2, 91px -278.66667px #000dff, -22px -191.66667px #9dff00, 139px -392.66667px #a6ff00, 56px -2.66667px #0099ff, -156px -276.66667px #ea00ff, -163px -233.66667px #00fffb, -238px -346.66667px #00ff73, 62px -363.66667px #0088ff, 244px -170.66667px #0062ff, 224px -142.66667px #b300ff, 141px -208.66667px #9000ff, 211px -285.66667px #ff6600, 181px -128.66667px #1e00ff, 90px -123.66667px #c800ff, 189px 70.33333px #00ffc8, -18px -383.66667px #00ff33, 100px -6.66667px #ff008c;
  -moz-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -webkit-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -o-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  -ms-animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards;
  animation: 1s bang ease-out infinite backwards, 1s gravity ease-in infinite backwards, 5s position linear infinite backwards; }

.pyro > .after {
  -moz-animation-delay: 1.25s, 1.25s, 1.25s;
  -webkit-animation-delay: 1.25s, 1.25s, 1.25s;
  -o-animation-delay: 1.25s, 1.25s, 1.25s;
  -ms-animation-delay: 1.25s, 1.25s, 1.25s;
  animation-delay: 1.25s, 1.25s, 1.25s;
  -moz-animation-duration: 1.25s, 1.25s, 6.25s;
  -webkit-animation-duration: 1.25s, 1.25s, 6.25s;
  -o-animation-duration: 1.25s, 1.25s, 6.25s;
  -ms-animation-duration: 1.25s, 1.25s, 6.25s;
  animation-duration: 1.25s, 1.25s, 6.25s; }

@-webkit-keyframes bang {
  from {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@-moz-keyframes bang {
  from {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@-o-keyframes bang {
  from {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@-ms-keyframes bang {
  from {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@keyframes bang {
  from {
    box-shadow: 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white, 0 0 white; } }
@-webkit-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0; } }
@-moz-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0; } }
@-o-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0; } }
@-ms-keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0; } }
@keyframes gravity {
  to {
    transform: translateY(200px);
    -moz-transform: translateY(200px);
    -webkit-transform: translateY(200px);
    -o-transform: translateY(200px);
    -ms-transform: translateY(200px);
    opacity: 0; } }
@-webkit-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%; }

  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%; }

  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%; }

  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%; }

  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%; } }
@-moz-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%; }

  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%; }

  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%; }

  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%; }

  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%; } }
@-o-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%; }

  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%; }

  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%; }

  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%; }

  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%; } }
@-ms-keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%; }

  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%; }

  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%; }

  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%; }

  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%; } }
@keyframes position {
  0%, 19.9% {
    margin-top: 10%;
    margin-left: 40%; }

  20%, 39.9% {
    margin-top: 40%;
    margin-left: 30%; }

  40%, 59.9% {
    margin-top: 20%;
    margin-left: 70%; }

  60%, 79.9% {
    margin-top: 30%;
    margin-left: 20%; }

  80%, 99.9% {
    margin-top: 30%;
    margin-left: 80%; } }



.starrynight 
{  
  width: 100%;
  height: 100%;
  padding: 10px;
  margin: 0 auto;
  background-image: url("https://media.giphy.com/media/U3qYN8S0j3bpK/giphy.gif");
  position: relative;

  color:lightyellow;
  font-size:1.5rem;
}


/* another door - from https://codepen.io/am_eu/pen/EgZdaQ*/
.backDoor
{
  background-color: #333;
  position:relative;
  width:400px;
  height:660px;
  
  margin: 0 auto;
  margin-top:50px;
}

.door
{
  background-color: #333;
  position:absolute;
  top:0px;
  left:0px;
  width:400px;
  height:660px;
 
  transform-origin: left;
  /*Speed of the Door animation*/
  transition: all 0.5s ease-in-out;
}

.doorOpen
{
  /*prespectiv creates the door open effect*/
  transform: perspective(1200px) translateZ(0px) translateX(0px) translateY(0px) rotateY(-105deg);
}



/* BALLOONS for completing a full secret word */
/* Based on this, but I had to tweak:  https://codepen.io/wearebold/pen/tDJLr */

.balloon { 

  margin: 0 auto;
  padding-top: 30px;
  position: relative;

  /*border:1px solid blue; */

  display:flex;
  align-content: center;
  justify-content: center;
}


/* this shrinks all the balloon stuff...for subsequent visits to page after user completed word */
.balloon_small
{
    transform:scale(0.5,0.5); 

    display:flex;
    align-content: center;
    justify-content: center;
   
}

.balloon > div {
  width:115px;
  height:140px; 
  background:white;
  border-radius:0;
  border-radius:80% 80% 80% 80%;
  position: relative;
  padding:10px;
  box-shadow:inset 17px 7px 10px white; 
  -webkit-transform-origin: bottom center; 
  transform-origin:bottom center;

  margin:5px;
}



.balloon > div:nth-child(1){
  background: crimson;
  /*left: 0px;  */
  box-shadow:inset 10px 10px 10px darkred;
  -webkit-animation:balloon1 6s ease-in-out infinite;
  -moz-animation:balloon1 6s ease-in-out infinite;
  -o-animation:balloon1 6s ease-in-out infinite;
  animation:balloon1 6s ease-in-out infinite;

  position:relative;
}
.balloon > div:nth-child(1)::before{ 
  color:crimson;

}

.balloon > div:nth-child(2){
  background: orange;
  /*left: 120px; */
  box-shadow:inset 10px 10px 10px peru;
   -webkit-animation:balloon2 6s ease-in-out infinite;
  -moz-animation:balloon2 6s ease-in-out infinite;
  -o-animation:balloon2 6s ease-in-out infinite;
  animation:balloon2 6s ease-in-out infinite;

  position:relative


}
.balloon > div:nth-child(2)::before{ 
  color:orange;

}

.balloon > div:nth-child(3){
  background: skyblue;
  /*left: 240px; */
  box-shadow:inset 10px 10px 10px deepskyblue;
   -webkit-animation:balloon4 6s ease-in-out infinite;
  -moz-animation:balloon4 6s ease-in-out infinite;
  -o-animation:balloon4 6s ease-in-out infinite;
  animation:balloon4 6s ease-in-out infinite;
}
.balloon > div:nth-child(3)::before{ 
  color:skyblue;
}

.balloon > div:nth-child(4){
  background: mediumpurple;
  /*left: 360px; */
  box-shadow:inset 10px 10px 10px rebeccapurple; 
   -webkit-animation:balloon1 5s ease-in-out infinite;
  -moz-animation:balloon1 5s ease-in-out infinite;
  -o-animation:balloon1 5s ease-in-out infinite;
  animation:balloon1 5s ease-in-out infinite;

  position:relative;
}
.balloon > div:nth-child(4)::before{ 
  color:mediumpurple;
}

.balloon > div:nth-child(5){
  background: mediumseagreen;
  /*left: 480px;  */
  box-shadow:inset 10px 10px 10px seagreen;
   -webkit-animation:balloon3 5s ease-in-out infinite;
  -moz-animation:balloon3 5s ease-in-out infinite;
  -o-animation:balloon3 5s ease-in-out infinite;
  animation:balloon3 5s ease-in-out infinite;

  position:relative;
}
.balloon > div:nth-child(5)::before{ 
  color:mediumseagreen;
}

.balloon > div:nth-child(6){
  background: gold;
/*  left: 600px; */
  box-shadow:inset 10px 10px 10px goldenrod;
  -webkit-animation:balloon2 3s ease-in-out infinite;
  -moz-animation:balloon2 3s ease-in-out infinite;
  -o-animation:balloon2 3s ease-in-out infinite;
  animation:balloon2 3s ease-in-out infinite;

  position:relative;
}
.balloon > div:nth-child(6)::before{ 
  color:gold;
}

.balloon > div:before {
  position:absolute;
  bottom:-28px;
  left: 40px;  
  content:"▲";
  font-size:0.5em;
}

.balloon_span {
  font-size: 4.8em;
  color: white;
  position: relative;
  top: 10px;


} 


/* to shrink balloons etc. on mobile */
@media screen and (max-width: 48em){

  .balloon > div{
    width:57px;
    height:70px;
    margin:1px;
  }

  .balloon_span{
    font-size:2em;
    top:2px;
  }

  .balloon > div:before{
    position:absolute;
    bottom:-13px;
    left:22px;

  }

}  

/*BALLOON 1 4*/


@-webkit-keyframes balloon1 {
  0%,100%{ -webkit-transform:translateY(0) rotate(-6deg);}
  50%{ -webkit-transform:translateY(-20px) rotate(8deg); }
}
@-moz-keyframes balloon1 {
  0%,100%{ -moz-transform:translateY(0) rotate(-6deg);}
  50%{ -moz-transform:translateY(-20px) rotate(8deg); }
}
@-o-keyframes balloon1 {
  0%,100%{ -o-transform:translateY(0) rotate(-6deg);}
  50%{ -o-transform:translateY(-20px) rotate(8deg); }
}
@keyframes balloon1 {
  0%,100%{ transform:translateY(0) rotate(-6deg);}
  50%{ transform:translateY(-20px) rotate(8deg); }
}

/* BAllOON 2 5*/



@-webkit-keyframes balloon2 {
  0%,100%{ -webkit-transform:translateY(0) rotate(6eg);}
  50%{ -webkit-transform:translateY(-30px) rotate(-8deg); }
}
@-moz-keyframes balloon2 {
  0%,100%{ -moz-transform:translateY(0) rotate(6deg);}
  50%{ -moz-transform:translateY(-30px) rotate(-8deg); }
}
@-o-keyframes balloon2 {
  0%,100%{ -o-transform:translateY(0) rotate(6deg);}
  50%{ -o-transform:translateY(-30px) rotate(-8deg); }
}
@keyframes balloon2 {
  0%,100%{ transform:translateY(0) rotate(6deg);}
  50%{ transform:translateY(-30px) rotate(-8deg); }
}


/* BAllOON 0*/


@-webkit-keyframes balloon3 {
  0%,100%{ -webkit-transform:translate(0, -10px) rotate(6eg);}
  50%{ -webkit-transform:translate(-20px, 30px) rotate(-8deg); }
}
@-moz-keyframes balloon3 {
 0%,100%{ -moz-transform:translate(0, -10px) rotate(6eg);}
  50%{ -moz-transform:translate(-20px, 30px) rotate(-8deg); }
}
@-o-keyframes balloon3 {
 0%,100%{ -o-transform:translate(0, -10px) rotate(6eg);}
  50%{ -o-transform:translate(-20px, 30px) rotate(-8deg); }
}
@keyframes balloon3 {
 0%,100%{ transform:translate(0, -10px) rotate(6eg);}
  50%{ transform:translate(-20px, 30px) rotate(-8deg); }
}

/* BAllOON 3*/


@-webkit-keyframes balloon4 {
  0%,100%{ -webkit-transform:translate(10px, -10px) rotate(-8eg);}
  50%{ -webkit-transform:translate(-15px, 20px) rotate(10deg); }
} 
@-moz-keyframes balloon4 {
  0%,100%{ -moz-transform:translate(10px, -10px) rotate(-8eg);}
  50%{ -moz-transform:translate(-15px, 10px) rotate(10deg); }
}
@-o-keyframes balloon4 {
  0%,100%{ -o-transform:translate(10px, -10px) rotate(-8eg);}
  50%{ -o-transform:translate(-15px, 10px) rotate(10deg); }
}
@keyframes balloon4 {
  0%,100%{ transform:translate(10px, -10px) rotate(-8eg);}
  50%{ transform:translate(-15px, 10px) rotate(10deg); }
}

/* END of Balloons */