@import url('https://fonts.googleapis.com/css2?family=Hind+Madurai:wght@600&family=Raleway+Dots&display=swap');

html{
   font-size: 62.5%;
   color: black;
}

body{
   margin: 0;
}


#container {
   position: fixed;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
   background: linear-gradient(360deg, #66537D, #39325E 16%, #282341, #0E1427 55%, #070908);
}

.outer {
   width:100%;
   display: flex;
   justify-content: center;
 }

#moon {
   margin-top: 20%;
   width: 40em;
   height: 40em;
   background: #0b101f;
   box-shadow: inset 7em -4em 1.5em #ebeaea, -4em .2em 4em #ffffff70, -4em -.2em 4em #ffffff70;
   border-radius: 50%;
   cursor: pointer;
}

.star {
   position:absolute;
   width: .02em;
   height: .02em;
   background: #ffffff60;
   border: solid .1em #ffffff60;
   border-radius: 50%;
   box-shadow: inset -.0em -.0em .8em #ffffff;
}

#text {
   position: absolute;
   text-align: center;
   margin-top: 10%;
   /* bottom: 5%; */
   right: 50%;
   font-family: 'Raleway Dots', cursive;
   font-size: 4em;
   color: #ffffff;
   padding: 0em;
}



.shoot{
   position: relative;
   left:0%;
   top:0em;
   width: .02em;
   height: .02em;
   background-color:#000000;
   position:fixed;
   animation: diagonal-move-anim1 5s linear infinite;
   animation-play-state: running;
 }
 
 .shoot::before{
    position: relative;
    display:block;
    content:"";
    width:15em;
    right:0em;
    top:-10em;
    height:0.1em;
    transform: rotate(45deg);
    background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(255,255,255,0.4) 100%); 
    } 
 
 @keyframes diagonal-move-anim1 {
 
    0% {
       transform: translate(0, 0);
    }
    
    60% {
       transform: translate(0, 0);
    }
 
    100% {
       transform: translate(150em, 150em);
    }
 }
 
 
 
 .shoot2{
    position: relative;
    left:0%;
    top:0em;
    width: .02em;
    height: .02em;
    background-color:#000000;
    position:fixed;
    animation: particleAnimation 3s linear reverse infinite;
    animation-play-state: running;
  }
  
  .shoot2::before{
     position: relative;
     display:block;
     content:"";
     width:25em;
     right:5em;
     top:5em;
     height:0.1em;
     transform: rotate(-45deg);
     background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(255,255,255,0.4) 100%); 
     } 
 
 
  @keyframes particleAnimation
  {
    0% {
       transform: translate(80em, -10em);
    }
 
    80% {
    transform: translate(80em, -10em);
 }
 
 100% {
    transform: translate(0em, 80em);
 }
 }

 
 








@media screen and (min-width: 600px) {

   html{
      font-size: 62.5%;
      color: black;
   }
   
   body{
      margin: 0;
   }
   
   
   #container {
      position: fixed;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: linear-gradient(360deg, #595196, #3f3779 16%, #282341, #0E1427 55%, #070908);
   }
   
   .outer {
      width:100%;
      display: flex;
      justify-content: center;
    }

   #moon {
      margin-top: 20%;
      width: 40em;
      height: 40em;
      background: #0b101f;
      box-shadow: inset 12em -6em 1.5em #ebeaea, -4em .2em 4em #ffffff70, -4em -.2em 4em #ffffff70;
      border-radius: 50%;
      cursor: pointer;
   }
   
   .star {
      position:absolute;
      width: .02em;
      height: .02em;
      background: #ffffff60;
      border: solid .1em #ffffff60;
      border-radius: 50%;
      box-shadow: inset -.0em -.0em .8em #ffffff;
   }

   #text {
      position: absolute;
      text-align: center;
      margin-top: 10%;
      /* bottom: 5%; */
      right: 50%;
      font-family: 'Raleway Dots', cursive;
      font-size: 5em;
      color: #ffffff;
      padding: 0em;
   }

   

   .shoot{
      position: relative;
      left:0%;
      top:0em;
      width: .02em;
      height: .02em;
      background-color:#000000;
      position:fixed;
      animation: diagonal-move-anim1 5s linear infinite;
      animation-play-state: running;
    }
    
    .shoot::before{
       position: relative;
       display:block;
       content:"";
       width:15em;
       right:0em;
       top:-10em;
       height:0.1em;
       transform: rotate(45deg);
       background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(255,255,255,0.4) 100%); 
       } 
    
    @keyframes diagonal-move-anim1 {
    
       0% {
          transform: translate(0, 0);
       }
       
       60% {
          transform: translate(0, 0);
       }
    
       100% {
          transform: translate(150em, 150em);
       }
    }
    
    
    
    .shoot2{
       position: relative;
       left:0%;
       top:0em;
       width: .02em;
       height: .02em;
       background-color:#000000;
       position:fixed;
       animation: particleAnimation 3s linear reverse infinite;
       animation-play-state: running;
     }
     
     .shoot2::before{
        position: relative;
        display:block;
        content:"";
        width:25em;
        right:5em;
        top:5em;
        height:0.1em;
        transform: rotate(-45deg);
        background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(255,255,255,0.4) 100%); 
        } 
    
    
     @keyframes particleAnimation
     {
       0% {
          transform: translate(80em, -10em);
       }
    
       80% {
       transform: translate(80em, -10em);
    }
    
    100% {
       transform: translate(0em, 80em);
    }
    }
   }
    
    









