/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS and SCSS file within this directory, lib/assets/stylesheets, vendor/assets/stylesheets,
 * or vendor/assets/stylesheets of plugins, if any, can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any styles
 * defined in the other CSS/SCSS files in this directory. It is generally better to create a new
 * file per style scope.
 *
 *= require_tree .
 *= require_self
 */

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

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
  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: 300px
  transition: background-color 0.2s, box-shadow 0.2s
  img
    width: 4rem
    cursor: pointer
  &:hover
    background-color: gold
    box-shadow: 1px 1px 8px 4px gold
  &.clicked
      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