@import "fonts"

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

$bg_clr: #ffffff
$bg_alt_clr: #f7f7f8
$bg_dark_clr: #f0f0f1
$fg_clr: #191927
$fg_alt_clr: #fff
$fg_error: #f77 

$shadow_clr: $bg_dark_clr
$border_clr: $bg_alt_clr
$green_clr: #5cb85c
$red_clr: #de2a1d
$gray_clr: #888

$special_clr: #4776C1

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

* 
  margin: 0

html 
  background-color: $bg_clr 

.content-container
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center
  width: auto 
  height: 100% 

  header
    background: $bg_clr
    margin-bottom: 2rem

    h1
      text-align: center

.fade-in
  animation: fade-in .5s ease-in alternate

// Layout
body
  margin: 0
  height: 100% 

header
  background-color: $bg_clr
  padding: .1rem .8rem 
  white-space: nowrap
  border-bottom: $border_size solid $shadow_clr
  img.avatar
    transition: border .2s

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

  div
    display: flex
    max-width: 70rem
    margin: 0 auto
    align-items: center
    justify-content: center

    #logo_container
      display: flex
      flex-direction: column 
      margin: 0
      text-decoration: none
      color: $fg_clr
      h1
        margin: 0
        font-size: 1.2rem
        font-weight: bold
      h2 
        margin: 0
        font-size: .8rem
        font-style: italic
        font-weight: normal

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

        li   
          display: flex
          flex-direction: column
          justify-content: center
          margin: 0 8px

        li.coins
          color: $green_clr

article.index
  width: 70rem
  h1
    font-size: 2rem
  p 
    opacity: .7
    padding: 0 10rem

article.index:not(:last-child)
  margin-bottom: 4rem

h1.title
  border-bottom: $border_size solid $shadow_clr

.inlbutton
  font-weight: bold
  text-decoration: none
  color: $fg_clr
  transition: opacity .2s

.inlbutton:hover
  opacity: .6

a.button
  display: inline-block
  font-size: 1rem
  font-weight: bold
  text-decoration: none
  padding: .4rem 1rem
  color: $fg_clr
  border-radius: 3em
  transition: opacity .2s

a.button:hover
  cursor: pointer
  opacity: .6

.button#register
  color: $fg_alt_clr
  background-color: $special_clr

.flash
  position: fixed
  text-align: center
  top: 4rem
  left: 50%
  transform: translateX(-50%)
  font-size: 1rem
  font-weight: bold
  animation: fade-in .9s ease-in alternate
  background: $bg_clr
  transition: .4s opacity 

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

  &-error
    color: $fg_error
    padding: 8px
    border: $border_size solid $red_clr
    border-radius: $border_radius

  &-success
    color: $green_clr
    padding: 8px
    border: $border_size solid $green_clr
    border-radius: $border_radius

.flash:hover
  cursor: pointer
  opacity: .5

img.avatar, img.avatar_big
  background: $bg_clr
  width: 2.25rem
  height: 2.25rem
  object-fit: cover
  border-radius: 50%
  border: 2px solid $border_clr

img.avatar_big
  width: 8.15rem
  height: 8.15rem

img.icon
  width: 1rem
  height: auto
  opacity: .75

img.icon-invert
  -webkit-filter: invert(100%)
  filter: invert(100%)
  
.tcenter
  text-align: center

.hcenter
  width: 90%
  margin: 0 auto

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
    flex-direction: column
    padding: .025rem .4rem
    color: $fg_clr
    background: $bg_dark_clr
    border-radius: $border_radius

  li.em
    background: $special_clr
    a
      color: #fff

ul.list-container
  display: flex
  flex-direction: column 
  padding: 0
  margin: 0
  list-style-type: none
  height: 15rem
  overflow-y: scroll

  li
    display: flex

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

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

    textarea
      background-color: $bg_dark_clr
      font-size: 1rem
      resize: none
      border: $border_size solid $border_clr
      border-radius: $border_radius
      margin-bottom: 1rem

    label
      opacity: .8

    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: $border_radius 
      background: $bg_dark_clr
      border: $border_size solid $shadow_clr
      color: $fg_clr
      font-family: $font_stack
      font-size: 1.2rem
      padding: .2rem 1rem

    input[type=file]
      padding: 0
      font-size: .9rem

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

    input[type=submit]:hover
      opacity: .8
      color: $special_clr
      cursor: pointer

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

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

.card-container
  padding: 0 1rem

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

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

  aside
    display: flex
    flex-direction: column
    align-items: center
    margin-right: 2rem
    width: 300px
    #userinfo
      margin-bottom: 1.75rem
      text-align: center
      width: 250px
      word-wrap: wrap
      h2
        padding: 0
        text-align: center
        font-size: 100%
        font-weight: bold
        border-bottom: none
        border-bottom: $border_size solid $shadow_clr
      h3
        text-align: center
        font-size: .8rem
        margin: 0 0 1rem 0
        font-weight: normal
        color: $fg_clr
        opacity: .5
      h4
        font-weight: normal
        font-size: .8rem
        max-width: 250px
      ul
        margin: 1rem 0
        flex-wrap: nowrap
      p
        text-align: center
        color: $fg_clr
        max-width: 20rem
      .avatar-container
        display: flex
        justify-content: center
        margin-bottom: 1rem
        img.avatar
          width: 70%
          max-width: 12rem
          height: auto
          aspect-ratio: 1/1
          border: 2px solid $gray_clr

    #roles
      margin-bottom: 1.75rem

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

  #posts
    min-height: 14rem
    max-height: 50rem
    width: 100%

    .card-container
      margin-bottom: 4rem
      padding-bottom: 2rem


#settings
  .form-container
    .error_msg
      margin-bottom: .8rem
      color: $red_clr
    form
      background-color: $bg_alt_clr
      //border: $border_size solid $border_clr

      input[type=text]
        padding: 0 .2rem
        border: $border_size solid $border_clr

#admin-panel
  h2
    text-align: center
    border-bottom: $border_size solid $shadow_clr

.management-container
  display: flex
  flex-wrap: wrap
  justify-content: center

  article
    margin: 2rem

    .list-container
      padding: 1rem
      li
        a
          margin-left: 1rem

// Auctions
#auctions
  display: flex
  flex-direction: column

// Animation keyframes
@keyframes fade-in
  0%
    opacity: 0
  100%
    opacity: 1