.firefly {
  position: fixed;
  left: 50%;
  top: 50%;
  width: 0.4vw;
  height: 0.4vw;
  margin: -0.2vw 0 0 9.8vw;
  animation: ease 200s alternate infinite;
  pointer-events: none;
}

.firefly::before,
.firefly::after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform-origin: -10vw;
}

.firefly::before {
  background: black;
  opacity: 0.4;
  animation: drift ease alternate infinite;
}

.firefly::after {
  background: white;
  opacity: 0;
  box-shadow: 0 0 0vw 0vw yellow;
  animation: drift ease alternate infinite, flash ease infinite;
}

/* Beispielsweise für das erste .firefly Element */
.firefly:nth-child(1) {
  animation-name: move1;
}

.firefly:nth-child(1)::before {
  animation-duration: 18s;
}

.firefly:nth-child(1)::after {
  animation-duration: 18s, 5500ms;
  animation-delay: 0ms, 850ms;
}
.firefly:nth-child(2) {
  animation-name: move2;
}

.firefly:nth-child(2)::before {
  animation-duration: 16s;
}

.firefly:nth-child(2)::after {
  animation-duration: 16s, 6000ms;
  animation-delay: 0ms, 750ms;
}
/* Für das dritte .firefly Element */
.firefly:nth-child(3) {
  animation-name: move3;
}
.firefly:nth-child(3)::before {
  animation-duration: 20s;
}
.firefly:nth-child(3)::after {
  animation-duration: 20s, 6500ms;
  animation-delay: 0ms, 1200ms;
}

/* Für das vierte .firefly Element */
.firefly:nth-child(4) {
  animation-name: move4;
}
.firefly:nth-child(4)::before {
  animation-duration: 22s;
}
.firefly:nth-child(4)::after {
  animation-duration: 22s, 5500ms;
  animation-delay: 0ms, 1000ms;
}
/* Für das fünfte .firefly Element */
.firefly:nth-child(5) {
  animation-name: move5;
}
.firefly:nth-child(5)::before {
  animation-duration: 19s;
}
.firefly:nth-child(5)::after {
  animation-duration: 19s, 5600ms;
  animation-delay: 0ms, 1100ms;
}

/* Für das sechste .firefly Element */
.firefly:nth-child(6) {
  animation-name: move6;
}
.firefly:nth-child(6)::before {
  animation-duration: 21s;
}
.firefly:nth-child(6)::after {
  animation-duration: 21s, 5800ms;
  animation-delay: 0ms, 950ms;
}

/* Für das siebte .firefly Element */
.firefly:nth-child(7) {
  animation-name: move7;
}
.firefly:nth-child(7)::before {
  animation-duration: 16s;
}
.firefly:nth-child(7)::after {
  animation-duration: 16s, 6100ms;
  animation-delay: 0ms, 1300ms;
}

/* Für das achte .firefly Element */
.firefly:nth-child(8) {
  animation-name: move8;
}
.firefly:nth-child(8)::before {
  animation-duration: 18s;
}
.firefly:nth-child(8)::after {
  animation-duration: 18s, 5200ms;
  animation-delay: 0ms, 1200ms;
}

/* Für das neunte .firefly Element */
.firefly:nth-child(9) {
  animation-name: move9;
}
.firefly:nth-child(9)::before {
  animation-duration: 17s;
}
.firefly:nth-child(9)::after {
  animation-duration: 17s, 6400ms;
  animation-delay: 0ms, 850ms;
}

/* Für das zehnte .firefly Element */
.firefly:nth-child(10) {
  animation-name: move10;
}
.firefly:nth-child(10)::before {
  animation-duration: 22s;
}
.firefly:nth-child(10)::after {
  animation-duration: 22s, 5300ms;
  animation-delay: 0ms, 1000ms;
}
/* Für das elfte .firefly Element */
.firefly:nth-child(11) {
  animation-name: move11;
}
.firefly:nth-child(11)::before {
  animation-duration: 20s;
}
.firefly:nth-child(11)::after {
  animation-duration: 20s, 5700ms;
  animation-delay: 0ms, 1500ms;
}

/* Für das zwölfte .firefly Element */
.firefly:nth-child(12) {
  animation-name: move12;
}
.firefly:nth-child(12)::before {
  animation-duration: 17s;
}
.firefly:nth-child(12)::after {
  animation-duration: 17s, 5900ms;
  animation-delay: 0ms, 750ms;
}

/* Für das dreizehnte .firefly Element */
.firefly:nth-child(13) {
  animation-name: move13;
}
.firefly:nth-child(13)::before {
  animation-duration: 22s;
}
.firefly:nth-child(13)::after {
  animation-duration: 22s, 5400ms;
  animation-delay: 0ms, 1200ms;
}

