html,
body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  color: white;
}



/* PAGE 1 CSS*/
/*_________________________________________*/
/*_________________________________________*/




/* UPPER LEFT */
/* Upper Left background (hidden on load)*/
#UL {
  top: 10%;
  left: 0;
  display: none;
  background-color: yellow;
  position: absolute;
  background-blend-mode: hard-light;
  width: 50%;
  height: 41%;
  overflow: scroll;
}

/* Upper Left button (hidden on load)*/
.ULbutton {
  position: absolute;
  display: none;
  top: 20%;
  left: 32.5%;
  width: 15%;
  cursor: pointer;
  z-index: 99;
  /*height: 50%;*/
}

@keyframes ULcolorAnimationFill {
  from {background-color: yellow;}
  to {background-color: red;}
}

#ULtext {
  padding-left: 10px;
  display: none;
  font-size: 1.5em;
  /*-webkit-text-stroke: 0.5px white;*/
  -webkit-text-fill-color: black;
}

/* UPPER RIGTH*/
/* Upper Rigth background (hidden on load)*/
#UR {
  top: 0;
  left: 50%;
  display: none;
  background-color: lightblue;
  position: absolute;
  width: 48%;
  height: 50%;
  overflow: scroll;
  color: lightgreen;
}

/* Upper Right button (hidden on load)*/
.URbutton {
  position: absolute;
  display: none;
  top: 20%;
  right: 32.5%;
  width: 15%;
  cursor: pointer;
  z-index: 99;
  /*height: 50%;*/
}

@keyframes URcolorAnimationFill {
  from {background-color: lightblue;}
  to {background-color: green;}
}

#URtext {
  padding-left: 10px;
  display: none;
  font-size: 1.4em;
  /*-webkit-text-stroke: 0.3px white;*/
  -webkit-text-fill-color: lightblue;
}

/* DOWN LEFT*/
/* Down Left background (hidden on load)*/
#DL {
  top: 50%;
  left: 0;
  display: none;
  background-color: lightgreen;
  position: absolute;
  width: 50%;
  height: 48%;
  overflow: scroll;
}

/* Down Left button (hidden on load)*/
.DLbutton {
  position: absolute;
  display: none;
  bottom: 20%;
  left: 32.5%;
  width: 15%;
  transform: rotate(270deg);
  cursor: pointer;
  z-index: 99;
  /*height: 50%;*/
}

@keyframes DLcolorAnimationFill {
  from {background-color: lightgreen;}
  to {background-color: blue;}
}

#DLtext {
  padding-left: 10px;
  display: none;
  font-size: 1.5em;
  /*-webkit-text-stroke: 0.5px white;*/
  -webkit-text-fill-color: lightgreen;
}


/* DOWN RIGHT */
/* Down Rigth background (hidden on load)*/
#DR {
  top: 51%;
  left: 50%;
  display: none;
  background-color: red;
  position: absolute;
  width: 50%;
  height: 50%;
  overflow: scroll;
}

/* Down Right button (hidden on load)*/
.DRbutton {
  position: absolute;
  display: none;
  bottom: 20%;
  right: 32.5%;
  width: 15%;
  cursor: pointer;
  z-index: 99;
  /*height: 50%;*/
}

@keyframes DRcolorAnimationFill {
  from {background-color: red;}
  to {background-color: yellow;}
}

#DRtext {
  padding-left: 10px;
  display: none;
  font-size: 1.5em;
  /*-webkit-text-stroke: 0.5px white;*/
  -webkit-text-fill-color: black;
}

.paymeClass {
  position: absolute;
  top: 5%;
  left: 25%;
  width: 50%;
  cursor: pointer;
}

/* Sliding Box to go to 2nd page*/

#SlidingBox{
  width: 7%;
  height: 7%;
  background: red;
  position: absolute;
  display: none;
  /*animation: mymove 2s;*/
  /*animation-fill-mode: forwards;*/
  -webkit-text-fill-color: black;
  overflow: scroll;
}

/*@keyframes SlidingBox {
  from {top: 0px; left: 0%; background: green;}
  to {top: 0px; left: 45.07%; background: blue;}
}*/

