Assignment CSS Calc and CSS Var (Copy 13107) (Copy 13428) (Copy 13430)

Assignment CSS Calc and CSS Var (Copy 13107) (Copy..

✨ PAKIN KAOPHUTHAI

<html>
  <head>
    <style>
      body{
        	 font-family:;
          margin: 0;
          overflow-y: hidden;
          background: linear-gradient(0deg, #180660 0%, #233876 100%);
      }
      .canvas {
          background:url("https://img.freepik.com/free-vector/sea-blackground_26659-30.jpg?size=626&ext=jpg");
          width: 1600px;
          height: 800px;
          display: flex;
          justify-content: center;
          align-items: center;
          position: relative;
        	 top: 17%;
          margin: auto;
          background-size: cover;
          box-shadow: 0px 0px 80px hsl(0, 0%, 0%);
          border-radius: 3em;
          overflow-x: hidden;
      }
      .object1{
        	 width: 850px;
        	 height: 550px;
        	 position: relative;
          margin: auto auto;
          background-size: cover;
          border-radius: 2em;
      }
      .fish1{
        	 transform:scale(0.4);
			 position: absolute;
        	 bottom: 6px;
        	 left: -1700px;
        	 animation: move1 10s infinite linear;
      }
      .fish2{
        	 position: absolute;
        	 bottom: 250px;
        	 left: 1900px;
          animation: move2 8s infinite linear;
      }
      .fish3{
			 transform:scale(0.5);
        	 position: absolute;
        	 bottom: 10px;
          left: 1900px;
          animation: move2 4s infinite linear;
      }
      .bubble{
        	 background:#ccecf0;
        	 width: 10px;
          height: 10px;
          position:absolute;
        	 bottom: -100px;
        	 left: 50px;
          border-radius: 2em;
          animation: move3 3s infinite linear;
      }
      .bubble1{
        	 background:#ccecf0;
        	 width: 10px;
          height: 10px;
          position:absolute;
        	 bottom: -100px;
        	 left: 190px;
          border-radius: 2em;
          animation: move3 10s infinite linear;
        	
      }
      .bubble2{
        	 background:#ccecf0;
        	 width: 10px;
          height: 10px;
          position:absolute;
        	 bottom: -100px;
        	 left: 210px;
          border-radius: 2em;
          animation: move3 7s infinite linear;
        	
      }
      .bubble3{
        	 background:#ccecf0;
        	 width: 10px;
          height: 10px;
          position:absolute;
        	 bottom: -100px;
        	 left: 420px;
          border-radius: 2em;
          animation: move3 4s infinite linear;
        	
      }
      .bubble4{
        	 background:#ccecf0;
        	 width: 10px;
          height: 10px;
          position:absolute;
        	 bottom: -100px;
        	 left: 560px;
          border-radius: 2em;
          animation: move3 5s infinite linear;
        	
      }
      .bubble5{
        	 background:#ccecf0;
        	 width: 10px;
          height: 10px;
          position:absolute;
        	 bottom: -100px;
        	 left: 760px;
          border-radius: 2em;
          animation: move3 6s infinite linear;
        	
      }
      #song{
          position: absolute;
          top: 40px;
          right: 900px;
          z-index: 30000;
   	}
      .lyricbox{
          height: 98vh;
          width: 25vw;
          overflow-y: hidden;
          color: white;
          position: absolute;
          left: 10px;
          top: -130px;
      }
      .lyric{
          position: absolute;
          font-size: 8.5px;
          white-space: pre-line;
          left: calc(10vh - 25px);   
        	 color:#000266;
          animation: scroll1 200s 30s linear;
          overflow-y: hidden;
      }
      .tank{
			 position: absolute;
          top: 100px;
          right: 970px;
      }
      @keyframes move1{
        100% {transform: translateX(4000px);}
      }
      @keyframes move2{
        100% {transform: translateX(-4000px);}
      }
      @keyframes move3{
        100% {transform: translateY(-4000px);}
      }
        @keyframes scroll1{
        100% {transform: translatey(-2000px);}
      }
      .color{
		display: table-cell;
      width: 50px;
      height: 50px;
      margin: 0 1px;
      cursor: pointer;
      border: 2px solid #FFF;
      }
      .container{
      border: 2px;
      position: absolute;
      left: 50%;
      }
      .colorfont1{
			--c1:#f94ece;
         color:var(--c1);
      }
      .colorfont2{
			--c1:#000266;
         color:var(--c1);
      }
    </style>
  </head>
  <body>
    <div id="song">
      <audio controls autoplay loop>
        <source src="https://cdn.discordapp.com/attachments/462894109259071489/943075953968574464/X2Download.com_-_Baby_Shark_Dance___babyshark_Most_Viewed_Video___Animal_Songs___PINKFONG_Songs_for_Children_128_kbps.mp3" type="audio/mpeg">
      </audio>
    </div>
    
    <div class="tank">
      <span>tank
          </span>
          <input type="range" min="10" max="100" step="2" oninput='changesizefont(this)' value='10'>
              <script>
           function changesizefont(num){
           let numchange = num.value
           let declaration = document.styleSheets[0].cssRules[1].style;
           let setprop = declaration.setProperty("font-size", numchange)
          }
          </script>
    </div>
      
    <div class="container">
      <span  onclick="color(this)" class='color colorfont1'></span>
      <span  onclick="color(this)" class='color colorfont2'></span>
    </div>
    
    <div class="canvas">
      <div class="object1">
        <div class="lyricbox">
      <div class="lyric">
        <h1>
          Baby shark, doo doo doo doo doo doo
Baby shark, doo doo doo doo doo doo
Baby shark, doo doo doo doo doo doo
Baby shark!
        </h1>
        <h1>
          Mommy shark, doo doo doo doo doo doo
Mommy shark, doo doo doo doo doo doo
Mommy shark, doo doo doo doo doo doo
Mommy shark!
        </h1>
        <h1>
          Daddy shark, doo doo doo doo doo doo
Daddy shark, doo doo doo doo doo doo
Daddy shark, doo doo doo doo doo doo
Daddy shark!
        </h1>
        <h1>
         Grandma shark, doo doo doo doo doo doo
Grandma shark, doo doo doo doo doo doo
Grandma shark, doo doo doo doo doo doo
Grandma shark!
        </h1>
        <h1>
			Grandpa shark, doo doo doo doo doo doo
Grandpa shark, doo doo doo doo doo doo
Grandpa shark, doo doo doo doo doo doo
Grandpa shark!
        </h1>
        <h1>
          Let’s go hunt, doo doo doo doo doo doo
Let’s go hunt, doo doo doo doo doo doo
Let’s go hunt, doo doo doo doo doo doo
Let’s go hunt!
        </h1>
        <h1>
         Run away, doo doo doo doo doo doo
Run away, doo doo doo doo doo doo
Run away, doo doo doo doo doo doo
Run away!
        </h1>
        <h1>
          Safe at last, doo doo doo doo doo doo
Safe at last, doo doo doo doo doo doo
Safe at last, doo doo doo doo doo doo
Safe at last!
        </h1>
        <h1>
          It’s the end, doo doo doo doo doo doo
It’s the end, doo doo doo doo doo doo
It’s the end, doo doo doo doo doo doo
It’s the end!
        </h1>
      </div>
    </div>
        <div class="fish1">
          <img src="https://cdn.discordapp.com/attachments/876151394783072346/943062589011808286/235433.png">
        </div>
        <div class="fish2">
          <img src="https://cdn.discordapp.com/attachments/876151394783072346/943070997043642388/Untitled-1polkkl.png">
        </div>
        <div class="fish3">
          <img src="https://cdn.discordapp.com/attachments/876151394783072346/943062538516561980/preview.png">
        </div>
        <div class="bubble">
        </div>
        <div class="bubble1">
        </div>
         <div class="bubble2">
        </div>
         <div class="bubble3">
        </div>
         <div class="bubble4">
        </div>
         <div class="bubble5">
        </div>
      </div>
    </div>
    
  </body>
    <script>
      function color(z){
        var a = getComputedStyle(z);
        var b = a.backgroundImage;
        document.getElementsByTagName("BODY")[0].style.backgroundImage=b;
      }
    </script>
</html>