/* CSS for the animation */

@keyframes move-background {
  from {-webkit-transform: translate3d(0px, 0px, 0px);	}
	to { -webkit-transform: translate3d(1000px, 0px, 0px);	}
}
@-webkit-keyframes move-background {  from {	-webkit-transform: translate3d(0px, 0px, 0px);	}
	to { -webkit-transform: translate3d(1000px, 0px, 0px);	}}

@-moz-keyframes move-background { 	from {-webkit-transform: translate3d(0px, 0px, 0px);	}
	to { -webkit-transform: translate3d(1000px, 0px, 0px);	}}

    @-webkit-keyframes move-background { from {	-webkit-transform: translate3d(0px, 0px, 0px);	}
	to { -webkit-transform: translate3d(1000px, 0px, 0px);	}}


.background-container {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

.stars {
background: black url("image/stars.png") repeat;
position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: block;
  z-index: 0;
}

.twinkling {
  width: 10000px;
  height: 100%;
  background: transparent url("image/twinkling.png")
repeat;
  background-size: 1000px 1000px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 2;
  -moz-animation: move-background 120s linear
infinite;
-ms-animation: move-background 120s linear infinite;
-o-animation: move-background 120s linear infinite;
-webkit-animation: move-background 120s linear
infinite;
  animation: move-background 120s linear infinite;
}

.clouds {
  width: 10000px;
  height: 100%;
  /* background: transparent url("image/clouds _repeat.png") */
  background: transparent url("image/clouds.png")
repeat;
  background-size: 1000px 1000px;
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: 3;

  -moz-animation: move-background 170s linear
infinite;
 -ms-animation: move-background 170s linear infinite;
 -o-animation: move-background 170s linear infinite;
 -webkit-animation: move-background 170s linear infinite
infinite;
animation: move-background 170s linear infinite;
}

.moon {
  height: 30vh;
  width: 30vh;
  position: absolute;
  z-index: 3;
  top:20px;
  right: 30px;
}

.overlay {
  position: absolute;
  top: 15px;
  left: 0px;
  width:100%;
  height:auto;
  color: white;
  z-index: 10;
}

/* Additional styles for the animation-wrapper */
.animation-content {
  position: relative;
}
.animation-wrapper {
  width: 100%; /* Adjust the width as needed */
  height: 100%; /* Adjust the height as needed */
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}