@import "fonts"

$font_stack: "Space Mono", monospace
$bg_clr: #272a34
$bg_alt_clr: #232730
$bg_dark_clr: #21242e
$fg_clr: #fff
$fg_alt_clr: #eee
$fg_error: #f77 

$shadow_clr: #4b5263 

$special_btn_clr: #4776C1

\:root
  display: border-box
  margin: 0
  padding: 0
  font-family: $font_stack
  font-size: 16px
  color: $fg_clr

html 
  background-color: $bg_clr 

.content-container
  display: flex
  flex-direction: column
  justify-content: center
  width: auto 
  height: 90% 

body
  margin: 0
  height: 100% 

  header
    height: 55px
    background-color: $bg_dark_clr
    //border-bottom: 1px solid $shadow_clr
    padding: .1rem .8rem .1rem .8rem
    white-space: nowrap

    div
      display: flex
      max-width: 70rem
      margin: 0 auto

      #logo_container
        display: flex
        flex-direction: column 
        margin: 0
        text-decoration: none
        color: $fg_clr

        h1
          margin: 0
          opacity: .8
          font-size: 1.2rem
          font-weight: bold

        h2 
          margin: 0
          opacity: .2
          font-size: .8rem
          font-style: italic
          font-weight: normal

      nav
        display: flex
        align-items: center
        margin: 0 0 0 auto
        padding: 8px
        padding-right: 0
        
        ul
          margin: 0
          display: flex
          flex-direction: row 
          list-style-type: none
          justify-content: flex-end

          li   
            margin: 0 8px

#login
  color: $fg_alt_clr
  background-color: $special_btn_clr 

a.button
  display: inline-block
  text-decoration: none
  padding: .4rem 1rem 
  color: $fg_clr
  border-radius: .25rem
  transition: opacity .2s

a.button:hover
  opacity: .6

label.error_msg
  color: $fg_error
  font-size: 1rem
  font-weight: bold

img.avatar
  background: $shadow_clr
  width: 2.15rem 
  height: auto
  border-radius: 50%
  border: 2px solid $shadow_clr
  transition: border .2s

img.avatar:hover
  border: 2px solid $special_btn_clr

.form-container
  display: flex
  justify-content: center

  form
    display: flex
    flex-direction: column
    justify-content: center
    padding: 2rem
    margin: 0
    width: 60%
    max-width: 400px
    border-radius: .4rem

    a
      color: $special_btn_clr
      padding: .2rem 0

    h2
      margin: 0
      margin-bottom: 2.5rem
      text-align: center
      font-weight: bold
      font-size: 2.2rem

    input
      border-radius: .25rem
      background: $bg_alt_clr
      border: 3px solid $shadow_clr
      color: $fg_alt_clr
      font-family: $font_stack
      font-size: 1.2rem
      padding: .2rem 1rem

    input[type=submit]
      background: $bg_clr
      transition: color .2s

    input[type=submit]:hover
      opacity: .8
      color: $special_btn_clr

    input:not(:last-child)
      margin-bottom: 1rem