@media screen and (min-width: 850px) {

   html{
      font-size: 62.5%;
      color: black;
   }
   
   body{
      margin: 0;
   }
   
   
   #container {
      position: fixed;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: linear-gradient(360deg, #506098, #283876 16%, #162347, #0E1427 55%, #070908);
   }
   
   .outer {
      width:100%;
      display: flex;
      justify-content: center;
    }

   #moon {
      margin-top: 15%;
      width: 40em;
      height: 40em;
      background: #0b101f;
      box-shadow: inset 18em -8em 1.5em #ebeaea, -4em .2em 4em #ffffff70, -4em -.2em 4em #ffffff70;
      border-radius: 50%;
      cursor: pointer;
   }
   
   .star {
      position:absolute;
      width: .02em;
      height: .02em;
      background: #ffffff60;
      border: solid .1em #ffffff60;
      border-radius: 50%;
      box-shadow: inset -.0em -.0em .8em #ffffff;
   }

   #text {
      position: absolute;
      text-align: center;
      margin-top: 0%;
      bottom: 5%;
      right: 50%;
      font-family: 'Raleway Dots', cursive;
      font-size: 7em;
      color: #ffffff;
      padding: 0em;
   }

   

   .shoot{
      position: relative;
      left:0%;
      top:0em;
      width: .02em;
      height: .02em;
      background-color:#000000;
      position:fixed;
      animation: diagonal-move-anim1 5s linear infinite;
      animation-play-state: running;
    }
    
    .shoot::before{
       position: relative;
       display:block;
       content:"";
       width:15em;
       right:0em;
       top:-10em;
       height:0.1em;
       transform: rotate(45deg);
       background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(255,255,255,0.4) 100%); 
       } 
    
    @keyframes diagonal-move-anim1 {
    
       0% {
          transform: translate(0, 0);
       }
       
       60% {
          transform: translate(0, 0);
       }
    
       100% {
          transform: translate(150em, 150em);
       }
    }
    
    
    
    .shoot2{
       position: relative;
       left:0%;
       top:0em;
       width: .02em;
       height: .02em;
       background-color:#000000;
       position:fixed;
       animation: particleAnimation 4s linear reverse infinite;
       animation-play-state: running;
     }
     
     .shoot2::before{
        position: relative;
        display:block;
        content:"";
        width:25em;
        right:5em;
        top:5em;
        height:0.1em;
        transform: rotate(-40deg);
        background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(255,255,255,0.4) 100%); 
        } 
    
    
     @keyframes particleAnimation
     {
       0% {
          transform: translate(120em, -10em);
       }
    
       90% {
       transform: translate(120em, -10em);
    }
    
    100% {
       transform: translate(0em, 100em);
    }
    }
    }
    
    









@media screen and (min-width: 1100px) {

   html{
      font-size: 62.5%;
      color: black;
   }
   
   body{
      margin: 0;
   }
   
   
   #container {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      background: linear-gradient(360deg, #3b4d92, #263675 16%, #162347, #0E1427 55%, #070908);
   }
   
   .outer {
      width:100%;
      display: flex;
      justify-content: center;
    }

   #moon {
      margin-top: 10%;
      width: 40em;
      height: 40em;
      background: radial-gradient(#f1f1f1 30%, #ebeaea 90%, #e7e7e7);
      border-radius: 50%;
      box-shadow: -4em 1em 10em #ffffff70, -4em -1em 10em #ffffff70, 4em 1em 10em #ffffff70, 4em -1em 10em #ffffff70;
      cursor: pointer;
   }
   
   .star {
      position:absolute;
      width: .02em;
      height: .02em;
      background: #ffffff60;
      border: solid .1em #ffffff60;
      border-radius: 50%;
      box-shadow: inset -.0em -.0em .8em #ffffff;
   }


    #text {
      position: absolute;
      text-align: center;
      margin-top: 20%;
      /* bottom: 5%; */
      right: 50%;
      font-family: 'Raleway Dots', cursive;
      font-size: 9em;
      color: #ffffff;
      padding: 0em;
   }

   

.shoot{
  position: relative;
  left:0%;
  top:0em;
  width: .02em;
  height: .02em;
  background-color:#000000;
  position:fixed;
  animation: diagonal-move-anim1 5s linear infinite;
  animation-play-state: running;
}

.shoot::before{
   position: relative;
   display:block;
   content:"";
   width:15em;
   right:0em;
   top:-10em;
   height:0.1em;
   transform: rotate(45deg);
   background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(255,255,255,0.4) 100%); 
   } 

@keyframes diagonal-move-anim1 {

	0% {
		transform: translate(0, 0);
	}
   
   60% {
		transform: translate(0, 0);
	}

	100% {
		transform: translate(150em, 150em);
	}
}



.shoot2{
   position: relative;
   left:0%;
   top:0em;
   width: .02em;
   height: .02em;
   background-color:#000000;
   position:fixed;
   animation: particleAnimation 4s linear reverse infinite;
   animation-play-state: running;
 }
 
 .shoot2::before{
    position: relative;
    display:block;
    content:"";
    width:25em;
    right:5em;
    top:5em;
    height:0.1em;
    transform: rotate(-40deg);
    background: linear-gradient(to right, rgba(0,0,0,0) 0%,rgba(255,255,255,0.4) 100%); 
    } 


 @keyframes particleAnimation
 {
   0% {
      transform: translate(120em, -10em);
   }

   90% {
   transform: translate(120em, -10em);
}

100% {
   transform: translate(0em, 100em);
}
}
}