C-faiifu Homework Position

✨ PAKIN KAOPHUTHAI

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>replit</title>
  <style>
    body {
      margin: 0;
      overflow-x: hidden;
      font-family:sans-serif;
      background: hsl(210, 100%, 80%);
    }
    .outer-container{
      display: flex;
      height: 100%;
      width: 100%;
      align-items: center;
      justify-content: center;
    }
    #button {
      position: absolute;
      top: 10px;
      left: 10px;
      z-index: 30000;
    }
    #song{
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 30000;
    }
    .btn1,.btn2 {
      height: 35px;
      border-radius: 16px;
      border: 3px solid black;
      background-color: hsl(200, 84%, 43%);
      font-family: Cursive;
      font-size: 17px;
      color: #fff;
      cursor: pointer;
      outline: none;
      margin: 5px;
    }
    .canvas {
      /* background:hsl(220,60%,60%); */
      background-image:url("https://media.discordapp.net/attachments/932854310004473857/941734040380260442/Untitled_Artwork.png?width=1249&height=702");
      width: 1440px;
      height: 810px;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      /* border: solid 1px; */
      position: relative;
      margin: auto auto;
      overflow: hidden;
      background-size: cover;
      box-shadow: 0px 0px 80px hsl(200, 100%, 50%);
      border-radius: 2em;
    }
    #darkmode {
      position: absolute;
      top: 0;
      left: 0;
      background: #1150;
      width: 100%;
      height: 100%;
      z-index: 99999;
      opacity: 70%
      /* animation: darkmode 5s; */
    }
    .container {
      display: flex;
      flex-direction: column;
      width: 100%;
    }
    .sun {
      width: 150px;
      height: 150px;
      animation: sun 10s infinite linear;
      position: absolute;
      top: 70px;
      left: 50px;
      background-image:url("https://cdn.discordapp.com/attachments/932854310004473857/941350517647474738/sun_sunshine_sunrise_icon_151789.png");
      background-position: center; /* Center the image */
      background-repeat: no-repeat; /* Do not repeat the image */
      background-size: cover; /* Resize the background image to cover the entire container */
      
    }
    .sun1{
      width: 100%;
      height: 100%;
      }
    .background-layer-tree{
      position: absolute;
      width: 1440px;
      height: 810px;
    }
    .background-layer-cloud{
      position: absolute;
      width: 1440px;
      height: 810px;
      
    }
    .tree_all {
      width: 100%;
      height: 100%;
      position: absolute;
      top:0px;
      right:0px;
    }
    .tree{
      width: 100%;
      height: 100%;
      background-size:cover;
      transform-style: preserve-3d;
      perspective: 1000px;
      position: absolute;
      top: 0;
      lef: 0;
      z-index: 1000;
    }
    .t2 {
      
      animation: tree 1s infinite alternate;
    }
    .t3 {
      animation: tree 0.8s infinite alternate;
    }
    /* @keyframes kraprib{
        from{opacity(1)}
        to{opacity(0.2)}
    } */
    @keyframes moon_star{
      from{transform:rotate(0deg)}
      to{transform:rotate(360deg)}
    }
    .star{
      position:absolute;
      width:.5em;
      height:.5em;
      background:#7edfff;
      opacity:1;
      z-index: 1;
      box-shadow:0px 0px 30px 10px #7edfff;
      animation:kraprib 3s infinite alternate,moon_star 1s infinite linear;
    }
    .star:nth-child(15){
      top:14%;
      left:20%;
     
    }
    .star:nth-child(16){
      top:14%;
      left:70%;
     
    }
    .star:nth-child(17){
      top:20%;
      left:90%;
     
    }
    .star:nth-child(11){
      top:25%;
      left:30%;
     
    }
    .star:nth-child(12){
      top:15%;
      left:40%;
      
    }
    .star:nth-child(13){
      top:33%;
      left:55%;
      
    }
    .star:nth-child(14){
      top:10%;
      left:78%;
      
    }
    #layer-cloud1{
      width: 100%;
      height: 100%;
      background-size:cover;
      position: absolute;
      left: -100px;
      top : -10px;
      animation: layercloudbig 20s infinite linear;
      z-index: 3;
    }
    #layer-cloud2{
      width: 100%;
      height: 100%;
      background-size:cover;
      position: absolute;
      right: -700px;
      top: -90px;
      animation: layercloudtiny 30s infinite linear;
      z-index: 3;
    }
    #ship {
      position: absolute;
      left: -100;
      top: 370px;
      width: 130px;
      height: 130px;
      animation: ship2 8s infinite linear;
    }
    
    #crab{
      position: absolute;
      z-index: 3000;
      right:150px;
      top:530px;
      width: 15%;
      height: auto;
      animation:crab 1s infinite alternate;
    }
    #fish{
    position: absolute;
    width: 4%;
    height: auto;
    left:700px;
    top:580px;
    animation: fish 1.625s infinite alternate;
    }
    #sand{
    position: absolute;
    width:18%;
    height: auto;
    left:650px;
    top:600px;
    }
    #merarm{
    position: absolute;
    left:0px;
    top:245px;
    width: 360px;
    height: 460px;
    animation: merarm 1.5s infinite alternate;
    }
    #merking{
    position: absolute;
    left:0px;
    top:250px;
    width: 360px;
    height: 460px;
    }
    @keyframes sun{
        from{
          transform:rotate(0deg) scale(1)}
        to{
          transform:rotate(360deg) scale(1)}
      }
    @keyframes ship2 {
      0%    {transform: translateX(0px);}
     10%   {transform: translateX(200px);}
     20%   {transform: translateX(400px);}
     30%   {transform: translateX(600px);}
     40%   {transform: translateX(800px);}
     50%   {transform: translateX(1000px);}
     60%   {transform: translateX(1200px);}
     70%   {transform: translateX(1400px);}
     80%   {transform: translateX(1600px);}
     90%   {transform: translateX(1800px);}
    100%  {transform: translateX(2000px);}
}
    @keyframes ship3 {
      0%    {transform: translateX(1600px);}
      10%   {transform: translateX(1400px);}
      20%   {transform: translateX(1200px);}
      30%   {transform: translateX(1000px);}
      40%   {transform: translateX(800px);}
      50%   {transform: translateX(600px);}
      60%   {transform: translateX(400px);}
      70%   {transform: translateX(200px);}
      80%   {transform: translateX(0px);}
      90%   {transform: translateX(-200px);}
      100%  {transform: translateX(-400px);}
}
    @keyframes tree {
      from{
        transform:rotate(0deg) rotateZ(0deg)}
      to{
        transform:rotate(1deg) rotateZ(1deg)}
    }

