/*
 * 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
  h1
    font-size: 10vmin
    color: #111
    background: green
    padding: 5vmin
    margin: 0
    border: 3px solid black

#main-menu
  flex: 1 1 auto
  font-size: 5vmin
  display: flex
  flex-direction: column
  a
    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


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