.element {
  height: 5px;
  width: 5px;
  margin: 0 auto;
  background-color: black;
  animation-name: stretch;
  animation-duration: 2s; 
  animation-timing-function: ease-out; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}
.element1 {
  height: 5px;
  width: 5px;
  margin: 0 auto;
  background-color: black;
  animation-name: stretch;
  animation-duration: 1.5s; 
  animation-timing-function: ease-out; 
  animation-delay: 0;
  animation-direction: alternate;
  animation-iteration-count: infinite;
  animation-fill-mode: none;
  animation-play-state: running;
}
.top
{
position: absolute; 
  top: 3em;
}
.top1
{
position: absolute;
  top: 10em;
}
.top2
{
position: absolute;
  top: 35em;
}
.foot
{
position: absolute;
  top: 15em;
}
.foot1
{
position: absolute;
  top: 25em;
}
.foot2
{
position: absolute;
  top: 7em;
}

.center
{
 position: absolute;
  left:20em;
}
.left
{
 position: absolute;
  left:7em;
}
.right
{
 position: absolute;
  left:30em;
}
.right1
{
 position: absolute;
  left:50em;
}
.right2
{
 position: absolute;
  left:60em;
}
.right3
{
 position: absolute;
  left:70em;
}

.right4
{
 position: absolute;
  left:55em;
}

.right5
{
 position: absolute;
  left:65em;
}
.right6
{
 position: absolute;
  left:85em;
}
.right7
{
 position: absolute;
  left:95em;
}
.right8
{
 position: absolute;
  left:85em;
}

.centrado
{
height: 14em;
border-radius: 50%;
  background-color: #999999;

 position: absolute;
 
 display: block;
top:10%;
right: 20%;
z-index: -99;
}
.centrado1
{
height: 20em;
 position: absolute;
 
 display: block;
bottom:0px;
left :0px;
z-index: -99
}


@media only screen and (orientation: portrait) {
.centrado
{
height: 10em;
border-radius: 50%;
  background-color: #999999;

 position: absolute;
 top:18em;
 left:10em;
}
.centrado1
{
height: 14em;
 position: absolute;
 bottom:1em;
 left:-5em;
}

}
.centerParallax {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 50%;
}


.moon {
  background-image: url(bgMoon.png);
}
@keyframes stretch {
  0% {
    transform: scale(.5);
    background-color: white;
    border-radius: 100%;
  }
  50% {
    background-color: white;
  }
  100% {
    transform: scale(1);
    background-color: white;
     border-radius: 100%;
    opacity: 0.3;
  }
}

body,
html {
  height: 100%;
}

body {
  
 
  justify-content: center;
   background-color: black;
}
.parallax2 {
  /* The image used */
  background-image: url("images/parallax.webp");
   background-repeat:no-repeat;
    background-size:contain;
  /* Set a specific height */
  min-height: 350px; 

  /* Create the parallax scrolling effect */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}