```
/* for now it bite when you refresh the page */

body::before,
body::after{
  content: '';
  position: fixed;
  width: 100vw;
  left: 0;
  right: 0;
  height: 66.6vh;
  background-color: transparent;
  z-index: 999;
  animation: 6s linear bite;
  filter: contrast(2) drop-shadow(-1rem -1rem 0rem orange) hue-rotate(0.4turn) invert(1) saturate(2);
}
body::before {
	top: 0;
	
	background-position: bottom;
	background-image: url(https://tell.declarations.style/static/teeth-top.png);
	background-repeat: no-repeat;
	background-size: 80%;
	
	z-index: 6666666;
}
body::after {
  bottom: 0;
  background-image: url(https://tell.declarations.style/static/teeth-bottom.png);
  background-position: top;
  background-repeat: no-repeat;
  background-size: 80%;
 
  z-index: 9;
}

body{
    animation: 6s linear dark;
    filter: greyscale(1);
}

@keyframes dark{
		70% { filter: greyscale(0); }
		100% { filter: greyscale(1); }
}

@keyframes bite{
    /* teasing bite 1 */
    0% { height: 0vh; }
    2% { height: 5vh; }
    4% { height: 0vh; }
    
	 /* teasing bite 2 */
    30% { height: 0vh; }
    32% { height: 15vh; }
    34% { height: 5vh; }
    
    /* teasing bite 3 */
    38% { height: 10vh; }
    40% { height: 25vh; }
    42% { height: 0vh; }
	
	 /* final bite */
    85% { height: 0vh; 
    }
    89% { height: 2vh; 
          filter: contrast(2) drop-shadow(-1rem -1rem 0rem orange) grayscale(1) hue-rotate(0.4turn) invert(1) saturate(2);
        }
    93% { height: 3.5vh; 
          filter: contrast(2) drop-shadow(-1rem -1rem 0rem orange) grayscale(1) hue-rotate(0.4turn) invert(1) saturate(2);
        }
    97% { height: 5vh; 
          filter: contrast(2) drop-shadow(-1rem -1rem 0rem orange) grayscale(1) hue-rotate(0.4turn) invert(1) saturate(2);
        }
    100% { 
        height: 66.6vh; 
        filter: contrast(2) drop-shadow(-1rem -1rem 0rem orange) hue-rotate(0.4turn) invert(1) saturate(2);
		  /* backdrop-filter: hue-rotate(60deg); */
        }
}

css for the warning from here ->>>

    @font-face {
     font-family:"MerchantCopyDoublesize-jE7R"; src: url("https://circulations.constantvzw.org/assets/fonts/MerchantCopyDoublesize-jE7R.woff2") format("woff2");
    }

    .warning {
        position: relative;
    top: 200px;
    text-shadow: 0.1px 0px 0px red, 0 0 1em red, 0 0 0.2em white;
      font-family: "MerchantCopyDoublesize-jE7R";
      font-size: 2vh;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: down;
      justify-content: center;
      overflow: hidden;
      height: 100vh;
      
    /* defines a name for the @keyframes animation */
    /* animation-name: opacity; */
    /* defines how long the animation takes to complete one cycle */
    animation-duration: 15s;
    /* defines how the animation will progress over one cycle of its duration */
    animation-timing-function: ease-in-out;
    /* defines whether or not the animation should play in reverse on alternate cycles */
    animation-direction: normal;
    /* defines the number of times an animation cycle is played */
    animation-iteration-count: infinite;
    
    animation: 15s ease-in-out var(--delay) infinite;
    
    animation-delay: var(--delay);
    }
    
    @keyframes opacity {
      /* defines how strong the color of the text is at a certain point in the animation */
      0% {opacity: 100%;}
      10% {opacity: 0%;}
      50% {opacity: 0%;}
      90% {opacity: 0%;}
      100% {opacity: 100%;}
    }
    
    .warning span {
      /* determines the type of box or boxes that are generated for an element */
      display: inline-block;
    }

------------

    <span>It</span>
    <span style="--delay: 1s;">is</span>
    <span style="--delay: 2s;">pitch</span>
    <span style="--delay: 3s;">black.</span>
    <span style="--delay: 4s;">You</span>
    <span style="--delay: 5s;">are</span>
    <span style="--delay: 6s;">likely</span>
    <span style="--delay: 7s;">to</span>
    <span style="--delay: 8s;">be</span>
    <span style="--delay: 9s;">eaten</span>
    <span style="--delay: 10s;">by</span>
    <span style="--delay: 11s;">a</span>
    <span style="--delay: 12s;">website.</span>