html
  background: black
  color: white
  font: 14px/1.5 "Helvetica Neue", Arial, sans-serif

body
  margin: 0

h1
  margin: 0

h2
  line-height: inherit

.readymade-site-background
  background-color: MEDIUM_GRAY
  background-position: 50% 33%
  background-size: cover
  bottom: 0
  left: 0
  opacity: 0.33
  position: fixed
  right: 0
  top: 0
  transition: opacity 0.5s

  [data-location-hash="#/"] &
    opacity: 1

.readymade-site-background-effect
  background:
    radial-gradient(rgba(MEDIUM_GRAY, 0), black),
    url("./black-pixel-screen.png")
  bottom: 0
  left: 0
  opacity: 0
  position: absolute
  right: 0
  top: 0
  transition: opacity 1s

  [data-location-hash="#/"] &
    opacity: 1

#wrapper
  display: flex
  flex-direction: column
  min-height: 1px
  position: relative

  html:not(.isMobileSafari) &
    min-height: 100vh

#main-container
  display: flex
  flex: 1 0 auto
  flex-direction: column

#main-header
  flex-shrink: 0

#main-content
  flex: 1 0 auto

#main-footer
  flex-shrink: 0

h1
  font-weight: 100
  font-size: 64px
  line-height: 1

h2
  font-weight: 100
  font-size: 36px
  line-height: 1

h3
  font-weight: normal
  letter-spacing: 2px
  text-transform: uppercase

hr
  border: 1px solid
  border-width: 1px 0 0 0
  color: inherit

a
  color: lime

.readymade-main-stack
  display: flex
  flex-direction: column
  flex: 1
  margin: 20px auto
  width: 90vw

.readymade-subnav
  border-top: 1px solid
  margin-top: -1em
  text-align: right

  > a
    background: white
    color: black
    display: inline-block
    font-size: 0.8em
    font-weight: bold
    letter-spacing: 1px
    padding: 0.25em 1em
    text-decoration: none
    text-transform: uppercase

.readymade-generic-page
  img
    display: block
    margin: 0 auto
    max-width: 80%

[role=tabPanel]
  &[aria-selected=false]
    display: none

  &[aria-selected=true]
    display: block