@import "fonts"

$font_stack: "Space Mono", monospace
$border_radius: .25rem
$border_size: 1px

$bg_clr: #272a34
$bg_alt_clr: #232730
$bg_dark_clr: #21242e
$fg_clr: #fff
$fg_alt_clr: #eee
$fg_error: #f77 

$shadow_clr: #4b5263 
$green_clr: #5cb85c
$red_clr: #de2a1d

$special_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: row
  justify-content: center
  width: auto 
  height: 90% 

// Layout
body
  margin: 0
  height: 100% 

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

    img.avatar
      transition: border .2s

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

    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

// General
#login
  color: $fg_alt_clr
  background-color: $special_clr 

.inlbutton
  transition: opacity .2s
.inlbutton:hover
  opacity: .6

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: $bg_clr
  width: 2.15rem 
  height: auto
  border-radius: 50%
  border: 2px solid $shadow_clr

ul.button-container
  display: flex
  flex-direction: row
  justify-content: center
  padding: 0
  margin: 0
  list-style-type: none
  height: auto
  flex-wrap: wrap
  li
    display: flex
    margin: .5rem
    padding: .025rem .4rem
    flex-direction: column
    color: $fg_alt_clr
    background: $bg_alt_clr
    border: $border_size solid $shadow_clr
    border-radius: $border_radius

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

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

    a
      color: $special_clr
      padding: .2rem 0

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

    input
      border-radius: 2rem
      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_clr

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

.green
  color: $green_clr
.red
  color: $red_clr

// Profiles
#profile-container
  display: flex 
  flex-direction: row-reverse
  width: 100%
  height: 100%
  max-width: 70rem
  padding: 2rem
  padding-bottom: 0

  .card-container
    padding: 0 1rem

  .card
    background-color: $bg_dark_clr
    border: $border_size solid $shadow_clr
    border-radius: $border_radius
    h2
      text-align: left 
      padding-left: .8rem
      margin: 0
      border-bottom: $border_size solid $shadow_clr
      font-size: 1rem
      color: $fg_alt_clr

  aside
    margin-left: 2rem
    #userinfo
      margin-bottom: 1.75rem
      text-align: center
      h2
        margin: 1rem 0 0 0
        padding: 0
        text-align: center
        font-size: 1.5rem
        font-weight: bold
        border-bottom: none
      h3
        text-align: center
        font-size: .8rem
        margin: 0 0 1rem 0
        font-weight: normal
        color: $fg_alt_clr
        opacity: .5
      ul
        margin: 1rem 0
        flex-wrap: nowrap
        a.button
          padding: 0
      p
        text-align: center
        color: $fg_alt_clr
        max-width: 20rem
      .avatar-container
        display: flex
        justify-content: center
        img.avatar
          width: 70%
          height: auto
          border: 2px solid $special_clr

    #roles
      margin-bottom: 1.75rem

    #reputation
      text-align: center
      h3
        margin: 0
        font-size: 1.6rem
      h4
        margin: 0
        font-weight: normal
        color: $shadow_clr
        opacity: .8

  #bio
    min-height: 14rem
    width: 100%