svg
  display: block
  width: auto
  height: auto
  max-width: 100%
  max-height: 100%
  margin: auto

a
  text-decoration: inherit

header
  z-index: 98
  display: flex
  overflow: visible
  justify-content: space-between
  background-color: blue
  color: white
  line-height: 1em
  h1
    z-index: 99
    font-size: 100%
    margin: 0.5em
    &::before
      width: 1em
      content: "☰"
      color: white
      margin-right: .25em
    &:hover #menu
      display: block
    #menu
      display: none
      background-color: #ccc
      color: black
      margin: 1px
      padding: 0
      border: 1px solid black
      z-index: 100
      a
        margin: 0
        padding: .5em
        &:hover
          background-color: #eee
      a + a
        border-top: 1px solid black
      &:hover
        display: block
  a
    margin: 0.5em
    display: none
    &[href]
      display: block
    &:link
      color: inherit
  #downloads, #info
    display: flex
  #clock
    margin: 0.5em
  #status
    margin: 0.5em
    &.wait
      &::before
        content: "⌛"
        color: inherit
    &.error
      &::before
        content: "✘"
        color: red
    &.success
      &::before
        content: "✔"
        color: green
  #orientation
    margin: 0.5em
    &.lr
      &::before
        content: "→"
    &.tb
      &::before
        content: "↓"
    &.rl
      &::before
        content: "←"
    &.bt
      &::before
        content: "↑"
    
#error
  display: none
  background-color: red

.top
  header
    position: absolute
    top: 0
    left: 0
    width: 100%
    height: 2em
    #menu
      position: absolute
  main
    position: absolute
    top: 2em
    left: 0
    right: 0
    bottom: 0
    overflow: auto

.bottom
  header
    position: absolute
    bottom: 0
    left: 0
    width: 100%
    height: 2em
    #menu
      position: absolute
      transform: translate(0, -100%) translate(0, -1em)
  main
    position: absolute
    top: 0
    left: 0
    right: 0
    bottom: 2em
    overflow: auto

.left
  header
    transform: translate(-50%) translate(1em) rotate(270deg) translate(-50%) translate(1em)
    position: absolute
    top: 0
    left: 0
    width: 100vh
    height: 2em
    #orientation
      transform: rotate(90deg)
   #menu
      position: absolute
      left: -3em
      transform: rotate(90deg) translate(50%) translate(-2em)
  main
    position: absolute
    top: 0
    right: 0
    left: 2em
    bottom: 0

.right
  header
    position: absolute
    top: 0
    right: 0
    width: 100vh
    height: 2em
    transform: translate(50%) translate(-1em) rotate(90deg) translate(50%) translate(-1em)
    #orientation
      transform: rotate(270deg)
    #menu
      position: absolute
      left: -3em
      transform: rotate(270deg) translate(-50%) translate(2em)
  main
    position: absolute
    top: 0
    left: 0
    right: 2em
    bottom: 0
    overflow: auto
  
#image
  height: 100%
  
div#loading
  text-align: center
  margin-top: 40vh
  font-size: 200%