@media (orientation: portrait) {

html, body {
    overflow-x: hidden;
    overflow-y: hidden;
    width: 100%;
    height: 100%;
    
}

.page {
    width: calc(100% - 3ch);
    height: calc(100% - 1.5ch);
    padding: 0.5ch;
}

.main-page {
  height: calc(100% - 16ch);
}

#primary-nav {
  top: calc(100% - 7.5ch);
  left: calc(50% + 8ch);
  rotate: 90deg;
}
#primary-nav img {
    transform: rotate(-90deg)
}

.page[state='shown'][direction='down'],
.page[state='hiding'][direction='down'],
.page[state='shown'][direction='up'],
.page[state='hiding'][direction='up'] {
  left: 0;
  top: 150vw;
  transform: translate(0, -150vw);
}

@keyframes showNavbar {
  0% {
    translate: 0 20ch;
  }
  100% {
    translate: 0 0;
  }
}
@keyframes hideNavbar {
  0% {
    translate: 0 0;
  }
  100% {
    translate: 0 20ch;
  }
}

}