@keyframes SlidingBox {
  0%   {background-color:green; left:0; top:0px;}
  75%  {background-color:lightblue; left:40%; top:10%;}
  100% {background-color:blue; left:85.07%; top:80%;}
}

/* This button is a hidden shortcut menu to the search page ~ easter egg */
#hiddenButtonLeft{
  border: 0;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 7%;
  background-color: lightblue;
  opacity: 0.1;
  transition: 1s;
  cursor: pointer;
  color: black; /* add text color */
  font-size: 3vw; /* add font size */
  font-weight: bold; /* add font weight */
  text-align: center; /* center text horizontally */
  line-height: 100%; /* center text vertically */
  text-align: left;
  padding: 1 0px; /* adjust the value to your preference */
}

.vertical-text {
  display: inline-block;
   position: absolute;
  top: 20%;
  left: 25%;
  transform: rotate(90deg);
  transform-origin: left bottom;
}

#hiddenButtonLeft:hover{
  border: 0;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  height: 100%;
  width: 8%;
  background-color: lightblue;
  opacity: 1;
  cursor: pointer;
}

/* This button is a hidden shortcut menu to the idea submission page ~ easter egg */
#hiddenButtonRight{
  border: 0;
  position: absolute;
  display: block;
  top: 0;
  left: 93%;
  height: 100%;
  width:7%;
  background-color: purple;
  opacity: 0.08;
  transition: 1s;
  cursor: pointer;
  color: yellow; /* add text color */
  font-size: 3vw; /* add font size */
  font-weight: bold; /* add font weight */
  text-align: center; /* center text horizontally */
  line-height: 100%; /* center text vertically */
  text-align: left;
  padding: 1 0px; /* adjust the value to your preference */
}

.vertical-text2 {
  display: inline-block;
   position: absolute;
  top: 80%;
  left: 25%;
  transform: rotate(-90deg);
  transform-origin: left top;
}

#hiddenButtonRight:hover{
  border: 0;
  position: absolute;
  display: block;
  top: 0;
  left: 92%;
  height: 100%;
  width:8%;
  background-color: purple;
  opacity: 1;
  cursor: pointer;
}

/* This button is a hidden shortcut menu to the idea edit/deletion page ~ easter egg */
#hiddenButtonBottom{
  border: 0;
  position: absolute;
  /*display: block;*/
  top: 93%;
  left: 7%;
  height: 10%;
  width: 86%;
  background-color: lightgreen;
  opacity: 0.1;
  transition: 1s;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

#hiddenButtonBottom span {
  color: black; /* add text color */
  font-size: 3vw; /* add font size */
  font-weight: bold; /* add font weight */
  text-align: center; /* center text horizontally */
  margin-top: 0.5vw; /* adjust as needed */
}

#hiddenButtonBottom:hover{
  border: 0;
  position: absolute;
  display: block;
  top: 92%;
  left: 7%;
  height: 10%;
  width: 86%;
  background-color: lightgreen;
  opacity: 1;
  cursor: pointer;
}

/* A helper appears after 5 secs to help the user if lost */
.helper {
  display: block;
  position: absolute;
  top: 10%;
  left: 20%;
  width: 5vw;
  height: 5vw;
  border: 3px solid purple;
  border-radius: 50%;
  animation: helperAppear 0.4s ease forwards 2s;
  opacity: 0;
  z-index: 3;
}

.helper img {
  max-width: 100%;
  max-height: 100%;
  left: 0;
  animation: helperImg 0.1s ease-in-out 2.5s forwards;
  opacity: 0;
  border-radius: 30%;
  z-index: 2;
  cursor: pointer;
}

@keyframes helperAppear {
  0% {opacity: 0; transform: scale(0);}
  60% {opacity: 1;transform: scale(1.5);}
  100% {opacity: 1;transform: scale(1);}
}

@keyframes helperImg {
  0% {width: 4vw; opacity: 0; transform: scale(0.8);}
  100% {width: 5vw; opacity: 1; transform: scale(1);}
}

