Party C-ARIN (Copy 12593)

✨ PORNPILIN WONGSRITRANG

<html>
  <head>
    <title>Let's Start
    </title>
    <style>
      @keyframes dao{
        0%{
				opacity: 0;
        }
        100%{
				opacity: 0.9;
        }
      }
      @keyframes loy{
        0%{
            transform:translateX(-300px) rotatez(0deg);
        }
        100%{
            transform:translateX(200px) rotatez(20deg);
          	
        }
      }
      body {
        margin: 0;
      }
      .pasad img{
        background-size: cover;
        background-position: center;
        margin: 0;
        width: 100%;
        height: 100%;
      }
      .day{
			width:100%;
         height: 100%;
         background: #ffff;
         overflow: hidden;
      }
      .arin {
			bottom: 520px;
        left: 100px;
        position: absolute;
        animation: 5s loy infinite alternate linear;
      }

.day[data-day = "1"].kangwon{
			background-image: linear-gradient(0deg, rgba(213, 222, 145, 1) 17%, rgba(203, 106, 26, 1) 65%, rgba(165, 28, 3, 1) 100%);
        margin: 0;
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 100%;
        
      }
      .day[data-day = "-1"].night{
			background-image: linear-gradient(0deg, 
rgba(201, 221, 255, 1) 5%, 
rgba(76, 118, 238, 1) 39%, 
rgba(31, 94, 198, 1) 65%, 
rgba(5, 33, 103, 1) 100%);
        margin: 0;
        background-size: cover;
        background-position: center;
        width: 100%;
        height: 100%;
        animation: salab 1s infinite linear;
      }
      .star1 {
			bottom: 580px;
         left: 15px;
         position:absolute;
         animation: dao 1s infinite alternate linear; 
      }
      .star2 {
			bottom: 500px;
         left: 200px;
         position:absolute;
         animation: dao 6s infinite alternate linear;
      }
      .star3 {
			bottom: 450px;
         left: 350px;
         position:absolute;
         animation: dao 2s infinite alternate linear;
      }
      .star4 {
			bottom: 350px;
         left: 150px;
         position:absolute;
         animation: dao 4s infinite alternate linear;
      }
      .star5 {
			bottom: 600px;
         left: 500px;
         position:absolute;
         animation: dao 7s infinite alternate linear;
      }
      .star6 {
			top: 10px;
         left: 300px;
         position:absolute;
         animation: dao 2s infinite alternate linear;
      }
      .star7 {
			top: 30px;
         left: 100px;
         position:absolute;
         animation: dao 3s infinite alternate linear;
      }
      .star8 {
			top: 50px;
         left: 800px;
         position:absolute;
         animation: dao 5s infinite alternate linear;
      }
      .star9 {
			top: 150px;
         left: 700px;
         position:absolute;
         animation: dao 1s infinite alternate linear;
      }
      .star10 {
			bottom: 440px;
         left: 600px;
         position:absolute;
         animation: dao 6s infinite alternate linear;
      }
      .star11 {
			top: 170px;
         right: 600px;
         position:absolute;
         animation: dao 9s infinite alternate linear;
      }
      .star12 {
			top: 10px;
         right: 400px;
         position:absolute;
         animation: dao 5s infinite alternate linear;
      }
      .star13 {
			top: 80px;
         right: 300px;
         position:absolute;
         animation: dao 7s infinite alternate linear;
      }
      .star14 {
			top: 150px;
         right: 150px;
         position:absolute;
         animation: dao 4s infinite alternate linear;
      }
      .star15 {
			top: 20px;
         right: 100px;
         position:absolute;
         animation: dao 8s infinite alternate linear;
      }
      }
