/* Stage */
#stage {
	/* background: #ccc; */
	height: 360px;
	width: 640px;
  }


.YellowStar:active {
  animation: zoomOut 2s;
}

@keyframes zoomOut {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(0);
  }
}



/* Glittering Single Pixels Animations */
#bluedot1, .purpledot7, #bss1-left, #bss3-right, #bss4-left, #bss5-bottom {
  animation: flash 4s ease-in-out infinite;
}

@keyframes flash {
  0% {
    opacity: 1; 
  }
  50% {
    opacity: .5;  
  }
  100% {
    opacity: 1; 
  }
}

#bluedot2, #bss4-top, #bss5-left {
  animation: flash 3s ease-in-out infinite;
}

@keyframes flash {
  0% {
    opacity: 1; 
  }
  50% {
    opacity: .5;  
  }
  100% {
    opacity: 1; 
  }
}

#bluedot3, #purpledot4, #bss5-right {
  animation: flash 5s ease-in-out infinite;
}

@keyframes flash {
  0% {
    opacity: 1; 
  }
  50% {
    opacity: .5;  
  }
  100% {
    opacity: 1; 
  }
}


#purpledot1, .purpledot6, #bss1-bottom {
  animation: flash 5s ease-in-out infinite;
}

@keyframes flash {
  0% {
    opacity: 1; 
  }
  50% {
    opacity: .5;  
  }
  100% {
    opacity: 1; 
  }
}

#purpledot2, #bss1-top, #bss3-bottom, #bss4-right {
  animation: flash 3s ease-in-out infinite;
}

@keyframes flash {
  0% {
    opacity: 1; 
  }
  50% {
    opacity: .5;  
  }
  100% {
    opacity: 1; 
  }
}

#purpledot3, #purpledot5, #bss3-top, #bss4-bottom, #bss5-top {
  animation: flash 1s ease-in-out infinite;
}

@keyframes flash {
  0% {
    opacity: 1; 
  }
  50% {
    opacity: .5;  
  }
  100% {
    opacity: 1; 
  }
}

.purpledot8 {
  animation: flash 1s ease-in-out infinite;
}

@keyframes flash {
  0% {
    opacity: .5; 
  }
  50% {
    opacity: .5;  
  }
  100% {
    opacity: 1; 
  }
}

#rss1-middle, #rss4-middle, #bss1-right, #bss3-left {
  animation: flash 2s ease-in-out infinite;
}

@keyframes flash {
  0% {
    opacity: 1; 
  }
  50% {
    opacity: .3;  
  }
  100% {
    opacity: 1; 
  }
}

#rss2-middle, #rss3-middle, #bss2-right {
  animation: flash 1s ease-in-out infinite;
}

@keyframes flash {
  0% {
    opacity: 1; 
  }
  50% {
    opacity: .3;  
  }
  100% {
    opacity: 1; 
  }
}



  /* DO NOT EDIT BELOW THIS LINE */

html, body { 
    height: 100%;
  }
  
  body {
      width: 100%;
      margin: 0;
      display: flex;
      align-items: center;
    justify-content: center;
  }
  
  #search {
    text-align: center;
  }
  
  button {
    display: inline-block;
    background-color: #f2f2f2;
    border: 1px solid #f2f2f2;
    border-radius: 2px;
    color: #757575;
    cursor: default;
    font-family: arial, sans-serif;
    font-size: 1em;
    font-weight: bold;
    padding: .5em 1em;
    text-align: center;
  }
  
  input {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAwCAYAAABXAvmHAAACrElEQVR42u2Xz2sTQRSAX8VSb1K8iNqKooJH2Ux6Ksn+iPQqxZMIehJB0do/IMhmQWsvHr2KSEGk0tSLIoWIYNUKij20F2/N7iaUZnYT0kYzzhMKs0HDJiTdLcwHDwKZSd63781LBiQSSW9JZdkhzfKm1Rz9mjZp/W9YdEU3vXv4HsQZ40FtNG36q5rls//Ej4tmbSS2T15Mvp3ExOPmEMQNbBtMMEyoljcFcQN7PqyAlqNfIG7gYQ0tYNIaxA1MrJPY3wImbUqBKAXSFv0tBSIVMOkvKRDtGKWN/T6FdqRAxFNoWwpEPIXqUqBT6ALU/UVgu8GW4GD3f6f9TRDYNJTDrk7YbtiqUumHwIYoUJuHERDAS0r4CvgFECgbY+cFAR7KT+g1POmCKFDNw6WggHc3fBtVb4CAoyauBgXIG+g1Xh5mRAGah6cggBd11fK/h7lOprIs0H6uRl6KAo5O7kOv4QmPiwJ4Jqqv4FiwCtXjvD2+tRmfK6kZ/ygI2HritK0rDVGgrClJ6DWMwYC/AGuCBMYcIC2V0CzvjmbRz3j3xUjn6CfeYreUJ2wQkGD75INPX1mFfsEFrrcIYCvdhC4paWQakxajpJMr0C9YFg54i7AsClRmh9/xnr0NHcInzZStk2aLwAcGMAD9pPIazvFKVDD5rdnhJeHLX5RTyRPQHpz5o66emMc9wdlPtvA8wF7Aq2BUHh1525qEo5JtR1WeOXpickO9cJIpyuD6xJmhYiZ5ytWSl3mlnuOaf+2zDaLDXmJrSgZ/MYVEugo+gSh+FkSBa4yd5Ul87DZ5XpFl/AyIEjzYjkau8WqshU2cr13HPbgX4gJOD97n465GZlyVvC9mSKloKI2iTnbwNT+gBX54H+IaXAtxJzE3ycSAFqSAFJACUkAikXD+AHj5/wx2o5osAAAAAElFTkSuQmCC) no-repeat center right;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.16), 0 0 0 1px rgba(0, 0, 0, 0.08);
    border: 1px solid #aaa;
    display: block;
    padding: 1em;
    margin: 2em auto;
    outline: none;
    line-height: 2em;
    width: 80%;
  }

  /* ------------- */