/* Light box for help image */
/* Hide the Lightbox by default */
#lightbox-container {
  display: none;
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.5);
  text-align: center;
}

/* Style the close button */
.close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  color: #fff;
  font-size: 30px;
  font-weight: bold;
  cursor: pointer;
}

/* Style the image */
#lightbox-container img {
  max-width: 90%;
  max-height: 90%;
  margin-top: 5%;
  border: 2px solid #fff;
  /*border-radius: 50%;*/
  box-shadow: 0px 0px 25px 5px rgba(0, 0, 0, 0.75);
  opacity: 1;
}


/* Second helper appears to help the user if lost */
.helper2 {
  display: none;
  position: absolute;
  top: 0.5%;
  left: 30%;
  width: 5vw;
  height: 5vw;
  border: 3px solid purple;
  border-radius: 50%;
  animation: helperAppear2 0.4s ease forwards;
  opacity: 0;
  z-index: 3;
}

.helper2 img {
  max-width: 100%;
  max-height: 100%;
  left: 0;
  animation: helperImg2 0.1s ease-in-out 0s forwards;
  opacity: 0;
  border-radius: 30%;
  z-index: 2;
  cursor: pointer;
}

#helper2Text {
    display: none;
    position: absolute;
    top: 0.5%;
    left: 36%;
    width: 10.5vw;
    animation: helperImg2 2.5s ease-in-out 0.5s forwards;
    /*height: 7vw;*/
    opacity: 0;
    z-index: 99;
}

/* Helper 1 animation */
@keyframes helperAppear {
  0% {opacity: 0; transform: scale(0);}
  60% {opacity: 1;transform: scale(1.5);}
  100% {opacity: 1;transform: scale(1);}
}

@keyframes helperImg {
  0% {width: 4vw; opacity: 0; transform: scale(0.8);;}
  100% {width: 5vw; opacity: 1; transform: scale(1);}
}

/* Helper 2 animation */
@keyframes helperAppear2 {
  0% {opacity: 0; transform: scale(0);}
  100% {opacity: 1;transform: scale(1);}
}

@keyframes helperImg2 {
  0% {opacity: 0; transform: scale(1);; top: 0.5%; left: 36%;}
  10% {opacity: 1; transform: scale(3); top: 10.5%; left: 45%;}
  90% {opacity: 1; transform: scale(3); top: 10.5%; left: 45%;}
  100% {opacity: 1; transform: scale(1);; top: 0.5%; left: 36%;}
}

@keyframes helperImg2Hover {
  0% {opacity: 1; transform: scale(1);; top: 0.5%; left: 36%;}
  100% {opacity: 1; transform: scale(3); top: 8%; left: 48%;}
}

@keyframes helperImg2HoverEnded {
  0% {opacity: 1; transform: scale(3); top: 8%; left: 48%;}
  100% {opacity: 1; transform: scale(1);; top: 0.5%; left: 36%;}
}


/* PAGE 2 CSS*/
/*_________________________________________*/
/*_________________________________________*/



/* UPPER LEFT */
/* Upper Left background (visible on load)*/
#UL1 {
  top: 0;
  left: 0;
  display: block;
  opacity: 1;
  background-color: cyan;
  position: absolute;
  background-blend-mode: hard-light;
  width: 50%;
  height: 40%;
  overflow: scroll;
  animation: ULAnimationFill 1s;
  animation-fill-mode: forwards;
  border-radius: 15px;
  z-index: 1;
}

@keyframes ULAnimationFill {
  from {top: 0; left: 50%; width: 0;}
  to {top: 0; left: 0; width: 50%;}
}

#UL1text {
  padding-left: 10px;
  display: block;
  opacity: 1;
  font-size: 1.3em;
  /*-webkit-text-stroke: 0.5px white;*/
  -webkit-text-fill-color: black;
  z-index: 1;
}


