#bot {
      scroll-margin-top: 6.66rem;
    }
    @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 oVshift {
      10% {
        transform: translateY(0px);
      }
      25% {
        transform: translateY(-100px);
      }
      35% {
        transform: translateY(-100px);
      }
      50% {
        transform: translateY(0px);
      }
      60% {
        transform: translateY(0px);
      }
      75% {
        transform: translateY(-100px);
      }
      85% {
        transform: translateY(-100px);
      }
      100% {
        transform: translateY(0px);
      }
    }
    @keyframes vshift {
      10% {
        transform: translateY(0px);
      }
      25% {
        transform: translateY(100px);
      }
      35% {
        transform: translateY(100px);
      }
      50% {
        transform: translateY(0px);
      }
      60% {
        transform: translateY(0px);
      }
      75% {
        transform: translateY(100px);
      }
      85% {
        transform: translateY(100px);
      }
      100% {
        transform: translateY(0px);
      }
    }
    @keyframes hshift {
      10% {
        transform: translateX(0px);
      }
      25% {
        transform: translateX(-100px);
      }
      35% {
        transform: translateX(-100px);
      }
      50% {
        transform: translateX(-200px);
      }
      60% {
        transform: translateX(-200px);
      }
      75% {
        transform: translateX(-300px);
      }
      85% {
        transform: translateX(-300px);
      }
      100% {
        transform: translateX(-400px);
      }
    }
    #dia div:nth-child(4) {
      background: linear-gradient(0deg, #8fc 0%, #8fc 80%, red 100%);
    }
    #dia div:nth-child(3) {
      background: linear-gradient(180deg, #8cf 0%, #8cf 80%, red 100%);
    }
    #dia div:nth-child(2) {
      background: linear-gradient(0deg, #8cf 0%, #8cf 80%, red 100%);
    }
    #dia :is(div:nth-child(1), div:nth-child(5)) {
      background: linear-gradient(180deg, #8fc 0%, #8fc 80%, red 100%);
    }
    #dia div {
      height: 200px;
      width: 100px;
      color: #222;
      border: 1px solid #888;
      padding: 1em 0.5rem;
    }
    #screen {
      position: relative;
      z-index: 10;
      top: -200px;
      width: 100px;
      height: 100px;
      background-color: #fff8;
      border: 3px solid #8888;
      border-radius: 10px;
      animation: vshift 5s infinite linear;
      color: black;
      padding-top: 3.5rem;
      padding-left: 1em;
    }
    #dia {
      display: flex;
      width: 500px;
      animation: hshift 5s infinite linear;
    }
    #outer {
      width: 100px;
      height: 200px;
      margin: 0 auto;
      overflow: hidden;
    }
    #container #outerouter {
      margin: 0;
    }
    #outerouter {
      max-width: 640px;
      margin: 0 10vw;
      margin-top: 0;
    }
    p.desc {
      color: var(--accent-color);
      line-height: 1.8rem;
    }
    p.lorem,
    p.desc {
      line-height: 2;
      font-size: 1.2rem;
      max-width: 640px;
      margin: 40px 10vw;
    }
    :root.dark #dark,
    :root:not(.dark) #light {
      display: inline;
    }
    #dark,
    #light {
      display: none;
    }
    #back {
      display: inline-block;
      color: black;
      border-radius: 8px;
      padding: 1rem;
      margin: 1rem;
      background: linear-gradient(45deg, #ff6b6b, #f06595, #cc5de8);
      box-shadow: 0 4px 6px #8888;
    }
    #mid {
      display: flex;
      height: 70vh;
    }
    #all {
      max-width: 50rem;
      margin: auto;
    }
    main {
      scroll-padding-top: 6.66rem;
      padding: 1rem;
      padding-left: 80px;
      overflow: auto;
    }
    nav a {
      display: block;
      text-decoration: none;
      padding: 0.5rem;
    }
    nav {
      position: fixed;
      top: 6.66rem;
      background-color: var(--accent-background-color);
      overflow: auto;
    }
    header div {
      flex: 1 1 0%;
    }
    button {
      background-color: var(--accent-background-color);
      accent-color: var(--accent-color);
      color: var(--color);
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 1rem;
      margin: 1em;
      padding: 0.5em 1em;
      box-shadow: 0 4px 6px #8888;
      cursor: pointer;
    }
    footer {
      top: unset;
      height: 4rem;
      bottom: 0;
    }
    [data-theme="dark"] :is(footer, header) {
      background-color: #111c;
    }
    footer,
    header {
      position: fixed;
      width: 100%;
      height: 6.66rem;
      top: 0;
      background-color: var(--background-color);
      padding: 1rem;
      display: flex;
      justify-content: space-between;
      background-color: #eeec;
      backdrop-filter: blur(2px);
    }
    :root.dark {
      --background-color: #222;
      --accent-background-color: #333;
      --color: #ddd;
      --accent-color: #dfd;
    }
    :root {
      font-family: sans-serif;
      --background-color: #e0e0e0;
      --accent-background-color: #e0f0e0;
      --color: #444;
      --accent-color: #070;
      color: var(--color);
      background-color: var(--background-color);
      accent-color: var(--accent-color);
    }
    #fi {
      view-transition-name: fi;
    }
    @keyframes slideIn {
      from {
        transform: translateX(100%);
      }
    }
    @keyframes slideOut {
      to {
        transform: translateX(-100%);
      }
    }
    :root.vtbag-vtt-backward::view-transition-new(main) {
      animation-name: slideOut;
      animation-direction: reverse;
    }
    :root.vtbag-vtt-backward::view-transition-old(main) {
      animation-name: slideIn;
      animation-direction: reverse;
    }
    ::view-transition-new(main) {
      animation-name: slideIn;
    }
    ::view-transition-old(main) {
      animation-name: slideOut;
    }
    ::view-transition-group(fi),
    ::view-transition-group(main) {
      animation-duration: 1s;
    }
    footer {
      view-transition-name: footer;
    }
    header {
      view-transition-name: header;
    }
    nav {
      view-transition-name: nav;
    }
    main {
      view-transition-name: main;
    }
    @media (prefers-reduced-motion: no-preference) {
      @view-transition {
        navigation: auto;
      }
    }
    * {
      box-sizing: border-box;
    }
    * {
      box-sizing: border-box;
    }
    @media (prefers-reduced-motion: no-preference) {
      @view-transition {
        navigation: auto;
      }
    }
    main {
      view-transition-name: main;
    }
    nav {
      view-transition-name: nav;
    }
    header {
      view-transition-name: header;
    }
    footer {
      view-transition-name: footer;
    }
    ::view-transition-group(fi),
    ::view-transition-group(main) {
      animation-duration: 1s;
    }
    ::view-transition-old(main) {
      animation-name: slideOut;
    }
    ::view-transition-new(main) {
      animation-name: slideIn;
    }
    :active-view-transition-type(backward)::view-transition-old(main) {
      animation-name: slideIn;
      animation-direction: reverse;
    }
    :active-view-transition-type(backward)::view-transition-new(main) {
      animation-name: slideOut;
      animation-direction: reverse;
    }
    @keyframes slideOut {
      to {
        transform: translateX(-100%);
      }
    }
    @keyframes slideIn {
      from {
        transform: translateX(100%);
      }
    }
    #fi {
      view-transition-name: fi;
    }
    :root {
      font-family: sans-serif;
      --background-color: #e0e0e0;
      --accent-background-color: #e0f0e0;
      --color: #444;
      --accent-color: #070;
      color: var(--color);
      background-color: var(--background-color);
      accent-color: var(--accent-color);
    }
    :root.dark {
      --background-color: #222;
      --accent-background-color: #333;
      --color: #ddd;
      --accent-color: #dfd;
    }
    footer,
    header {
      position: fixed;
      width: 100%;
      height: 6.66rem;
      top: 0;
      background-color: var(--background-color);
      padding: 1rem;
      display: flex;
      justify-content: space-between;
      background-color: #eeec;
      backdrop-filter: blur(2px);
    }
    [data-theme="dark"] :is(footer, header) {
      background-color: #111c;
    }
    footer {
      top: unset;
      height: 4rem;
      bottom: 0;
    }
    button {
      background-color: var(--accent-background-color);
      accent-color: var(--accent-color);
      color: var(--color);
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 1rem;
      margin: 1em;
      padding: 0.5em 1em;
      box-shadow: 0 4px 6px #8888;
      cursor: pointer;
    }
    header div {
      flex: 1 1 0%;
    }
    nav {
      position: fixed;
      top: 6.66rem;
      background-color: var(--accent-background-color);
      overflow: auto;
    }
    nav a {
      display: block;
      text-decoration: none;
      padding: 0.5rem;
    }
    main {
      scroll-padding-top: 6.66rem;
      padding: 1rem;
      padding-left: 80px;
      overflow: auto;
    }
    #all {
      max-width: 50rem;
      margin: auto;
    }
    #mid {
      display: flex;
      height: 70vh;
    }
    #back {
      display: inline-block;
      color: black;
      border-radius: 8px;
      padding: 1rem;
      margin: 1rem;
      background: linear-gradient(45deg, #ff6b6b, #f06595, #cc5de8);
      box-shadow: 0 4px 6px #8888;
    }
    #dark,
    #light {
      display: none;
    }
    :root.dark #dark,
    :root:not(.dark) #light {
      display: inline;
    }
    p.lorem,
    p.desc {
      line-height: 2;
      font-size: 1.2rem;
      max-width: 640px;
      margin: 40px 10vw;
    }
    p.desc {
      color: var(--accent-color);
      line-height: 1.8rem;
    }
    #outerouter {
      max-width: 640px;
      margin: 0 10vw;
      margin-top: 0;
    }
    #container #outerouter {
      margin: 0;
    }
    #outer {
      width: 100px;
      height: 200px;
      margin: 0 auto;
      overflow: hidden;
    }
    #dia {
      display: flex;
      width: 500px;
      animation: hshift 5s infinite linear;
    }
    #screen {
      position: relative;
      z-index: 10;
      top: -200px;
      width: 100px;
      height: 100px;
      background-color: #fff8;
      border: 3px solid #8888;
      border-radius: 10px;
      animation: vshift 5s infinite linear;
      color: black;
      padding-top: 3.5rem;
      padding-left: 1em;
    }
    #dia div {
      height: 200px;
      width: 100px;
      color: #222;
      border: 1px solid #888;
      padding: 1em 0.5rem;
    }
    #dia :is(div:nth-child(1), div:nth-child(5)) {
      background: linear-gradient(180deg, #8fc 0%, #8fc 80%, red 100%);
    }
    #dia div:nth-child(2) {
      background: linear-gradient(0deg, #8cf 0%, #8cf 80%, red 100%);
    }
    #dia div:nth-child(3) {
      background: linear-gradient(180deg, #8cf 0%, #8cf 80%, red 100%);
    }
    #dia div:nth-child(4) {
      background: linear-gradient(0deg, #8fc 0%, #8fc 80%, red 100%);
    }
    @keyframes hshift {
      10% {
        transform: translateX(0px);
      }
      25% {
        transform: translateX(-100px);
      }
      35% {
        transform: translateX(-100px);
      }
      50% {
        transform: translateX(-200px);
      }
      60% {
        transform: translateX(-200px);
      }
      75% {
        transform: translateX(-300px);
      }
      85% {
        transform: translateX(-300px);
      }
      100% {
        transform: translateX(-400px);
      }
    }
    @keyframes vshift {
      10% {
        transform: translateY(0px);
      }
      25% {
        transform: translateY(100px);
      }
      35% {
        transform: translateY(100px);
      }
      50% {
        transform: translateY(0px);
      }
      60% {
        transform: translateY(0px);
      }
      75% {
        transform: translateY(100px);
      }
      85% {
        transform: translateY(100px);
      }
      100% {
        transform: translateY(0px);
      }
    }
    @keyframes oVshift {
      10% {
        transform: translateY(0px);
      }
      25% {
        transform: translateY(-100px);
      }
      35% {
        transform: translateY(-100px);
      }
      50% {
        transform: translateY(0px);
      }
      60% {
        transform: translateY(0px);
      }
      75% {
        transform: translateY(-100px);
      }
      85% {
        transform: translateY(-100px);
      }
      100% {
        transform: translateY(0px);
      }
    }
    @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);
      }
    }
    #bot {
      scroll-margin-top: 6.66rem;
    }
    #bot {
      scroll-margin-top: 6.66rem;
    }
    @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 oVshift {
      10% {
        transform: translateY(0px);
      }
      25% {
        transform: translateY(-100px);
      }
      35% {
        transform: translateY(-100px);
      }
      50% {
        transform: translateY(0px);
      }
      60% {
        transform: translateY(0px);
      }
      75% {
        transform: translateY(-100px);
      }
      85% {
        transform: translateY(-100px);
      }
      100% {
        transform: translateY(0px);
      }
    }
    @keyframes vshift {
      10% {
        transform: translateY(0px);
      }
      25% {
        transform: translateY(100px);
      }
      35% {
        transform: translateY(100px);
      }
      50% {
        transform: translateY(0px);
      }
      60% {
        transform: translateY(0px);
      }
      75% {
        transform: translateY(100px);
      }
      85% {
        transform: translateY(100px);
      }
      100% {
        transform: translateY(0px);
      }
    }
    @keyframes hshift {
      10% {
        transform: translateX(0px);
      }
      25% {
        transform: translateX(-100px);
      }
      35% {
        transform: translateX(-100px);
      }
      50% {
        transform: translateX(-200px);
      }
      60% {
        transform: translateX(-200px);
      }
      75% {
        transform: translateX(-300px);
      }
      85% {
        transform: translateX(-300px);
      }
      100% {
        transform: translateX(-400px);
      }
    }
    #dia div:nth-child(4) {
      background: linear-gradient(0deg, #8fc 0%, #8fc 80%, red 100%);
    }
    #dia div:nth-child(3) {
      background: linear-gradient(180deg, #8cf 0%, #8cf 80%, red 100%);
    }
    #dia div:nth-child(2) {
      background: linear-gradient(0deg, #8cf 0%, #8cf 80%, red 100%);
    }
    #dia :is(div:nth-child(1), div:nth-child(5)) {
      background: linear-gradient(180deg, #8fc 0%, #8fc 80%, red 100%);
    }
    #dia div {
      height: 200px;
      width: 100px;
      color: #222;
      border: 1px solid #888;
      padding: 1em 0.5rem;
    }
    #screen {
      position: relative;
      z-index: 10;
      top: -200px;
      width: 100px;
      height: 100px;
      background-color: #fff8;
      border: 3px solid #8888;
      border-radius: 10px;
      animation: vshift 5s infinite linear;
      color: black;
      padding-top: 3.5rem;
      padding-left: 1em;
    }
    #dia {
      display: flex;
      width: 500px;
      animation: hshift 5s infinite linear;
    }
    #outer {
      width: 100px;
      height: 200px;
      margin: 0 auto;
      overflow: hidden;
    }
    #container #outerouter {
      margin: 0;
    }
    #outerouter {
      max-width: 640px;
      margin: 0 10vw;
      margin-top: 0;
    }
    p.desc {
      color: var(--accent-color);
      line-height: 1.8rem;
    }
    p.lorem,
    p.desc {
      line-height: 2;
      font-size: 1.2rem;
      max-width: 640px;
      margin: 40px 10vw;
    }
    :root.dark #dark,
    :root:not(.dark) #light {
      display: inline;
    }
    #dark,
    #light {
      display: none;
    }
    #back {
      display: inline-block;
      color: black;
      border-radius: 8px;
      padding: 1rem;
      margin: 1rem;
      background: linear-gradient(45deg, #ff6b6b, #f06595, #cc5de8);
      box-shadow: 0 4px 6px #8888;
    }
    #mid {
      display: flex;
      height: 70vh;
    }
    #all {
      max-width: 50rem;
      margin: auto;
    }
    main {
      scroll-padding-top: 6.66rem;
      padding: 1rem;
      padding-left: 80px;
      overflow: auto;
    }
    nav a {
      display: block;
      text-decoration: none;
      padding: 0.5rem;
    }
    nav {
      position: fixed;
      top: 6.66rem;
      background-color: var(--accent-background-color);
      overflow: auto;
    }
    header div {
      flex: 1 1 0%;
    }
    button {
      background-color: var(--accent-background-color);
      accent-color: var(--accent-color);
      color: var(--color);
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 1rem;
      margin: 1em;
      padding: 0.5em 1em;
      box-shadow: 0 4px 6px #8888;
      cursor: pointer;
    }
    footer {
      top: unset;
      height: 4rem;
      bottom: 0;
    }
    [data-theme="dark"] :is(footer, header) {
      background-color: #111c;
    }
    footer,
    header {
      position: fixed;
      width: 100%;
      height: 6.66rem;
      top: 0;
      background-color: var(--background-color);
      padding: 1rem;
      display: flex;
      justify-content: space-between;
      background-color: #eeec;
      backdrop-filter: blur(2px);
    }
    :root.dark {
      --background-color: #222;
      --accent-background-color: #333;
      --color: #ddd;
      --accent-color: #dfd;
    }
    :root {
      font-family: sans-serif;
      --background-color: #e0e0e0;
      --accent-background-color: #e0f0e0;
      --color: #444;
      --accent-color: #070;
      color: var(--color);
      background-color: var(--background-color);
      accent-color: var(--accent-color);
    }
    #fi {
      view-transition-name: fi;
    }
    @keyframes slideIn {
      from {
        transform: translateX(100%);
      }
    }
    @keyframes slideOut {
      to {
        transform: translateX(-100%);
      }
    }
    :root.vtbag-vtt-backward::view-transition-new(main) {
      animation-name: slideOut;
      animation-direction: reverse;
    }
    :root.vtbag-vtt-backward::view-transition-old(main) {
      animation-name: slideIn;
      animation-direction: reverse;
    }
    ::view-transition-new(main) {
      animation-name: slideIn;
    }
    ::view-transition-old(main) {
      animation-name: slideOut;
    }
    ::view-transition-group(fi),
    ::view-transition-group(main) {
      animation-duration: 1s;
    }
    footer {
      view-transition-name: footer;
    }
    header {
      view-transition-name: header;
    }
    nav {
      view-transition-name: nav;
    }
    main {
      view-transition-name: main;
    }
    @media (prefers-reduced-motion: no-preference) {
      @view-transition {
        navigation: auto;
      }
    }
    * {
      box-sizing: border-box;
    }
    * {
      box-sizing: border-box;
    }
    @media (prefers-reduced-motion: no-preference) {
      @view-transition {
        navigation: auto;
      }
    }
    main {
      view-transition-name: main;
    }
    nav {
      view-transition-name: nav;
    }
    header {
      view-transition-name: header;
    }
    footer {
      view-transition-name: footer;
    }
    ::view-transition-group(fi),
    ::view-transition-group(main) {
      animation-duration: 1s;
    }

    ::view-transition-old(main) {
      animation-name: slideOut;
    }
    ::view-transition-new(main) {
      animation-name: slideIn;
    }

    :root.vtbag-vtt-backward::view-transition-old(main) {
      animation-name: slideIn;
      animation-direction: reverse;
    }
    :root.vtbag-vtt-backward::view-transition-new(main) {
      animation-name: slideOut;
      animation-direction: reverse;
    }

    @keyframes slideOut {
      to {
        transform: translateX(-100%);
      }
    }
    @keyframes slideIn {
      from {
        transform: translateX(100%);
      }
    }
    #fi {
      view-transition-name: fi;
    }

    :root {
      font-family: sans-serif;
      --background-color: #e0e0e0;
      --accent-background-color: #e0f0e0;
      --color: #444;
      --accent-color: #070;
      color: var(--color);
      background-color: var(--background-color);
      accent-color: var(--accent-color);
    }
    :root.dark {
      --background-color: #222;
      --accent-background-color: #333;
      --color: #ddd;
      --accent-color: #dfd;
    }
    footer,
    header {
      position: fixed;
      width: 100%;
      height: 6.66rem;
      top: 0;
      background-color: var(--background-color);
      padding: 1rem;
      display: flex;
      justify-content: space-between;
      background-color: #eeec;
      backdrop-filter: blur(2px);
    }

    [data-theme="dark"] :is(footer, header) {
      background-color: #111c;
    }

    footer {
      top: unset;
      height: 4rem;
      bottom: 0;
    }
    button {
      background-color: var(--accent-background-color);
      accent-color: var(--accent-color);
      color: var(--color);
      border: none;
      border-radius: 4px;
      cursor: pointer;
      font-size: 1rem;
      margin: 1em;
      padding: 0.5em 1em;
      box-shadow: 0 4px 6px #8888;
      cursor: pointer;
    }
    header div {
      flex: 1 1 0%;
    }
    nav {
      position: fixed;
      top: 6.66rem;
      background-color: var(--accent-background-color);
      overflow: auto;
    }
    nav a {
      display: block;
      text-decoration: none;
      padding: 0.5rem;
    }
    main {
      scroll-padding-top: 6.66rem;
      padding: 1rem;
      padding-left: 80px;
      overflow: auto;
    }
    #all {
      max-width: 50rem;
      margin: auto;
    }
    #mid {
      display: flex;
      height: 70vh;
    }
    #back {
      display: inline-block;
      color: black;
      border-radius: 8px;
      padding: 1rem;
      margin: 1rem;
      background: linear-gradient(45deg, #ff6b6b, #f06595, #cc5de8);
      box-shadow: 0 4px 6px #8888;
    }
    #dark,
    #light {
      display: none;
    }
    :root.dark #dark,
    :root:not(.dark) #light {
      display: inline;
    }
    p.lorem,
    p.desc {
      line-height: 2;
      font-size: 1.2rem;
      max-width: 640px;
      margin: 40px 10vw;
    }
    p.desc {
      color: var(--accent-color);
      line-height: 1.8rem;
    }
    #outerouter {
      max-width: 640px;
      margin: 0 10vw;
      margin-top: 0;
    }
    #container #outerouter {
      margin: 0;
    }

    #outer {
      width: 100px;
      height: 200px;
      margin: 0 auto;
      overflow: hidden;
    }
    #dia {
      display: flex;
      width: 500px;
      animation: hshift 5s infinite linear;
    }
    #screen {
      position: relative;
      z-index: 10;
      top: -200px;
      width: 100px;
      height: 100px;
      background-color: #fff8;
      border: 3px solid #8888;
      border-radius: 10px;
      animation: vshift 5s infinite linear;
      color: black;
      padding-top: 3.5rem;
      padding-left: 1em;
    }
    #dia div {
      height: 200px;
      width: 100px;
      color: #222;
      border: 1px solid #888;
      padding: 1em 0.5rem;
    }

    #dia :is(div:nth-child(1), div:nth-child(5)) {
      background: linear-gradient(180deg, #8fc 0%, #8fc 80%, red 100%);
    }
    #dia div:nth-child(2) {
      background: linear-gradient(0deg, #8cf 0%, #8cf 80%, red 100%);
    }
    #dia div:nth-child(3) {
      background: linear-gradient(180deg, #8cf 0%, #8cf 80%, red 100%);
    }
    #dia div:nth-child(4) {
      background: linear-gradient(0deg, #8fc 0%, #8fc 80%, red 100%);
    }

    @keyframes hshift {
      10% {
        transform: translateX(0px);
      }
      25% {
        transform: translateX(-100px);
      }
      35% {
        transform: translateX(-100px);
      }
      50% {
        transform: translateX(-200px);
      }
      60% {
        transform: translateX(-200px);
      }
      75% {
        transform: translateX(-300px);
      }
      85% {
        transform: translateX(-300px);
      }
      100% {
        transform: translateX(-400px);
      }
    }
    @keyframes vshift {
      10% {
        transform: translateY(0px);
      }
      25% {
        transform: translateY(100px);
      }
      35% {
        transform: translateY(100px);
      }
      50% {
        transform: translateY(0px);
      }
      60% {
        transform: translateY(0px);
      }
      75% {
        transform: translateY(100px);
      }
      85% {
        transform: translateY(100px);
      }
      100% {
        transform: translateY(0px);
      }
    }
    @keyframes oVshift {
      10% {
        transform: translateY(0px);
      }
      25% {
        transform: translateY(-100px);
      }
      35% {
        transform: translateY(-100px);
      }
      50% {
        transform: translateY(0px);
      }
      60% {
        transform: translateY(0px);
      }
      75% {
        transform: translateY(-100px);
      }
      85% {
        transform: translateY(-100px);
      }
      100% {
        transform: translateY(0px);
      }
    }
    @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);
      }
    }
    #bot {
      scroll-margin-top: 6.66rem;
    }