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

a
  text-decoration: inherit
  color: inherit
  cursor: pointer

header
  z-index: 98
  display: flex
  overflow: visible
  justify-content: space-between
  background-color: blue
  color: white
  line-height: 1em
  cursor: grabbing
  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
      .menu
        margin: 0
        padding: .5em
        label::after
          content: ':'
          padding-right: 1ex
        &:hover
          background-color: #eee
      .menu + .menu
        border-top: 1px solid black
      &:hover
        display: block
      a
        display: none
        &[href]
          display: block
  #info
    #zoom
      margin: 0.5em
      display: flex
      a
        margin 0 0.1em
      #zoomin
        cursor: zoom-in
      #zoomreset
        cursor: pointer
      #zoomout
        cursor: zoom-out
  #downloads, #info
    display: flex
  #clock
    margin: 0.5em
  #status
    margin: 0.5em
    cursor: pointer
    &.wait
      &::before
        content: "⌛"
        color: inherit
    &.error
      &::before
        content: "✘"
        color: red
    &.success
      &::before
        content: "✔"
        color: green
    &.paused
      &::before
        content: "⏯"
        color: yellow
  #orientation
    margin: 0.5em
    cursor: pointer
    &.lr
      &::before
        content: "→"
    &.tb
      &::before
        content: "↓"
    &.rl
      &::before
        content: "←"
    &.bt
      &::before
        content: "↑"
    
#error
  display: none
  background-color: red

.top
  header
    position: fixed
    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: fixed
    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
    position: fixed
    top: 0
    left: 0
    width: 100vh
    height: 2em
    transform-origin: right top
    transform: translate(-100%) rotate(270deg)
    #orientation
      transform: rotate(90deg)
    #menu
      transform-origin: top left
      transform: rotate(90deg) translate(0, -100%)
  main
    position: absolute
    top: 0
    right: 0
    left: 2em
    bottom: 0

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

.imagecontainer
  padding: 1em
  
#image
  height: 100%
  
div#loading
  text-align: center
  margin-top: 40vh
  font-size: 200%