/* UPPER Right */
/* Upper Right background (visible on load)*/
#UR1 {
  top: 50%;
  left: 50%;
  display: block;
  opacity: 1;
  background-color: lightgray;
  position: absolute;
  background-blend-mode: hard-light;
  width: 50%;
  height: 0;
  overflow: scroll;
  animation: URAnimationFill 0.7s;
  animation-fill-mode: forwards;
  z-index: 2;
  border-radius: 15px;
  z-index: 1;
}

@keyframes URAnimationFill {
  from {top: 50%; left: 50%; height: 0px;}
  to {top: 0; left: 50%; height: 50%;}
}

#UR1text {
  padding-left: 10px;
  display: block;
  opacity: 1;
  font-size: 1.3em;
  /*-webkit-text-stroke: 0.5px white;*/
  -webkit-text-fill-color: black;
  z-index: 1;
}

/* WHEN BUTTON Got it is clicked */
/* Animation to make UR1 disappear*/
@keyframes URAnimationEmpty {
  from {top: 0; left: 50%; height: 50px;}
  to {top: 50%; left: 50%; height: 0%;}
}

/* UPPER Right REPLACEMENT*/
/* Upper Right background (visible when first "Got it!" button is pressed)*/
#UR2 {
  top: 50%;
  left: 50%;
  display: none;
  opacity: 1;
  background-color: lightgray;
  position: absolute;
  background-blend-mode: hard-light;
  width: 50%;
  height: 0;
  overflow: scroll;
  animation: URAnimationRefill 0.7s;
  animation-fill-mode: forwards;
  z-index: 2;
  border-radius: 15px;
}
@keyframes URAnimationRefill {
  from {top: 50%; left: 50%; height: 0px;}
  to {top: 0; left: 50%; height: 50%;}
}

/* Upper Right pop-up text (visible when "Maybe click..." button is pressed)*/
#UR3 {
  top: 65%;
  left: 40%;
  display: none;
  opacity: 1;
  background-color: lightgreen;
  position: absolute;
  background-blend-mode: hard-light;
  width: 100%;
  height: 40%;
  overflow: scroll;
  /*animation: URAnimationBox 0.3s;*/
  animation-fill-mode: forwards;
  z-index: 2;
  border-radius: 15px;
}
/* animation to make box appear */
@keyframes URAnimationBox {
  from {top: 40%; left: 40%; height: 0px;}
  to {top: 65%; left: 40%; height: 40%;}
}
/* animation to make box disappear */
@keyframes URAnimationBox2 {
  from {top: 65%; left: 40%; height: 40%;}
  to {top: 40%; left: 40%; height: 0px;}
}


/* DOWN Left */
/* Down left background (visible on load)*/
#DL1 {
  top: 50%;
  left: 5.5%;
  display: block;
  opacity: 1;
  background-color: orange;
  position: absolute;
  background-blend-mode: hard-light;
  width: 50%;
  height: 50%;
  overflow: scroll;
  animation: DLAnimationFill 0.7s;
  animation-fill-mode: forwards;
  border-radius: 15px;
  z-index: 1;
}

@keyframes DLAnimationFill {
  from {top: 0%; left: 5.5%; width: 0px;}
  to {top: 50%; left: 5.5%; width: 50%;}
}

#DL1text {
  padding-left: 10px;
  display: block;
  opacity: 1;
  font-size: 1.3em;
  /*-webkit-text-stroke: 0.5px white;*/
  -webkit-text-fill-color: black;
  z-index: 1;
}

/* WHEN BUTTON Got it is clicked */
/* Animation to make DL1 disappear*/
@keyframes DLAnimationEmpty {
  from {top: 50%; left: 5.5%; width: 50%;}
  to {top: 50%; left: 5.5%; width: 0px;}
}

/* DOWN Left REPLACEMENT*/
/* DOWN Left background (visible when first  button is pressed)*/
#DL2 {
  top: 50%;
  left: 5.5%;
  display: none;
  opacity: 1;
  background-color: orange;
  position: absolute;
  background-blend-mode: hard-light;
  width: 50%;
  height: 50%;
  overflow: scroll;
  animation: DLAnimationRefill 0.7s;
  animation-fill-mode: forwards;
  border-radius: 15px;
  z-index: 2;
}
@keyframes DLAnimationRefill {
  from {top: 50%; left: 5.5%; width: 0px;}
  to {top: 50%; left: 5.5%; width: 50%;}
}