/*       @keyframes salab{
      .day[data-day="1"] .kangwon{
        transform:rotatex(0deg);
      }
      .day[data-day="-1"] .night{
        transform:rotatex(-180deg);
      }
      } */
      #toggle{
        position:fixed;
        bottom:1em;
        right:1em;
        background:#fff;
        padding:.5em;
        border-radius:4px;
        cursor:pointer;
    </style>
  </head>
  <body>
    <div class = "day" data-day = "-1">
    <div class="pasad">
        <img src="https://media.discordapp.net/attachments/932854415201820752/941337013058158672/01bg.png?width=1178&height=662" alt="pasad">
    </div>
    <div class="arin">
        <img src="https://media.discordapp.net/attachments/932854415201820752/941337110131146802/03.png?width=444&height=662" width="120" height= "150" alt="arin">
    </div>
    <div class="night">    
      <div class="star">
        <img src="https://media.discordapp.net/attachments/880658641349378088/941365999092002878/unknown.png?width=728&height=663" width="30" height="30" alt="star" id = "star1">
     </div>
      <div class="star">
        <img src="https://media.discordapp.net/attachments/880658641349378088/941365999092002878/unknown.png?width=728&height=663" width="30" height="30" alt="star" id = "star2">
     </div>
      <div class="star">
        <img src="https://media.discordapp.net/attachments/880658641349378088/941365999092002878/unknown.png?width=728&height=663" width="30" height="30" alt="star" id = "star3">
     </div>
      <div class="star">
        <img src="https://media.discordapp.net/attachments/880658641349378088/941365999092002878/unknown.png?width=728&height=663" width="30" height="30" alt="star" id = "star4">
     </div>
      <div class="star">
        <img src="https://media.discordapp.net/attachments/880658641349378088/941365999092002878/unknown.png?width=728&height=663" width="30" height="30" alt="star" id = "star5">
     </div>
      <div class="star">
        <img src="https://media.discordapp.net/attachments/880658641349378088/941365999092002878/unknown.png?width=728&height=663" width="30" height="30" alt="star" id = "star6">
     </div>
      <div class="star">
        <img src="https://media.discordapp.net/attachments/880658641349378088/941365999092002878/unknown.png?width=728&height=663" width="30" height="30" alt="star" id = "star7">
     </div>
      <div class="star">
        <img src="https://media.discordapp.net/attachments/880658641349378088/941365999092002878/unknown.png?width=728&height=663" width="30" height="30" alt="star" id = "star8">
     </div>
      <div class="star">
        <img src="https://media.discordapp.net/attachments/880658641349378088/941365999092002878/unknown.png?width=728&height=663" width="30" height="30" alt="star" id = "star9">
     </div>
      <div class="star">
        <img src="https://media.discordapp.net/attachments/880658641349378088/941365999092002878/unknown.png?width=728&height=663" width="30" height="30" alt="star" id = "star10">
     </div>
      <div class="star">
        <img src="https://media.discordapp.net/attachments/880658641349378088/941365999092002878/unknown.png?width=728&height=663" width="30" height="30" alt="star" id = "star11">
     </div>
      <div class="star">
        <img src="https://media.discordapp.net/attachments/880658641349378088/941365999092002878/unknown.png?width=728&height=663" width="30" height="30" alt="star" id = "star12">
     </div>
      <div class="star">
        <img src="https://media.discordapp.net/attachments/880658641349378088/941365999092002878/unknown.png?width=728&height=663" width="30" height="30" alt="star" id = "star13">
     </div>
      <div class="star">
        <img src="https://media.discordapp.net/attachments/880658641349378088/941365999092002878/unknown.png?width=728&height=663" width="30" height="30" alt="star" id = "star14">
     </div>
      <div class="star">
        <img src="https://media.discordapp.net/attachments/880658641349378088/941365999092002878/unknown.png?width=728&height=663" width="30" height="30" alt="star" id = "star15">
     </div>
    </div>
  <div class = "kangwon"></div>
  </div>
  <div id="toggle" onclick="my_picture.dataset.day *= -1">
      Toggle
    </div>
  </body>
</html>