@keyframes layercloudbig {
    0%    {transform: translateX(0px);}
    10%    {transform: translateX(200px);}
    20%    {transform: translateX(400px);}
    30%    {transform: translateX(600px);}
    40%    {transform: translateX(800px);}
    50%    {transform: translateX(1000px);}
    60%    {transform: translateX(800px);}
    70%    {transform: translateX(600px);}
    80%    {transform: translateX(400px);}
    90%    {transform: translateX(200px);}
    100%    {transform: translateX(0px);}
    }
    @keyframes layercloudtiny {
    0%    {transform: translateX(0px);}
    10%    {transform: translateX(-200px);}
    20%    {transform: translateX(-400px);}
    30%    {transform: translateX(-600px);}
    40%    {transform: translateX(-800px);}
    50%    {transform: translateX(-1000px);}
    60%    {transform: translateX(-800px);}
    70%    {transform: translateX(-600px);}
    80%    {transform: translateX(-400px);}
    90%    {transform: translateX(-200px);}
    100%    {transform: translateX(0px);}
    }
    @keyframes crab{
    from {transform: rotate(358deg)}
    to {transform: rotate(375deg)}
    }
    @keyframes fish{
    0% { transform: translate(-50%, -50%) scale(1.25, 0.75); }
    50% { transform: translate(-50%, -150%) scale(1, 1); }
    55% { transform: translate(-50%, -150%) rotate(15deg); }
    60% { transform: translate(-50%, -150%) rotate(-15deg); }
    65% { transform: translate(-50%, -150%) rotate(15deg); }
    70% { transform: translate(-50%, -150%) rotate(-15deg); }
    100% { transform: translate(-50%, -50%) scale(1.25, 0.75); }
    }
    @keyframes merarm{
    from {transform: rotate(360deg)}
    to {transform: rotate(368deg)}
    }
  </style>
  </head>
  <body>
    <div id="button">
      <button class= "btn1" onclick = "back_bg()">day</button>
      <button class= "btn2" onclick = "change_bg()">night</button>
    </div>
    <div id="song">
      <audio controls autoplay loop>
        <source src="https://cdn.discordapp.com/attachments/856448592947183627/941740217818296360/X2Download.com_-_Under_the_Sea_Lyrics_128_kbps.mp3" type="audio/mpeg">
      </audio>
    </div>
    <div class="outer-container">
      <div class="canvas">
        <div class="sun_box">
          <div class="sun">
          </div>
        </div>

</div>
      </div>
    </div>
    
  </body>

}
    function back_bg() {
        // document.getElementById("darkmode").style.background = "#1110";
        document.querySelector(".canvas").style.backgroundImage = "url('https://media.discordapp.net/attachments/932854310004473857/941734040380260442/Untitled_Artwork.png?width=1249&height=702')";
        document.querySelector(".sun").style.backgroundImage = "url('https://cdn.discordapp.com/attachments/932854310004473857/941350517647474738/sun_sunshine_sunrise_icon_151789.png')";
        document.querySelector("#ship").style.animation = "ship2 8s infinite linear";
      }
  </script>
</html>