* {
  user-select: none;  
  -ms-user-select: none;
  outline: 0;
    margin: 0;
    padding: 0;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}

html {
    width: 100%;
    height: 100%;
}

body{
    width: 100%;
    height: 100%;
    overflow:hidden;
    background-color: rgb(204, 92, 204);

}

canvas{
    width: 100%;
    height: 100%;
}

.blink {
    position: absolute;
    top: 50%;
        left: 50%;
       
        transform: translate(-50%,-50%);
    font-size: 50pt;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-style: bold;
  }
  
  @keyframes blink {
    0% {
      opacity: 1;
    }
    50% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

  a:link {
    color : white;
  }
  a:visited {
    color : rgba(255, 255, 255, 0.192);
  }
  a:hover {
    color : rgba(255, 255, 255, 0.192);
  }
  a:active {
    color : green
  }

.explain {
  animation: blink 3s steps(3, end) infinite;
    position: absolute;
    top: 97%;
        left: 50%;
        transform: translate(-50%,-50%);
    font-size: 10pt;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-style: bold;
    color: white;
}

/* star container */
.popup {
  animation: blink 6s steps(4, end) infinite;
  position: fixed;
    top: 10%;
    left: 29%;
    right: inherit;
    margin-top: -10px;
    margin-left: -100px;
}
.popup1 {
  animation: blink 4.5s steps(3, end) infinite;
  position: fixed;
    top: 5%;
    left: 49%;
    margin-top: -5px;
    margin-left: -100px;
}
.popup2 {
  animation: blink 3s steps(3, end) infinite;
  position: fixed;
    top: 15%;
    left: 67%;
    margin-top: -15px;
    margin-left: -100px;
}
.popup3 {
  animation: blink 5s steps(2, end) infinite;
  position: fixed;
    top: 8%;
    left: 89%;
    margin-top: -10px;
    margin-left: -100px;
}
.popup4 {
  animation: blink 4s steps(4, end) infinite;
  position: fixed;
    top: 16%;
    left: 108%;
    margin-top: -15px;
    margin-left: -100px;
}

/* The actual popup (appears on top) */
.popup .popuptext {
  visibility: hidden;
  width: 160px;
  background-color: #992efe7a;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  position: fixed;
    top: 73%;
    left: 52%;
    margin-top: -70px;
    margin-left: -100px;

}
.popup1 .popuptext1 {
  visibility: hidden;
  width: 160px;
  background-color: #992efe7a;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  position: fixed;
    top: 73%;
    left: 52%;
    margin-top: -70px;
    margin-left: -100px;

}
.popup2 .popuptext2 {
  visibility: hidden;
  width: 160px;
  background-color: #992efe7a;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  position: fixed;
    top: 73%;
    left: 52%;
    margin-top: -70px;
    margin-left: -100px;

}
.popup3 .popuptext3 {
  visibility: hidden;
  width: 160px;
  background-color: #992efe7a;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  position: fixed;
    top: 73%;
    left: 52%;
    margin-top: -70px;
    margin-left: -100px;

}
.popup4 .popuptext4 {
  visibility: hidden;
  width: 160px;
  background-color: #992efe7a;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 8px 0;
  position: absolute;
  position: fixed;
    top: 73%;
    left: 52%;
    margin-top: -70px;
    margin-left: -100px;

}
.imageSpin .popuptext5 {
  visibility: hidden;
  width: 160px;
  background-color: #ccaaee;
  color: #fff;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;
  position: fixed;
    top: 130%;
    left: 70%;
    margin-top: -60px;
    margin-left: -100px;

}

/* Popup arrow */
.popup .popuptext::after {
  content: "";
  position: absolute;
  height: 100px;
  width: 100px;
}
.popup1 .popuptext1::after {
  content: "";
  position: absolute;
  height: 100px;
  width: 100px;
}
.popup2 .popuptext2::after {
  content: "";
  position: absolute;
  height: 100px;
  width: 100px;
}
.popup3 .popuptext3::after {
  content: "";
  position: absolute;
  height: 100px;
  width: 100px;
}
.popup4 .popuptext4::after {
  content: "";
  position: absolute;
  height: 100px;
  width: 100px;
}
.imageSpin .popuptext5::after {
  content: '';
	position: absolute;
	bottom: 0;
	left: 80%;
  top: 100%;
	width: 0;
	height: 0;
	border: 30px solid transparent;
	border-top-color: #ccaaee;
	border-bottom: 0;
  border-right: 0;
	margin-left: -25px;
	margin-bottom: -30px;
}

/* Toggle this class when clicking on the popup container (hide and show the popup) */
.popup .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}
.popup1 .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}
.popup2 .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}
.popup3 .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}
.popup4 .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}
.imageSpin .show {
  visibility: visible;
  -webkit-animation: fadeIn 1s;
  animation: fadeIn 1s
}

/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
  from {opacity: 0;}
  to {opacity: 1;}
}

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

#move img{
  height: 80px;
  width: 160px;
      position:absolute;
      top: 15%;
    -webkit-animation: diagonal 2s infinite;
    -moz-animation: diagonal 2s infinite;
    -o-animation: diagonal 2s infinite;
    animation: diagonal 4s infinite;
}

@-webkit-keyframes diagonal {
    0%       { transform: translatex(-100px) translatey(100px) }
    50%      { transform: translatex(100px) translatey(-100px); }
    100%     { transform: translatex(-100px) translatey(100px) }
}

@-moz-keyframes diagonal {
  0%       { transform: translatex(-100px) translatey(100px) }
    50%      { transform: translatex(100px) translatey(-100px); }
    100%     { transform: translatex(-100px) translatey(100px) }
}

@-o-keyframes diagonal {
  0%       { transform: translatex(-100px) translatey(100px) }
    50%      { transform: translatex(100px) translatey(-100px); }
    100%     { transform: translatex(-100px) translatey(100px) }
}

@keyframes diagonal {
  0%       { transform: translatex(-100px) translatey(100px) }
    50%      { transform: translatex(100px) translatey(-100px); }
    100%     { transform: translatex(-100px) translatey(100px) }
}

#move1 img{
  height: 80px;
  width: 80px;
      position:absolute;
      top: 77%; left: 40%;
}

@keyframes spin {
  from{
  transform: rotateY(0deg);
  moz-transform: rotateY(0deg); 
  ms-transform: rotateY(0deg); 
  }
  to{
  transform: rotateY(360deg);
  moz-transform: rotateY(360deg); 
  ms-transform: rotateY(360deg);
  }
 }
 @-webkit-keyframes spin{
  from{-webkit-transform: rotateY(0deg);}
  to{-webkit-transform: rotateY(360deg);}
 }
 .imageSpin{
  position:absolute;
  top: 82%; left: 50%;
  animation-name: spin;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  animation-duration: 10s;
  -webkit-animation-name: spin;
  -webkit-animation-timing-function: linear;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 10s;
 }