html
  box-sizing: border-box
  //display: flex
  justify-content: center
  min-height: 100vh

body
  //flex: 1 1 auto
  display: flex
  flex-direction: column
  min-height: 100vh
  margin: 0
  background: image-url('backgrounds/felt-green.png')
  font-size: 2vmin
  // overflow: hidden

a
  text-decoration: none
  color: white
  outline: none
  &:hover
    color: yellow

h1
  font-size: 7vmin
  margin: 0 0 5vmin 0

header
  font-size: 3vmin
  // margin-bottom: 10vmin
  nav
    padding: 1vmin
    background: #222
    //position: fixed
    top: 0
    transition: top 0.2s ease-in-out
    width: 100%
    &.nav-up
      top: -40px
    ul
      margin: 0
      display: flex
      li
        flex: 1 1 auto
        text-align: center

#content
  flex: 3 1 auto
  //background: hotpink
  display: flex
  flex-direction: column
  flex-wrap: wrap
  align-items: center


#home-headline, .home-headline
  margin-top: 6em
  flex: 1 1 auto
  text-align: center
  z-index: 10
  cursor: pointer
  h1
    font-size: 10vmin
    color: #111
    background: green
    padding: 5vmin
    margin: 0
    border: 3px solid black
    background-color: #33cc3399

#main-menu
  // transition: all 12s ease-out
  // padding: 40px
  // bottom: 0
  // position: relative
  // display: inline-block
  // margin-top: 15em
  // top: 97px
  flex: 1 1 auto
  font-size: 5vmin
  display: flex
  flex-direction: column
  z-index: 10
  background: #00ff33
  background: #00000066
  border-radius: 100px 100px 0 0
  padding: 2em
  a
    display:inline
    background: green
    margin: 4px 0 4px
    padding: 8px
    border: 2px solid black
    text-align: center
    &:hover
      background: #ffffff44
      color: yellow
    &:active
      background: (#bada55 + 100)

*, *:before, *:after
  box-sizing: inherit
  font-family: Impact, Anton, fantasy, sans-serif
  font-weight: lighter
.eyecandy
  display: block
  left: 0
  position: absolute
  top: 0
  // background-color: hotpink
  border-radius: 10em
  overflow: hidden
  &.icypepe
    zoom: 70%
    border-radius: 600em
    padding: 1em 5em 1em 2em
    cursor: pointer
    transition: background-color 0.2s, box-shadow 0.2s
    svg
      zoom: 80%
    &:hover
      background-color: gold
      box-shadow: 1px 1px 8px 4px gold
  img
    cursor: pointer
    transition: background-color 0.2s, box-shadow 0.2s
    &:hover
      background-color: gold
      box-shadow: 1px 1px 8px 4px gold
  img
    width: 4rem
    padding: 0.2em
  &.clicked
    img, &.icypepe
      background-color: #00ffff
      box-shadow: 0px 0px 8px 4px #00ffff

li
  list-style: none

.alert
  padding: 1em
  background: #ffffff77
  font-size: 1.2rem
  color: #ffffff
  text-shadow: 0 0 3px black
  letter-spacing: 0.3

footer
  padding: 2em 3em
  text-align: right
  background: #00000066
  a
    img
      width: 4em
      height: 4em

#skyspaces
  width: 100%
  height: 100%

.hide
  display: none

.video-cover
  position: absolute
  z-index: 2
  top: 0
  left: 0
  width: 100%
  height: 100%
#videoplayer
  position: absolute
  z-index: 1
  top: 0
  left: 0
  width: 100%
  height: 100%
  object-fit: fill

// form
  width: 100%
  padding: 1em

textarea
  width: 100%
  min-height: 8em

.navigation-wallet
  text-align: right
  padding: 0.5em

@import doodads