#sunsetImg
	{
		size: 30%;

}

body {
	background-color: #000000;
	text-align: center;
  overflow: hidden;
}

.main {
  width:100%;
  height:100%;
}


#moons {
  margin: 0 auto;
  height: 100%;
  width: 100%;
  position: absolute;
  z-index: 100;
}

#january {
 background-image: url("../images/Full-moon.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 70% 100%;
  opacity: 0;
}

#february {
 background-image: url("../images/Full-moon.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 70% 100%;
  opacity: 0;
}

#march {
 background-image: url("../images/Full-moon.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 70% 100%;
  opacity: 0;
}

#april {
 background-image: url("../images/Full-moon.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 70% 100%;
  opacity: 0;
}

#may {
 background-image: url("../images/Full-moon.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 70% 100%;
  opacity: 0;
}


#june {
 background-image: url("../images/Full-moon.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 70% 100%;
  opacity: 0;
}

#july {
 background-image: url("../images/Full-moon.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 70% 100%;
  opacity: 0;
}

#august {
 background-image: url("../images/Full-moon.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 70% 100%;
  opacity: 0;
}

#september {
 background-image: url("../images/Full-moon.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 70% 100%;
  opacity: 0;
}

#october {
 background-image: url("../images/Full-moon.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 70% 100%;
  opacity: 0;
}

#november {
 background-image: url("../images/Full-moon.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 70% 100%;
  opacity: 0;

}

#december {
  background-image: url("../images/Full-moon.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;
  opacity: 0;

}

.circle {
/*  position: relative;
  width: 60px;
  height: 60px;
  background: #fadb43;   
  border-radius: 50%;
  transform: translate(300px, 150px);*/ /* start offscreen */
/*  animation: moon 30s linear infinite alternate;
  transition: transform 1s linear;*/
  position: relative;
  width: calc(100%/12); 
  height: calc(100%/8); 
  float: left; 
  border: 1px solid transparent;
/*  background-image: url("../images/e.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 100% 100%;*/
}



img {
	width: 547.2px;
	height: 307.2px;
	box-shadow: 0px 0px 40px 40px #000000;
  top-margin: 200px;
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}


#wrapper { width: 100%; height: 100%; opacity: 1;}

#circles {width: 100%; height: 100%; z-index: 0;}

@keyframes blink {
    from { opacity:1; }
    to { opacity:0; }
};

#blotch-sunday {
    position: absolute;
  top: calc(50% - 150px);
  left: calc(50% - 150px);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  box-shadow:
    inset 0 0 50px #fff,
    inset 20px 0 80px #f0f,
    inset -20px 0 80px #0ff,
    inset 20px 0 300px #f0f,
    inset -20px 0 300px #0ff,
    0 0 50px #fff,
    -10px 0 80px #f0f,
    10px 0 80px #0ff;
    animation: blink 10s linear infinite;
}

#blotch-monday {
    position: absolute;
  top: calc(50% - 150px);
  left: calc(50% - 150px);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  box-shadow:
    inset 0 0 50px #fff,
    inset 20px 0 80px #f0f,
    inset -20px 0 80px #0ff,
    inset 20px 0 300px #f0f,
    inset -20px 0 300px #0ff,
    0 0 50px #fff,
    -10px 0 80px #f0f,
    10px 0 80px #0ff;
    animation: blink 10s linear infinite;
}

#blotch-tuesday {
     position: absolute;
  top: calc(50% - 150px);
  left: calc(50% - 150px);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  box-shadow:
    inset 0 0 50px #fff,
    inset 20px 0 80px #f0f,
    inset -20px 0 80px #0ff,
    inset 20px 0 300px #f0f,
    inset -20px 0 300px #0ff,
    0 0 50px #fff,
    -10px 0 80px #f0f,
    10px 0 80px #0ff;
    animation: blink 20s linear infinite;

}

#blotch-wednesday {
    position: absolute;
  top: calc(50% - 150px);
  left: calc(50% - 150px);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  box-shadow:
    inset 0 0 50px #fff,
    inset 20px 0 80px #f0f,
    inset -20px 0 80px #0ff,
    inset 20px 0 300px #f0f,
    inset -20px 0 300px #0ff,
    0 0 50px #fff,
    -10px 0 80px #f0f,
    10px 0 80px #0ff;
    animation: blink 55s linear infinite;
}

#blotch-thursday {
   position: absolute;
  top: calc(50% - 150px);
  left: calc(50% - 150px);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  box-shadow:
    inset 0 0 50px #fff,
    inset 20px 0 80px #f0f,
    inset -20px 0 80px #0ff,
    inset 20px 0 300px #f0f,
    inset -20px 0 300px #0ff,
    0 0 50px #fff,
    -10px 0 80px #f0f,
    10px 0 80px #0ff;
    animation: blink 5s linear infinite;
}

#blotch-friday {
     position: absolute;
  top: calc(50% - 150px);
  left: calc(50% - 150px);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  box-shadow:
    inset 0 0 50px #fff,
    inset 20px 0 80px #f0f,
    inset -20px 0 80px #0ff,
    inset 20px 0 300px #f0f,
    inset -20px 0 300px #0ff,
    0 0 50px #fff,
    -10px 0 80px #f0f,
    10px 0 80px #0ff;
    animation: blink 3s linear infinite;
}

#blotch-saturday {
    position: absolute;
  top: calc(50% - 150px);
  left: calc(50% - 150px);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  box-shadow:
    inset 0 0 50px #fff,
    inset 20px 0 80px #f0f,
    inset -20px 0 80px #0ff,
    inset 20px 0 300px #f0f,
    inset -20px 0 300px #0ff,
    0 0 50px #fff,
    -10px 0 80px #f0f,
    10px 0 80px #0ff;
    animation: blink 3s linear infinite;
}

#pls {
    position: absolute;
    top:20px;
    right:80%; /* Positions 50% from right (right edge will be at center) */
    margin-right:30px;
    z-index: 30000;
}
@keyframes transform {
   
  0% { transform: translate(300px,150px); }
  20% { transform: translate(400px,120px); }
  40% { transform: translate(500px,90px); }
  50% { transform: translate(600px, 60px); }
  60% { transform: translate(700px,90px); }
  80% { transform: translate(800px,120px); }
  100% { transform: translate(920px,150px); }
}
#birthday {
   position: absolute;
  top: calc(50% - 150px);
  left: calc(50% - 150px);
  width: 300px;
  height: 300px;
  border-radius: 50%;
  box-shadow:
    inset 0 0 50px #fff,
    inset 20px 0 80px #f0f,
    inset -20px 0 80px #0ff,
    inset 20px 0 300px #f0f,
    inset -20px 0 300px #0ff,
    0 0 50px #fff,
    -10px 0 80px #f0f,
    10px 0 80px #0ff;
    animation: transform 3s linear infinite;

}