body {
	position: relative;
	overflow: hidden;
	background-color: black;
	margin: auto;
}

#element_two {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
}


.star {
	fill: rgba(255, 255, 0, 0.5);
	stroke: red;
}

#element {
	position: relative;
	padding-top: 10px;
	z-index: 2;

}

#container {
	width: 100%;
	height: 100%;
}

@keyframes moveup {
	0%{transform: translateY(600px);}
	50%{transform: translateY(-600px);}
	100%{transform: translateY(600px);}
}

@keyframes movedown {
	0%{transform: translateY(-600px);}
	50%{transform: translateY(600px);}
	100%{transform: translateY(-600px);}
}

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

@keyframes rotate_right {
	0%{transform: rotate(0deg) scale(0);}
	50%{transform: rotate(180deg) scale(1);}
	100%{transform: rotate(360deg) scale(0);}
}

@keyframes rotate_left {
	0%{transform: rotate(0deg) scale(0);}
	50%{transform: rotate(-180deg) scale(1);}
	100%{transform: rotate(-360deg) scale(0);}
}

@keyframes regular_rotation {
	0% {transform: rotateX(0deg);}
	100%{transform: rotateX(360deg);}
}

@keyframes regular_rotation_rev {
	0% {transform: rotateX(0deg);}
	100%{transform: rotateX(-360deg);}
}

@keyframes move_left {
	0% {transform: translateX(500px);}
	25%{transform: translateX(-500px);}
	50%{transform: translateX(500px);}
	75%{transform: translateX(-500px);}
	100%{transform: translateX(500px);}
}

@keyframes move_right {
	0% {transform: translateX(-500px);}
	25%{transform: translateX(500px);}
	50%{transform: translateX(-500px);}
	75%{transform: translateX(500px);}
	100%{transform: translateX(-500px);}
}

@keyframes move_left_one {
	0% {transform: translateX(500px) scale(0) rotate(0deg);}
	25%{transform: translateX(-500px) scale(1) rotate(360deg);}
	50%{transform: translateX(500px) scale(0) rotate(0deg);}
	75%{transform: translateX(-500px) scale(1) rotate(360deg);}
	100%{transform: translateX(500px) scale(0) rotate(0deg);}
}

@keyframes move_right_one {
	0% {transform: translateX(-500px) scale(0) rotate(0deg);}
	25%{transform: translateX(500px) scale(1) rotate(360deg);}
	50%{transform: translateX(-500px) scale(0) rotate(0deg);}
	75%{transform: translateX(500px) scale(1) rotate(360deg);}
	100%{transform: translateX(-500px) scale(0) rotate(0deg);}
}

/* ELEMENT ONE STYLES */

#up{
	transform-origin: bottom;
	animation: rotate_right 2s infinite linear normal 5s;
	animation: movedown 2s infinite linear normal;
					
}


#down {
	transform-origin: top;
	animation: rotate_left 2s infinite linear normal 5s;
	animation: moveup 2s infinite linear normal;

}

#up:hover {
	animation-play-state: paused;
}

#down:hover {
	animation-play-state: paused;

}

#row_one, #row_three, #row_five {
	fill: red;
	transform-box: fill-box; /* Set the transform-box property to fill-box */
 	transform-origin: center; /* Set the transform-origin property to center */
	animation: move_left 5s infinite linear normal 15s;
}

#row_two, #row_four, #row_six {
	fill: green;
	animation: move_right 5s infinite normal 15s;
}

/*ELEMENT TWO STYLES */
#down1{
	transform-box: fill-box; /* Set the transform-box property to fill-box */
  	transform-origin: center; /* Set the transform-origin property to center */
	animation: move_left_one 4s infinite linear normal 9s;
}

#up1{
	transform-box: fill-box; /* Set the transform-box property to fill-box */
  	transform-origin: center; /* Set the transform-origin property to center */
	animation: move_right_one 4s infinite linear normal 9s;
}

#down1:hover {
	animation-play-state: paused;
}

#up1:hover {
	animation-play-state: paused;
}

#row_one1, #row_three1, #row_five1 {
	transform-box: fill-box; /* Set the transform-box property to fill-box */
 	transform-origin: center; /* Set the transform-origin property to center */
	animation: regular_rotation 5s infinite linear normal 5s;
}

#row_two1, #row_four1, #row_six1 {
	transform-box: fill-box; /* Set the transform-box property to fill-box */
  	transform-origin: center; /* Set the transform-origin property to center */
	animation: regular_rotation_rev 5s infinite linear normal 5s;
}