/* Down Left pop-up message (visible when "Maybe!" button is pressed)*/
#DL3 {
  top: 65%;
  left: 43%;
  display: none;
  opacity: 1;
  background-color: lightgreen;
  position: absolute;
  background-blend-mode: hard-light;
  width: 57%;
  height: 45%;
  overflow: scroll;
  /*animation: URAnimationBox 0.3s;*/
  animation-fill-mode: forwards;
  border-radius: 15px;
  z-index: 2;
}
/* animation to make box appear */
@keyframes DLAnimationBox {
  from {top: 40%; height: 0px;}
  to {top: 65%; height: 45%;}
}
/* animation to make box disappear */
@keyframes DLAnimationBox2 {
  from {top: 65%; height: 45%;}
  to {top: 40%; height: 0px;}
}


/* DOWN RIGHT */
/* Down right background (visible on load)*/
#DR1 {
  top: 60%;
  left: 58%;
  display: block;
  opacity: 1;
  background-color: lightpink;
  position: absolute;
  background-blend-mode: hard-light;
  width: 1px;
  height: 30%;
  overflow: scroll;
  animation: DRAnimationFill 0.7s;
  animation-fill-mode: forwards;
  border-radius: 15px;
  z-index: 1;
}

@keyframes DRAnimationFill {
  from {width: 0%; border-radius: 0px;}
  to {width: 42%; border-radius: 0px;}
}

#DR1text {
  padding-left: 10px;
  display: block;
  opacity: 1;
  font-size: 1.3em;
  /*-webkit-text-stroke: 0.5px white;*/
  -webkit-text-fill-color: black;
  z-index: 1;
}

/* Suggestion pic moving picture atributes */
#Suggestions {
  top: 65%;
  left: 75%;
  display: block;
  opacity: 1;
  position: absolute;
  width: 150px;
  height: 150px;
  overflow: scroll;
  animation: Suggestions 1.5s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  cursor: pointer;
  z-index: 2;
}

@keyframes Suggestions {
  from {top: 25%; left: 55.2%;}
  to {top: 25.3%; left: 55%;}
}

/* Thirt helper appears to help the user if lost */
.helper3 {
  display: block;
  position: absolute;
  top: 0.5%;
  left: 35%;
  width: 5vw;
  height: 5vw;
  border: 3px solid purple;
  border-radius: 50%;
  animation: helperAppear3 0.4s ease 1s forwards;
  opacity: 0;
  z-index: 99;
}

.helper3 img {
  max-width: 100%;
  max-height: 100%;
  left: 0;
  animation: helperImg3 0.1s ease-in-out 0s forwards;
  opacity: 0;
  border-radius: 30%;
  z-index: 99;
  cursor: pointer;
}

/* Helper 3 animation */
@keyframes helperAppear3 {
  0% {opacity: 0; transform: scale(0);}
  60% {opacity: 1;transform: scale(1.5);}
  100% {opacity: 1;transform: scale(1);}
}

@keyframes helperImg3 {
  0% {opacity: 0; scale(0.8);}
  100% {opacity: 1; scale(1);}
}

/* Pointer tracing divs */
.split-screen {
  display: flex;
  flex-wrap: wrap;
}

.split-screen > div {
  box-sizing: border-box;
  width: 50%;
  height: 50%;
  border: 0px solid white;
}

#top-left {
  background-color: white;
}

#top-right {
  background-color: white;
}

#bottom-left {
  background-color: white;
}

#bottom-right {
  background-color: white;
}



/* SOCIAL MEDIA */
/* Facebook style and animation (hiden until Sort story button is clicked at DR screen part*/
#Facebook {
  top: 40.6%;
  left: 0;
  opacity: 1;
  display: none;
  position: absolute;
  overflow: visible;
  animation-fill-mode: forwards;
  z-index: 1;
}
@keyframes Facebook {
  from {top: 92%; opacity: 0;}
  to {top: 40.6%; opacity: 1;}
}

