QE Group-E P’FAII

✨ PANAS CHAROENRUK

<html>
<head>
	<title>Let's Start</title>
  <style>
    body{
      background:black;
         overflow: hidden;
    }
    .galaxy1 {
		  background-image: url('https://media.discordapp.net/attachments/809004841971220520/809005212110815252/kisspng-galaxy-color-desktop-wallpaper-galaxy-5abb58a4084726.8878141815222273640339.png?width=601&height=601');
        height: 600px;
        width: 600px;
        background-size: 600px;
        top: -300px;
        left: -500px;
        background-repeat: no-repeat;
        position: absolute;
        animation: move 12s linear infinite alternate;
      }
    .galaxy2 {
		  background-image: url('https://media.discordapp.net/attachments/809004841971220520/809019261397762048/kisspng-close-up-computer-samsung-galaxy-wallpaper-rotate-the-galaxy-5a96b24114a537.7721418715198254.png?width=963&height=602');
        height: 600px;
        width: 600px;
        background-size: 600px;
        top: 400px;
        left: 500px;
        background-repeat: no-repeat;
        position: absolute;
        animation: move2 12s linear infinite alternate;
        transform: rotate(20deg);
        transform-style: preserve-3d;
      }
    .galaxy3 {
		  background-image: url('https://media.discordapp.net/attachments/809004841971220520/809031081926852658/Pngtreenebula_starry_sky_star_space_3924801.png?width=601&height=601');
        height: 300px;
        width: 300px;
        background-size: 300px;
        top: -300px;
        left: 700px;
        opacity: 0%;
        background-repeat: no-repeat;
        position: absolute;
        animation: move3 12s linear infinite alternate;
        transform: rotate(20deg);
        transform-style: preserve-3d;
        animation-delay: 2s;
      }
    .galaxy4 {
		  background-image: url('https://media.discordapp.net/attachments/809004841971220520/809078313044672623/PngItem_784359_1.png');
        height: 400px;
        width: 400px;
        background-size: 400px;
        top: 500px;
        left: -250px;
        opacity: 100%;
        background-repeat: no-repeat;
        position: absolute;
        animation: move4 12s linear infinite alternate;
        transform-style: preserve-3d;
        animation-delay: 2s;
      }
    .fly {
        position: relative;
        top: 10%;
        left: 50%;
        background-image: url('https://media.discordapp.net/attachments/809004841971220520/809057825719320636/Spaceship-PNG-Clipart.png?width=966&height=372');
        transform: translate(-50%,-50%);
        height:110px;
        width: 300px;
        background-size: cover;
        animation:kayab 12s linear infinite alternate;
        z-index: 1;
      }
      @keyframes kayab {
        0%   {top:10px;right 0%; transform: scale(1) rotatey(40deg);}
        50%  {top:100px;right 25%; transform: scale(1.5); rotatex(160deg);}
        100% {top:200px;right 50%; transform: scale(2); rotatey(0deg);}
      }
    @keyframes move {
        0% {
         top: -300px; left: -500px;
        }
        50%{
      	top: -150px; left: -250px; transform: scale(0.5);
        }
      100%{
			top: 0px; left: 0px; transform: scale(0); opacity: 0;
      }
    }
    @keyframes move2 {
        0% {
         top: 400px; left: 500px;
        }
        50%{
      	top: 200px; left: 250px; transform: scale(0.5) rotatez(30deg);
        }
      100%{
			top: 0px; left: 0px; transform: scale(0) rotatez(60deg); opacity: 0;
      }
    }
    @keyframes move3 {
        0% {
         top: -300px; left: 700px; rotatez(0deg); opacity: 100%;
        }
        50%{
      	top: -150px; left: 350px; transform: scale(0.5); opacity: 50%;
        }
      100%{
			top: 0px; left: 0px; transform: scale(0); opacity: 0%;
      }
    }
    @keyframes move4 {
        0% {
         top: 500px; left: -250px; rotatez(0deg); opacity: 100%;
        }
        50%{
      	top: 250px; left: -125px; transform: scale(0.5); opacity: 50%;
        }
      100%{
			top: 0px; left: 0px; transform: scale(0); opacity: 0%;
      }
    }
    @keyframes kayarb{
		0%{
        }
        100%{
          left: -500px;
 
        }

}
    @keyframes kraprib{
        from{
          opacity:0;

}
        to{
          opacity:1;
        }
      }
    .star{
        position:relative;
        width:0.2em;
        height:0.2em;
        background:#E2E2E2;
        opacity:1;
        box-shadow:0px 0px 40px 9px #E2E2E2;
        border-radius:100%;
        z-index: -1;
      }
        .star{
        position:absolute;
        width:0.2em;
        height:0.2em;
        background:#E2E2E2;
        opacity:1;
        box-shadow:0px 0px 90px px #E2E2E2;
        border-radius:100%;
      }
        .star:nth-child(1){
        top:30%;
        left:10%;
        animation:kraprib 1.4s infinite alternate, kayarb 12s infinite alternate;
      animation-delay: 0.1s;
          
      }
        .star:nth-child(2){
        top:55%;
        left:0%;
        animation:kraprib 1.4s infinite alternate, kayarb 12s infinite alternate;
      animation-delay: 0.2s;
          
      }
      .star:nth-child(3){
        top:6%;
        left:8%;
        animation:kraprib 1.4s infinite alternate, kayarb 12s infinite alternate;
      animation-delay: 0.3s;
        
      }
      .star:nth-child(4){
        top:85%;
        left:70%;
        animation:kraprib 1.4s infinite alternate, kayarb 12s infinite alternate;
      animation-delay: 0.4s;
        
      }
      .star:nth-child(5){
        top:15%;
        left:90%;
        animation:kraprib 1.4s infinite alternate, kayarb 12s infinite alternate;
        animation-delay: 0.12s;
      }
      .star:nth-child(6){
        top:20%;
        left:17%;
        animation:kraprib 1.4s infinite alternate, kayarb 12s infinite alternate;
        animation-delay: 0.6s;
      }
      .star:nth-child(7){
        top:70%;
        left:18%;
        animation:kraprib 1.4s infinite alternate, kayarb 12s infinite alternate;
        animation-delay: 0.7s;
      }
      .star:nth-child(8){
        top:20%;
        left:50%;
        animation:kraprib 1.4s infinite alternate, kayarb 12s infinite alternate;
        animation-delay: 0.8s;
      }
      .star:nth-child(9){
        top:65%;
        left:160%;
        animation:kraprib 1.4s infinite alternate, kayarb 12s infinite alternate;
        animation-delay: 0.9s;
      }
      .star:nth-child(10){
        top:45%;
        left:130%;
        animation:kraprib 1.4s infinite alternate, kayarb 12s infinite alternate;
        animation-delay: 1s;
      }
      .star:nth-child(11){
        top:10%;
        left:110%;
        animation:kraprib 1.4s infinite alternate, kayarb 12s infinite alternate;
        animation-delay: 1.1s;
      }
      .star:nth-child(12){
        top:90%;
        left:190%;
        animation:kraprib 1.4s infinite alternate, kayarb 12s infinite alternate;
        animation-delay: 1.2s;
      }
      .star:nth-child(13){
        top:90%;
        left:110%;
        animation:kraprib 1.4s infinite alternate, kayarb 12s infinite alternate;
        animation-delay: 1.3s;
      }
      .star:nth-child(14){
        top:10%;
        left:30%;
        animation:kraprib 1.4s infinite alternate, kayarb 12s infinite alternate;
        animation-delay: 1.4s;
      }
      .star:nth-child(15){
        top:50%;
        left:40%;
        animation:kraprib 1.4s infinite alternate, kayarb 12s infinite alternate;
        animation-delay: 1.12s;
      }
      .star:nth-child(16){
        top:60%;
        left:80%;
        animation:kraprib 1.4s infinite alternate, kayarb 12s infinite alternate;
        animation-delay: 1.6s;
      }
      .star:nth-child(17){
        top:80%;
        left:75%;
        animation:kraprib 1.4s infinite alternate, kayarb 12s infinite alternate;
        animation-delay: 1.7s;
      }
      .star:nth-child(18){
        top:90%;
        left:45%;
        animation:kraprib 1.4s infinite alternate, kayarb 12s infinite alternate;
        animation-delay: 1.8s;
      }
      .star:nth-child(19){
        top:15%;
        left:75%;
        animation:kraprib 1.4s infinite alternate, kayarb 12s infinite alternate;
        animation-delay: 1.9s;
      }
      .star:nth-child(20){
        top:5%;
        left:39%;
        animation:kraprib 1.4s infinite alternate, kayarb 12s infinite alternate;
		  animation-delay: 2.0s;
      }
      .star:nth-child(21){
        top:10%;
        left:60%;
        animation:kraprib 1.4s infinite alternate, kayarb 12s infinite alternate;
		  animation-delay: 2.1s;
      }
      .star:nth-child(22){
        top:75%;
        left:55%;
        animation:kraprib 1.4s infinite alternate, kayarb 12s infinite alternate;
		  animation-delay: 2.2s;
      }
      .star:nth-child(23){
        top:49%;
        left:15%;
        animation:kraprib 1.4s infinite alternate, kayarb 12s infinite alternate;
		  animation-delay: 2.3s;
      }
      
    
  </style>
</head>
<body>
  
  <div class="fly"></div>
  <div class="galaxy1"></div>
  <div class="galaxy2"></div>
  <div class="galaxy3"></div>
  <div class="galaxy4"></div>
  
  <div class="star">
      
  </div>
  <div class="star">
      
    </div>
    <div class="star">
      
    </div>
    <div class="star">
      
    </div>
    <div class="star">
      
    </div>
    <div class="star">
      
    </div>
    <div class="star">
      
    </div>
    <div class="star">
      
    </div>
    <div class="star">
      
    </div>
    <div class="star">
      
    </div>
    <div class="star">
      
    </div>
    <div class="star">
      
    </div>
    <div class="star">
      
    </div>
    <div class="star">
      
    </div>
    <div class="star">
      
    </div>
    <div class="star">
      
    </div>
    <div class="star">
      
    </div>
    <div class="star">
      
    </div>
    <div class="star">
      
    </div>
    <div class="star">
      
    </div>
    <div class="star">
      
    </div>
    <div class="star">
      
    </div>

</body>
</html>