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

body, .social-links, .social-link a
  text-shadow: -1px 1px #e1b027, 1px -1px #00ddff

a
  text-decoration: none
  color: #e7dede
  outline: none
  &:hover
    color: gold

p
  font-family: sans
  text-shadow: none
  b
    font-family: "Anton", Impact, fantasy, sans-serif
    text-shadow: -1px 1px #e1b027, 1px -1px #00ddff

h1
  font-size: 7vmin
  margin-bottom: 0
  font-family: "Press Start 2P", "Anton", Impact, fantasy, sans-serif

// h2
  margin-bottom: 0

a
  text-shadow: none

header
  .home-link
    font-family: "Press Start 2P", "Anton", Impact, fantasy, sans-serif
    margin-left: 0
    padding-left: 0
    align-self: start
  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
      padding-left: 1em
      li
        flex: 1 1 auto
        text-align: center
        &:nth-child(even)
          align-self: end

#content
  flex: 3 1 auto
  //background: hotpink
  display: flex
  flex-direction: column
  flex-wrap: wrap
  align-items: center
  background: #00ff0060
  border-radius: 0 13em 0 0
  font-size: 2em
  > h1
    align-self: start
    // padding-top: .6em
    // text-indent: .4em


#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
    text-shadow: -3px 3px #e1b027, 3px -3px #00ddff
    line-height: 1.3em

#main-menu
  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-weight: lighter
body
  font-family: "Anton", Impact, fantasy, sans-serif
.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
  .footer-tokens
    text-align: left
    a
      padding: 2em
      background: #e1b02733
      box-shadow: 0px 0px 8px #00000042
      border-radius: 12em
      display: inline-block

#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
  padding: 5em
  overflow: hidden
  border-radius: 0 8em 0 8em

.navigation-wallet
  // font-family: "Press Start 2P", "Anton", Impact, fantasy, sans-serif
  h1
    font-size: 1em
    margin-top: 0
    line-height: 2em
  font-size: 0.7em
  text-align: right
  padding: 0.5em
  background: #00ff0060
  border-radius: 0 0 0 79em
  word-wrap: break-word
  h2
    font-size: 1em
    margin: 0
    padding: 0
  span
    font-family: monospace, monospace
    text-shadow: none
    color: #111
    // font-family: "Press Start 2P", "Anton", Impact, fantasy, sans-serif


.contain
  width: 100%
  max-width: 1200px
  margin: 0 auto
  padding-left: .33em

.table-container
  max-width: 100%
  overflow-x: auto
  align-self: start

@import doodads
@import profiles
@import tokens
@import microposts
@import projects
@import rooms
@import tables
@import game