#Email {
  top: 40.6%;
  left: 44.2%;
  opacity: 1;
  display: none;
  position: absolute;
  overflow: visible;
  animation-fill-mode: forwards;
  /* z-index necessary here to by in front of Div UR and the buttons it has Got it! and Maybe click...*/
  z-index: 1;
}
@keyframes Email {
  from {left: 0; opacity: 0;}
  to {left: 44.2%; opacity: 1;}
}

#Instagram {
  top: 50.4%;
  left: 75%;
  opacity: 1;
  display: none;
  position: absolute;
  overflow: visible;
  animation-fill-mode: forwards;
  z-index: 1;
}
@keyframes Instagram {
  from {left: 100%; opacity: 0;}
  to {left: 75%; opacity: 1;}
}

#WhoAreWe {
  top: 93.5%;
  left: 72%;
  width: 15%;
  height: 7%;
  opacity: 1; 
  display: none; 
  position: absolute; 
  overflow: visible; 
  animation-fill-mode: forwards; 
  z-index: 2;
}

@keyframes WhoAreWe {
  from {opacity: 0;}
  to {opacity: 1;}
}

#firstHiddenButton{
  border: 0;
  position: absolute;
  overflow: visible;
  display: block;
  top: 40%;
  left: 0;
  height: 78%;
  width: 53%;
  background-color: white;
  transition: 1s;
  cursor: pointer;
  border-radius: 50px;
  z-index: 0;
  color: black; /* add text color */
  opacity: 0.1;
  font-size: 2vw; /* add font size */
  font-weight: bold; /* add font weight */
  text-align: center; /* center text horizontally */
  line-height: 100%; /* center text vertically */
  text-align: center;
  padding: 30px 10px; /* adjust the value to your preference */
}

#firstHiddenButton:hover{background-color: lightgreen; opacity:1;}

#secondHiddenButton{
  border: 0;
  position: absolute;
  display: block;
  top: 50%;
  left: 55.5%;
  height: 50%;
  width: 44.5%;
  background-color: white;
  transition: 1s;
  cursor: pointer;
  border-radius: 15px;
  z-index: 0;
  color: black; /* add text color */
  opacity: 0.1;
  font-size: 2vw; /* add font size */
  font-weight: bold; /* add font weight */
  text-align: center; /* center text horizontally */
  line-height: 100%; /* center text vertically */
  text-align: center;
  padding: 30px 10px; /* adjust the value to your preference */
}

#secondHiddenButton:hover{background-color: lightpink; opacity:1;}



/* PAGE 3 CSS Fun Mode/ Standard Mode.     */
/*_________________________________________*/
/*_________________________________________*/

/* Set div size to full screen */
#transition {
  top: 0;
  width: 100%;
  height: 100%;
  background-color: lightblue;
}

/* Red pill gif atributes*/
#RedPill {
  top: 30%;
  left: 15%;
  display: none;
  opacity: 1;
  position: absolute;
  overflow: visible;
  animation-delay: 1s;
  /*animation: RedPillAppear 2s;*/
  animation-fill-mode: forwards;
}
/* Blue pill gif atributes */
#BluePill {
  top: 30%;
  left: 50%;
  display: none;
  opacity: 1;
  position: absolute;
  overflow: visible;
  animation-delay: 1s;
  /*animation: RedPillAppear 2s;*/
  animation-fill-mode: forwards;
}
@keyframes PillAppear {
  from {opacity: 0;}
  to {opacity: 1;}
}

/* Button OVER Red pill gif position*/
#funMode {
  top: 20%;
  left: 25%;
  display: none;
  opacity: 1;
  position: absolute;
  overflow: visible;
  /*animation-delay: 1s;*/
  /*animation: RedPillAppear 2s;*/
  animation-fill-mode: forwards;
}
/* Button OVER Red pill gif position*/
#basicMode {
  top: 20%;
  left: 60%;
  display: none;
  opacity: 1;
  position: absolute;
  overflow: visible;
  /*animation-delay: 1s;*/
  /*animation: RedPillAppear 2s;*/
  animation-fill-mode: forwards;
}

