a:link {
	    color: #0000FF;
        text-decoration: none;
}

        a:visited {
        color: #00FFFF;
        text-decoration: none;
}

        a:active {
        color: #FF00A6;
        text-decoration: none;
}
   
html {
            user-select: none;
        }	
	    
 s1 {
	font-size: 38px; 
	font-weight: 500;
	font-family:arial; 
	color: #00FFFF; 
	text-align:center; 
	text-shadow: 2px 1px 1px #B9B9B9; 
	display:block;
	}
	
	s2 {
	font-size: 30px; 
	font-weight: 450;
	font-family:arial; 
	color: #0000FF; 
	display:block; 
	text-align:center; 
	text-shadow: 2px 1px 1px #B9B9B9; 
	display:block;
	}
	
	s3 {
	width:640px; 
	color: #000000; 
	font-size: 20px; 
	font-weight: 380;
	font-family: arial;
	text-align: justify; 
	text-shadow: 2px 1px 1px #CCCCCC;
    display:block;
   }
   
sf {
	width:640px; 
	color: #FF1100; 
	font-size: 26px; 
	font-weight: 450;
	font-family: arial;
	text-align: center; 
	text-shadow: 2px 1px 1px #B9B9B9; 
	display:block; 
  }
	   
      @font-face { font-family: zh monospace; src: url('../../fonts/claw1.ttf'); } 
       h7{
         color: #FF0000; 
         font-size: 48px; 
         font-weight:800;
         opacity:.1,5;
         text-align:center; 
         font-family: zh monospace; 
         text-shadow:2px 1px 1px #000000;
         transform: scale(5, 3);
         display:block; 	
      }
      
      

    s8 {
         color: #FF0000; 
         font-size: 70px; 
         font-weight:500;
         font-family: arial monospace; 
         background: linear-gradient(to left,violet,
            indigo, blue, green, yellow, orange, red);
   		-webkit-background-clip: text;
           -webkit-animation-name: swim;     
           -webkit-animation-duration: 2s;
           -webkit-animation-iteration-count: 10;
              background-repeat: no-repeat;
              background-position: 0 0;
              background-color: #222;
    	  	color: transparent;")
         text-shadow: 3px 2px 1px #000000, 3px 2px 110px #FF00FF; 
         animation-name: fly1; 
         transform-origin: 70% 70%;  
         animation-duration: 5s;
         animation-iteration-count: 3;
         animation-direction: alternate;
         animation-timing-function: linear;
         display: inline-block;
      }                 
         
       @font-face { font-family: fish1 monospace; src: url('../../fonts/fish3.ttf'); }    
          
         swimming-text {
         color: #FF0000; 
         font-size: 80px; 
         font-weight:500;
         font-family: fish1 monospace; 
         background: linear-gradient(to left,violet,
            indigo, blue, green, yellow, orange, red);
   		-webkit-background-clip: text;
           -webkit-animation-name: shimmer;     
           -webkit-animation-duration: 2s;
           -webkit-animation-iteration-count: 10;
              background-repeat: no-repeat;
              background-position: 0 0;
              background-color: #222;
    	  	color: transparent;")
         text-shadow: 3px 2px 1px #000000, 3px 2px 110px #FF00FF; 
         animation-name: fly1; 
         transform-origin: 70% 70%;  
         animation-duration: 5s;
         animation-iteration-count: 3;
         animation-direction: alternate;
         animation-timing-function: linear;
         display: inline-block;
      }           
  
         .swimming-text span {
            display: inline-block;
            animation: swim 4s ease-in-out infinite;
            transform-origin: center;
        }

        @keyframes swim {
            0% {
                transform: scale(3.3.2) ;
            }
            25% {
                transform: scale(3, 4); filter:hue-rotate(30deg);
            }
            35% {
                transform: scale(3.5, 4) translateX(150px) translateY(-90px); filter:hue-rotate(45deg);
            }
            50% {
                transform: scale(2.2, 1.5) translateX(-200px)  translateY(-190px);  filter:hue-rotate(60deg);
            }
             60% {
                transform: scale(2.2, 1.5) translateX(-220px)  translateY(-190px) rotateZ(30deg); filter:hue-rotate(60deg);
            }
            75% {
                transform: scale(1,1.5) translateX(-20px) translateY(10px) rotateZ(-30deg);
            }
           100% {
                transform: scale(3.3.2) ; filter:hue-rotate(-160deg);  opacity:.5;
            }
        }       
         
            /* Stagger the animation for each letter */
        
        .swimming-text span:nth-child(1) { animation-delay: 0.1s; }
        .swimming-text span:nth-child(2) { animation-delay: 0.2s; }
        .swimming-text span:nth-child(3) { animation-delay: 0.3s; }
        .swimming-text span:nth-child(4) { animation-delay: 0.4s; }
        .swimming-text span:nth-child(5) { animation-delay: 0.5s; }
        .swimming-text span:nth-child(6) { animation-delay: 0.6s; }
        .swimming-text span:nth-child(7) { animation-delay: 0.7s; }
        .swimming-text span:nth-child(8) { animation-delay: 0.8s; }
        .swimming-text span:nth-child(9) { animation-delay: 0.9s; }
        .swimming-text span:nth-child(10) { animation-delay: 1.0s; }
        .swimming-text span:nth-child(11) { animation-delay: 1.1s; }
        .swimming-text span:nth-child(12) { animation-delay: 1.2s; }
        .swimming-text span:nth-child(13) { animation-delay: 1.3s; }
        .swimming-text span:nth-child(14) { animation-delay: 21.4s; }
        .swimming-text span:nth-child(15) { animation-delay: 11.5s; }
        .swimming-text span:nth-child(16) { animation-delay: 1.6s; }
        .swimming-text span:nth-child(17) { animation-delay: 1.7s; }
        .swimming-text span:nth-child(18) { animation-delay: 1.8s; }