@keyframes hshift {
    0% {
      transform: translateX(0px);
    }
    15% {
      transform: translateX(-100px);
    }
    25% {
      transform: translateX(-100px);
    }
    40% {
      transform: translateX(-200px);
    }
    50% {
      transform: translateX(-200px);
    }
    65% {
      transform: translateX(-300px);
    }
    75% {
      transform: translateX(-300px);
    }
    90% {
      transform: translateX(-400px);
    }
    100% {
      transform: translateX(-400px);
    }
  }
  @keyframes Vshift {
    0%,
    24.99% {
      transform: translateY(100px);
    }
    25%,
    49.99% {
      transform: translateY(0px);
    }
    50%,
    74.99% {
      transform: translateY(100px);
    }
    75%,
    100% {
      transform: translateY(0px);
    }
  }
  #screen {
    top: -200px;
    animation: Vshift 5s infinite linear;
  }
  #outerouter {
    margin-top: 0px;
    animation: none;
  }
  #outer {
    height: 200px;
    animation: none;
  }
  #dia div {
    height: 200px;
  }
  #fi {
    view-transition-name: fi;
  }
  #fi {
    view-transition-name: fi;
  }
  #dia div {
    height: 200px;
  }
  #outer {
    height: 200px;
    animation: none;
  }
  #outerouter {
    margin-top: 0px;
    animation: none;
  }
  #screen {
    top: -200px;
    animation: Vshift 5s infinite linear;
  }
  @keyframes Vshift {
    0%,
    24.99% {
      transform: translateY(100px);
    }
    25%,
    49.99% {
      transform: translateY(0px);
    }
    50%,
    74.99% {
      transform: translateY(100px);
    }
    75%,
    100% {
      transform: translateY(0px);
    }
  }
  @keyframes hshift {
    0% {
      transform: translateX(0px);
    }
    15% {
      transform: translateX(-100px);
    }
    25% {
      transform: translateX(-100px);
    }
    40% {
      transform: translateX(-200px);
    }
    50% {
      transform: translateX(-200px);
    }
    65% {
      transform: translateX(-300px);
    }
    75% {
      transform: translateX(-300px);
    }
    90% {
      transform: translateX(-400px);
    }
    100% {
      transform: translateX(-400px);
    }
  }
  @keyframes hshift {
    0% {
      transform: translateX(0px);
    }
    15% {
      transform: translateX(-100px);
    }
    25% {
      transform: translateX(-100px);
    }
    40% {
      transform: translateX(-200px);
    }
    50% {
      transform: translateX(-200px);
    }
    65% {
      transform: translateX(-300px);
    }
    75% {
      transform: translateX(-300px);
    }
    90% {
      transform: translateX(-400px);
    }
    100% {
      transform: translateX(-400px);
    }
  }
  @keyframes Vshift {
    0%,
    24.99% {
      transform: translateY(100px);
    }
    25%,
    49.99% {
      transform: translateY(0px);
    }
    50%,
    74.99% {
      transform: translateY(100px);
    }
    75%,
    100% {
      transform: translateY(0px);
    }
  }
  #screen {
    top: -200px;
    animation: Vshift 5s infinite linear;
  }
  #outerouter {
    margin-top: 0px;
    animation: none;
  }
  #outer {
    height: 200px;
    animation: none;
  }
  #dia div {
    height: 200px;
  }
  #fi {
    view-transition-name: fi;
  }
  #fi {
    view-transition-name: fi;
  }
  #dia div {
    height: 200px;
  }

  #outer {
    height: 200px;
    animation: none;
  }
  #outerouter {
    margin-top: 0px;
    animation: none;
  }
  #screen {
    top: -200px;
    animation: Vshift 5s infinite linear;
  }

  @keyframes Vshift {
    0%,
    24.99% {
      transform: translateY(100px);
    }
    25%,
    49.99% {
      transform: translateY(0px);
    }
    50%,
    74.99% {
      transform: translateY(100px);
    }
    75%,
    100% {
      transform: translateY(0px);
    }
  }
  @keyframes hshift {
    0% {
      transform: translateX(0px);
    }
    15% {
      transform: translateX(-100px);
    }
    25% {
      transform: translateX(-100px);
    }
    40% {
      transform: translateX(-200px);
    }
    50% {
      transform: translateX(-200px);
    }
    65% {
      transform: translateX(-300px);
    }
    75% {
      transform: translateX(-300px);
    }
    90% {
      transform: translateX(-400px);
    }
    100% {
      transform: translateX(-400px);
    }
  }