/* Gif after Red pill button is pressed */
#funModePressed {
  top: 30%;
  left: 25%;
  display: none;
  opacity: 1;
  position: absolute;
  overflow: visible;
}



/* PAGE 4 CSS Success page */
/*_________________________________________*/
/*_________________________________________*/

/* Red pill gif atributes*/

#transitionNew {
  top: 0;
  width: 100%;
  height: 100%;
  background-color: lightblue;
}

#Submited {
  width: 30%;
  height: 30%;
  filter: brightness(200%) drop-shadow (8px 8px 10px gray);
  display: none;
  opacity: 1;
  position: absolute;
  overflow: visible;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}
@keyframes appear {
  from {opacity: 0;}
  to {opacity: 1;}
}

#SubmitedText {
  display: none;
  opacity: 1;
  position: absolute;
  overflow: visible;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

#AnotherIdeaCard {
  width: 80%;
  background-color: white;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  margin-bottom: 25px;
}

#AnotherIdeaCardContainer {
  text-align: center;
  padding: 10px 20px;
}

#SubmitAnother {
  left: 30%;
  top: 75%;
  display: none;
  position: absolute;
  overflow: visible;
  opacity: 1;
}



/* PAGE 6 Idea search first page (dali) */
/*_________________________________________*/
/*_________________________________________*/

#questionKey {
  display: none;
  opacity: 1;
  position: absolute;
  overflow: visible;
  /*animation: RedPillAppear 2s;*/
  animation-fill-mode: forwards;
}



/* SIGN-UP PAGE                            */
/*_________________________________________*/
/*_________________________________________*/

#colorTransition {
  top:0;
  left:0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 1;
  background: aquamarine;
  position: absolute;
  overflow: visible;
  animation: colorChange 4s;
  animation-fill-mode: forwards;
  z-index: 0;
}

@keyframes colorChange {
  from {opacity: 0; background-color: lightblue;}
  to {opacity: 1; background-color: aquamarine;}
}

#form {
  top:50%;
  left:29%;
  display: block;
  opacity: 0;
  position: absolute;
  overflow: visible;
  animation-delay: 2s;
  animation: appearElement 2s;
  animation-fill-mode: forwards;
  z-index: 1;
}

@keyframes appearElement {
 from {opacity: 0;}
  to {opacity: 1;}
}



#errorText {
  top:30%;
  left:70%;
  position: absolute;
  display: block;
  animation: not 1s;
  z-index: 1;
}

#santa {
  width: 30%;
  top: 60%;
  left: 70%;
  position:absolute;
  overflow: visible;
  z-index: 1; 
}
#santa2 {
  width: 30%;
  top: 0;
  left: 30%;
  position:absolute;
  overflow: visible;
  z-index: 1; 
}
#santa3 {
  width: 30%;
  top: 30%;
  left: 0;
  position:absolute;
  overflow: visible;
  z-index: 1; 
}


/* LOG-IN PAGE                            */
/*_________________________________________*/
/*_________________________________________*/

/* Thirt helper appears to help the user if lost */
.helper4 {
  display: none;
  position: absolute;
  top: 45%;
  left: 50%;
  width: 5vw;
  height: 5vw;
  border: 3px solid purple;
  border-radius: 50%;
  animation: helperAppear4 0.4s ease 1s forwards;
  opacity: 0;
  z-index: 99;
}

.helper4 img {
  max-width: 100%;
  max-height: 100%;
  left: 0;
  animation: helperImg4 0.1s ease-in-out 0s forwards;
  opacity: 0;
  border-radius: 30%;
  z-index: 99;
  cursor: pointer;
}

/* Helper 4 animation */
@keyframes helperAppear4 {
  0% {opacity: 0; transform: scale(0);}
  60% {opacity: 1;transform: scale(1.5);}
  100% {opacity: 1;transform: scale(1);}
}

@keyframes helperImg4 {
  0% {opacity: 0; scale(0.8);}
  100% {opacity: 1; scale(1);}
}