@view-transition {
  navigation: auto;
}

.top-bar {
  view-transition-name: main-header;
}

.content {
  view-transition-name: main-content;
}

::view-transition-old(main-header),
::view-transition-new(main-header) {
  animation: none;
  mix-blend-mode: normal;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
}

::view-transition-old(main-content),
::view-transition-new(main-content) {
  mix-blend-mode: normal;
}

::view-transition-old(main-content) {
  animation: 300ms linear forwards slide-out-left;
}

::view-transition-new(main-content) {
  animation: 300ms linear forwards slide-in-right;
}

@keyframes slide-out-left {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes slide-in-right {
  from {
    transform: translateX(100%);
  }
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.app-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.top-bar img {
  width: 100%;
  display: block;
}

.content {
  flex: 1;
  overflow-y: auto;
}