QE TEAM E P’Pim

✨ PHIRAPHAT KITPROMPHON

<!DOCTYPE html>
<div class="starsmall"></div>
<div class="starsmall"></div>
<div class="starsmall"></div>
<div class="starsmall"></div>
<div class="starsmall"></div>
<div class="starsmall"></div>
<div class="starsmall"></div>
<div class="starsmall"></div>
<div class="starsmall"></div>
<div class="starsmall"></div>
<div class="starsmall"></div>
<div class="starbig", style = "position:absolute; top:5%; left:30%;"></div>
<div class="starbig", style = "position:absolute; top:20%; left:5%;"></div>
<div class="starbig", style = "position:absolute; top:35%; left:88%;"></div>
<div class="starbig", style = "position:absolute; top:58%; left:58%;"></div>

<div class="night">
      <div class="stardrop"></div>
      <div class="stardrop"></div>
      <div class="stardrop"></div>
      <div class="stardrop"></div>
      <div class="stardrop"></div>
      <div class="stardrop"></div>
      <div class="stardrop"></div>
      <div class="stardrop"></div>
</div>
<div class="ufo"></div>
<div class="yoda"></div>
<div class="laststar"></div>
<style>
              body{
        background-image:url("https://cdn.discordapp.com/attachments/798209417455206421/809058873603260416/pngtree-hand-drawn-cute-sky-moon-white-clouds-planet-background-paintedcartoonlovelysky-backgroundpl.png");
        margin:0;
        overflow: hidden;
        background-size: auto;
        background-size: 100%;
        width:100%;
        height:100%;
      }
      @keyframes fade{
        from{opacity:.2}
        to{opacity:1}
      }

.starbig{
        position:absolute;
        width:5px;
        height:5px;
        background:white;
        opacity:1;
        box-shadow:0px 0px 50px 30px hsla(325, 100%, 82%, 1);
        border-radius: 50%;
        animation:fade 1s infinite alternate;
      }

.starsmall{
        position:absolute;
        width:2px;
        height:2px;
        background:white;
        opacity:1;
        box-shadow:0px 0px 50px 15px hsla(325, 100%, 82%, 1);
        border-radius: 50%;
      }
      .starsmall:nth-child(1){
        top:35%;
        left:15%;
        animation:fade 1s infinite alternate;
      }
       .starsmall:nth-child(2){
        top:49%;
        left:20%;
        animation:fade 0.8s infinite alternate;
      }
        .starsmall:nth-child(3){
        top:5%;
        left:50%;
        animation:fade 1.2s infinite alternate;
      }
        .starsmall:nth-child(4){
        top:30%;
        left:60%;
          animation:fade 2s infinite alternate;
      }
        .starsmall:nth-child(5){
        top:3%;
        left:85%;
        animation:fade 1.5s infinite alternate;
      }
        .starsmall:nth-child(6){
        top:11%;
        left:93%;
        animation:fade 0.8s infinite alternate;
      }
        .starsmall:nth-child(7){
        top:52%;
        left:35%;
        animation:fade 0.9s infinite alternate;
      }
        .starsmall:nth-child(8){
        top:60%;
        left:75%;
        animation:fade 1s infinite alternate;
      }
        .starsmall:nth-child(9){
        top:40%;
        left:50%;
        animation:fade 1.8s infinite alternate;
      }
        .starsmall:nth-child(10){
        top:25%;
        left:42%;
        animation:fade 0.6s infinite alternate;
      }
        .starsmall:nth-child(11){
        top:32%;
        left:28%;
        animation:fade 1.2s infinite alternate;
      }

.night{
  width: 100%;
  height: 100%;
  transform: rotateZ(40deg);
}

