#block{
  position: fixed;
  top: 40%;
  left: 40%;
  height: 35%;
  width: 25%;
  animation-name: example;
  animation-duration: 10s;
  animation-iteration-count: 200;
}

@keyframes example {
  0% {background-image: url("weseeall2.gif");transform: rotate(1deg);background-repeat: no-repeat;background-size: contain;}
  100% {background-image: url("weseeall2.gif");transform: rotate(-1deg);background-repeat: no-repeat;background-size: contain;}
}

h1{
  text-align: center;
  margin-top: 10%;
  padding-bottom: 1px;
  animation-name: example2;
  animation-duration: 1s;
  animation-iteration-count: 666;
  color: white;
}


body{
  background-color: rgb(0, 0, 0);
  animation-name: example3;
  animation-duration: 15s;
  animation-iteration-count: 666;
  min-height: 200vh;
}

@keyframes example3 {
  0% {background-color: rgb(0, 0, 0);}
  20% {background-image: url("ht.gif");background-color: rgb(0, 0, 0);background-size: 100%;background-size: contain;}
  25% {background-image: url("ht2.gif");background-color: rgb(0, 0, 0);background-size: 100%;background-size: contain;}
  30% {background-image: url("ht.gif");background-color: rgb(0, 0, 0);background-size: 100%;background-size: contain;}
  35% {background-image: url("ht2.gif");background-color: rgb(0, 0, 0);background-size: 100%;background-size: contain;}
  40% {background-image: url("ht3.gif");background-color: rgb(0, 0, 0);background-size: 100%;background-size: contain;}
  45% {background-image: url("ht4.gif");background-color: rgb(0, 0, 0);background-size: 100%;background-size: contain;}
  50% {background-image: url("ht.gif");background-color: rgb(0, 0, 0);background-size: 100%;background-size: contain;}
  55% {background-image: url("ht5.gif");background-color: rgb(0, 0, 0);background-size: 100%;background-size: contain;}
  60% {background-image: url("ht.gif");background-color: rgb(0, 0, 0);background-size: 100%;background-size: contain;}
  65% {background-image: url("ht6.gif");background-color: rgb(0, 0, 0);background-size: 100%;background-size: contain;}
  70% {background-image: url("ht3.gif");background-color: rgb(0, 0, 0);background-size: 100%;background-size: contain;}
  75% {background-image: url("ht7.gif");background-color: rgb(0, 0, 0);background-size: 100%;background-size: contain;}
  80% {background-image: url("ht.gif");background-color: rgb(0, 0, 0);background-size: 100%;background-size: contain;}
  85% {background-image: url("ht8.gif");background-color: rgb(0, 0, 0);background-size: 100%;background-size: contain;}
 
  100% {background-color: rgb(0, 0, 0);}
}

#rabbit{
  position: fixed;
  top: 70%;
  left: 43%;
  height: auto;
  width: auto;
}

.typewriter {
  width: 0;
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid black; /* optional cursor */
  animation: typing 4s steps(40) forwards, blink 0.7s step-end infinite;
  font-size: 3rem;
  text-align: center;
  margin-top: 10%;
  color: white;
  position: fixed;
  top: 15%;
  left: 49%;
  transform: translate(-50%, -50%);
}

@keyframes typing {
  from { width: 0; }
  to { width: 20ch; } /* adjust based on total characters */
}

@keyframes blink {
  50% { border-color: transparent; }