/* Für das vierzehnte .firefly Element */
.firefly:nth-child(14) {
  animation-name: move14;
}
.firefly:nth-child(14)::before {
  animation-duration: 17s;
}
.firefly:nth-child(14)::after {
  animation-duration: 17s, 5900ms;
  animation-delay: 0ms, 1300ms;
}
.firefly:nth-child(15) {
  animation-name: move15;
}

.firefly:nth-child(15)::before {
  animation-duration: 24s;
}

.firefly:nth-child(15)::after {
  animation-duration: 24s, 7000ms;
  animation-delay: 0ms, 1500ms;
}

/* Keyframes für die Bewegung des ersten .firefly Elements */
@keyframes move1 {
  0% { transform: translateX(-25vw) translateY(-25vh) scale(1); }
  50% { transform: translateX(25vw) translateY(25vh) scale(0.5); }
  100% { transform: translateX(-25vw) translateY(-25vh) scale(1); }
}
@keyframes move2 {
  0% { transform: translateX(12vw) translateY(-8vh) scale(0.65); }
  20% { transform: translateX(-15vw) translateY(9vh) scale(0.8); }
  40% { transform: translateX(18vw) translateY(-7vh) scale(0.55); }
  60% { transform: translateX(-22vw) translateY(5vh) scale(0.9); }
  80% { transform: translateX(25vw) translateY(-10vh) scale(0.7); }
  100% { transform: translateX(-10vw) translateY(8vh) scale(0.6); }
}

@keyframes move3 {
  0% { transform: translateX(-5vw) translateY(20vh) scale(0.3); }
  25% { transform: translateX(10vw) translateY(-15vh) scale(0.8); }
  50% { transform: translateX(-20vw) translateY(10vh) scale(0.5); }
  75% { transform: translateX(15vw) translateY(-5vh) scale(0.75); }
  100% { transform: translateX(-5vw) translateY(15vh) scale(0.4); }
}
@keyframes move4 {
  0% { transform: translateX(10vw) translateY(-10vh) scale(0.5); }
  25% { transform: translateX(-15vw) translateY(15vh) scale(0.75); }
  50% { transform: translateX(20vw) translateY(-20vh) scale(0.6); }
  75% { transform: translateX(-25vw) translateY(25vh) scale(0.85); }
  100% { transform: translateX(10vw) translateY(-10vh) scale(0.5); }
}

@keyframes move5 {
  0% { transform: translateX(-12vw) translateY(12vh) scale(0.7); }
  20% { transform: translateX(14vw) translateY(-14vh) scale(0.55); }
  40% { transform: translateX(-16vw) translateY(16vh) scale(0.8); }
  60% { transform: translateX(18vw) translateY(-18vh) scale(0.45); }
  80% { transform: translateX(-20vw) translateY(20vh) scale(0.9); }
  100% { transform: translateX(12vw) translateY(-12vh) scale(0.7); }
}
@keyframes move6 {
  0% { transform: translateX(-20vw) translateY(20vh) scale(0.3); }
  50% { transform: translateX(25vw) translateY(-25vh) scale(0.6); }
  100% { transform: translateX(-20vw) translateY(20vh) scale(0.3); }
}

@keyframes move7 {
  0% { transform: translateX(30vw) translateY(-30vh) scale(0.4); }
  50% { transform: translateX(-35vw) translateY(35vh) scale(0.65); }
  100% { transform: translateX(30vw) translateY(-30vh) scale(0.4); }
}

@keyframes move8 {
  0% { transform: translateX(-40vw) translateY(40vh) scale(0.5); }
  50% { transform: translateX(45vw) translateY(-45vh) scale(0.75); }
  100% { transform: translateX(-40vw) translateY(40vh) scale(0.5); }
}

@keyframes move9 {
  0% { transform: translateX(50vw) translateY(-50vh) scale(0.55); }
  50% { transform: translateX(-55vw) translateY(55vh) scale(0.8); }
  100% { transform: translateX(50vw) translateY(-50vh) scale(0.55); }
}

@keyframes move10 {
  0% { transform: translateX(-60vw) translateY(60vh) scale(0.35); }
  50% { transform: translateX(65vw) translateY(-65vh) scale(0.6); }
  100% { transform: translateX(-60vw) translateY(60vh) scale(0.35); }
}

@keyframes move11 {
  0% { transform: translateX(70vw) translateY(-70vh) scale(0.45); }
  50% { transform: translateX(-75vw) translateY(75vh) scale(0.7); }
  100% { transform: translateX(70vw) translateY(-70vh) scale(0.45); }
}

@keyframes move12 {
  0% { transform: translateX(-80vw) translateY(80vh) scale(0.55); }
  50% { transform: translateX(85vw) translateY(-85vh) scale(0.8); }
  100% { transform: translateX(-80vw) translateY(80vh) scale(0.55); }
}