.stardrop{
  position: absolute;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(-45deg, #5f91ff, rgba(0, 0, 255, 0));
  border-radius: 999px;
  filter: drop-shadow(0 0 6px #699bff);
  animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite
}

@keyframes tail{
  0%{
    width: 0;
  }
  30%{
    width: 100px;
  }
  100%{
    width: 0;
  }
}

@keyframes shooting{
  0%{
    transform: translateX(0);
  }
  100%{
    transform: translateX(400px);
  }
}

.stardrop::before, .stardrop::after{
  content: '';
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  height: 2px;
  background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #5f91ff, rgba(0, 0, 255, 0));
  border-radius: 100%;
  transform: translateX(50%) rotateZ(45deg);
  animation: shining 3000ms ease-in-out infinite
}

@keyframes shining{
  0%{
    width: 0;
  }
  50%{
    width: 30px;
  }
  100%{
    width: 0;
  }
}

.stardrop::after{
  transform: translateX(50%) rotateZ(-45deg);
}

.stardrop:nth-child(1){
  top: calc(50% - 200px);
  left: calc(50% - 300px);
  animation-delay: 650ms
}

.stardrop:nth-child(1)::before, .stardrop:nth-child(1)::after{
  animation-delay: 650ms
}

.stardrop:nth-child(2){
  top: calc(30% - 50px);
  right: calc(5% - 190px);
  animation-delay: 150ms
}

.stardrop:nth-child(2)::before, .stardrop:nth-child(2)::after{
  animation-delay: 150ms
}

.stardrop:nth-child(3){
  top: calc(50% - -90px);
  left: calc(50% - 500px);
  animation-delay: 1600ms
}

.stardrop:nth-child(3)::before, .stardrop:nth-child(3)::after{
  animation-delay: 1600ms
}

.stardrop:nth-child(4){
  top: calc(50% - -200px);
  left: calc(50% - 230px);
  animation-delay: 4700ms
}

.stardrop:nth-child(4)::before, .stardrop:nth-child(4)::after{
  animation-delay: 4700ms
}

.stardrop:nth-child(5){
  top: calc(50% - 400px);
  left: calc(50% - 50px);
  animation-delay: 2100ms
}

.stardrop:nth-child(5)::before, .stardrop:nth-child(5)::after{
  animation-delay: 2100ms
}
.stardrop:nth-child(6){
  top: calc(50% - -500px);
  left: calc(50% - 450px);
  animation-delay: 3500ms
}

.stardrop:nth-child(6)::before, .stardrop:nth-child(6)::after{
  animation-delay: 3500ms
}
.stardrop:nth-child(7){
  top: calc(50% - -200px);
  left: calc(50% - -300px);
  animation-delay: 3000ms
}

.stardrop:nth-child(7)::before, .stardrop:nth-child(7)::after{
  animation-delay: 3000ms
}
.ufo {
	position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
  transform: rotatez(45deg)scale(0.5);
    background: url('https://cdn.discordapp.com/attachments/798209417455206421/809050270734090300/pngegg.png') no-repeat;
    animation: floating 4s linear infinite;
    /*animation: floating 6s  infinite;*/
}

@keyframes floating {
	from {
            left: -50%;
            bottom: -50%;
            width: 100%;
            height: 100%;
        }
  to{
    left:150%;
    bottom:150%;
    width:100%;
    height:100%;
  }
}
.yoda{
  position: absolute;
    top: 50%;
    right: -65%;
    width: 100%;
    height: 100%;
    background: url('https://cdn.discordapp.com/attachments/798209417455206421/809061332510965818/477ceb1b-5763-4718-80df-540aa4f1f202.png') no-repeat;
   transform: scale(0.4);
  animation:spin 2s infinite alternate;
}
@keyframes spin{
  0%{transform: scale(0.5),translate:30px}
  50%{transform: scale(0.6)}
}
.laststar{
    position: absolute;
    top: 46%;
    right: 50%;
    width: 100%;
    height: 100%;
    transform: scale(0.5);
    background: url('https://cdn.discordapp.com/attachments/798209417455206421/809083652779933715/klipartz.com.png') no-repeat;
 z-index: -1;
  }
</style>
<script>

</script>