@keyframes move13 {
  0% { transform: translateX(90vw) translateY(-90vh) scale(0.65); }
  50% { transform: translateX(-95vw) translateY(95vh) scale(0.85); }
  100% { transform: translateX(90vw) translateY(-90vh) scale(0.65); }
}
@keyframes move14 {
  0% { transform: translateX(5vw) translateY(-5vh) scale(0.4); }
  25% { transform: translateX(-6vw) translateY(6vh) scale(0.9); }
  50% { transform: translateX(7vw) translateY(-7vh) scale(0.6); }
  75% { transform: translateX(-8vw) translateY(8vh) scale(0.7); }
  100% { transform: translateX(5vw) translateY(-5vh) scale(0.4); }
}
@keyframes move15 {
  0% { transform: translateX(-8vw) translateY(6vh) scale(0.25); }
  20% { transform: translateX(9vw) translateY(-5vh) scale(0.85); }
  40% { transform: translateX(-7vw) translateY(4vh) scale(0.65); }
  60% { transform: translateX(6vw) translateY(-3vh) scale(0.95); }
  80% { transform: translateX(-9vw) translateY(2vh) scale(0.5); }
  100% { transform: translateX(8vw) translateY(-4vh) scale(0.75); }
}
@keyframes drift {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

@keyframes flash {
  0%, 30%, 100% { opacity: 0; box-shadow: 0 0 0vw 0vw yellow; }
  5% { opacity: 1; box-shadow: 0 0 2vw 0.4vw yellow; }
}

/*.animation-cloud {
  position: absolute;
opacity: 0;
  
}*/
#animation-cloud {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
}

#animation-cloud canvas {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*

 STEAM

*/


#animation-stream {
  display: table;
  width: 100%;
  height: 100%;
  /*background-color: #171717;*/
  color: #000;
  line-height: 1.6;
  position: relative;
  font-family: sans-serif;
  overflow: hidden;
  opacity:0;
}

.lines {
	box-sizing: border-box !important;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100%;
  margin: auto;
  width: 90vw;
}

.line {
  position: absolute;
  width: 1px;
  height: 100%;
  top: 0;
  left: 50%;
  background: rgba(255, 255, 255, 0.1);
  overflow: hidden;
}
.line::after {
  content: "";
  display: block;
  position: absolute;
  height: 15vh;
  width: 100%;
  top: -50%;
  left: 0;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, #ffffff 75%, #ffffff 100%);
  -webkit-animation: drop 7s 0s infinite;
          animation: drop 7s 0s infinite;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
          animation-timing-function: cubic-bezier(0.4, 0.26, 0, 0.97);
}
.line:nth-child(1) {
  margin-left: -25%;
}
.line:nth-child(1)::after {
  -webkit-animation-delay: 2s;
          animation-delay: 2s;
}
.line:nth-child(3) {
  margin-left: 25%;
}
.line:nth-child(3)::after {
  -webkit-animation-delay: 2.5s;
          animation-delay: 2.5s;
}

@-webkit-keyframes drop {
  0% {
    top: -50%;
  }
  100% {
    top: 110%;
  }
}

@keyframes drop {
  0% {
    top: -50%;
  }
  100% {
    top: 110%;
  }
}

/*

 status

*/
#animation-status {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
}

.circle{
  position: absolute;
  border-radius: 50%;
  background: white;
  animation: ripple 15s infinite;
  box-shadow: 0px 0px 1px 0px #508fb9;
}

.small{
  width: 200px;
  height: 200px;
  left: -100px;
  bottom: -100px;
}

.medium{
  width: 400px;
  height: 400px;
  left: -200px;
  bottom: -200px;
}

.large{
  width: 600px;
  height: 600px;
  left: -300px;
  bottom: -300px;
}

.xlarge{
  width: 800px;
  height: 800px;
  left: -400px;
  bottom: -400px;
}

.xxlarge{
  width: 1000px;
  height: 1000px;
  left: -500px;
  bottom: -500px;
}

.shade1{
  opacity: 0.2;
}
.shade2{
  opacity: 0.5;
}

.shade3{
  opacity: 0.7;
}

.shade4{
  opacity: 0.8;
}

.shade5{
  opacity: 0.9;
}

@keyframes ripple{
  0%{
    transform: scale(0.8);
  }
  
  50%{
    transform: scale(1.2);
  }
  
  100%{
    transform: scale(0.8);
  }
}



/* MONITOR*/

/* Header */
#animation-monitor {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
	font-size: 3em;
  font-family: monospace;
  display: flex;

  overflow: hidden;
  text-align: center;

}
  /*background: black;
  color: #001a00;
  font-size: 3em;
  font-family: monospace;*/

/*

 mail

*/
#animation-mail {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
}

/*

 admin

*/
#animation-admin {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1;
	opacity: 0;
}