@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
$yellow_clr: #FFBF00
$gray_clr: #888

$special_clr: #4776C1

$header_height: 4rem

\: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 
  scroll-behavior: smooth

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

.fade-in
  height: calc(100% - #{$header_height})
  animation: fade-in .5s ease-in alternate

// Layout
body
  margin: 0
  height: 100% 

header
  display: flex
  align-items: center
  background-color: $bg_clr
  white-space: nowrap
  border-bottom: $border_size solid $shadow_clr
  height: calc(#{$header_height} - #{$border_size})
  img.avatar
    transition: border .2s

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

  div
    display: flex
    flex: 1
    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
  transition: .1s opacity 
  overflow: hidden

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

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

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

.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
  form
    display: flex
    flex-direction: column
    justify-content: center
    padding: 1rem
    margin: 0
    width: 50rem
    max-width: 400px
    border-radius: .2rem

    .range-container
      display: flex
      flex-direction: row
      align-items: center
      label
        opacity: .4
        height: 2rem
      input
        margin: 0 1rem !important
        width: 40%
        height: 2rem

    .checkbox-container
      input[type=checkbox]
        margin: 0 .5rem

    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
.yellow
  color: $yellow_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%

    h3.tcenter
      opacity: .4
      font-weight: normal
      margin: 42% 0
      
    

#settings
    form
      background-color: $bg_alt_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

.info-container
  display: flex
  flex-direction: column
  justify-content: center

// Auctions
#auctions
  display: flex
  flex-direction: row
  justify-content: center
  height: inherit
  max-width: 70rem

  a.button
    border: $border_size solid $shadow_clr
    border-radius: $border_radius

  aside.card
    width: 40rem
    margin-right: 4rem 
    margin-top: 8rem
    .form-container
      form
        padding: 0
        width: inherit

article.post-container
  height: 90%
  ul 
    height: 100%

    li:hover
      border: $border_size solid $special_clr
      cursor: pointer

    li
      margin-top: 1.2rem
      border: $border_size solid $border_clr
      border-radius: $border_radius
      min-height: 8rem
      transition: .2s border
      a
        display: grid
        grid-template-rows: 1fr
        grid-template-columns: 14rem 2fr 
        grid-template-areas: "im in"
        text-decoration: none
        color: $fg_clr

        .info-container
          grid-area: in
          margin-left: 1rem

          h3
            font-weight: normal

          p
            width: 30rem 
            white-space: nowrap
            text-overflow: ellipsis
            overflow: hidden

        div
          grid-area: im
          border-radius: $border_radius
          height: 100%
          background-repeat: no-repeat
          background-position: center
          background-size: cover

#auctions_new
  display: grid


#auction-view
  display: grid
  max-width: 70rem
  grid-template-columns: 1fr 1fr
  grid-template-rows: 1fr 
  grid-template-areas: "im in" "bi bi"

#auctionbid-container
  grid-area: bi
  font-weight: normal

  ul li
    display: flex
    flex-direction: column
    border-bottom: $border_size solid $shadow_clr

  h3
    color: $fg_clr 
    span
      color: $green_clr
  h4
    color: $gray_clr

#auctioninfo
  grid-area: in
  
  div
    margin-top: 1.2rem

  h2
    display: flex
    font-size: 1.25rem
    padding: 0

    a.inlbutton
      margin-left: 2rem 
      font-weight: normal

  h3
    font-size: 1rem
    font-weight: normal
    span
      font-weight: bold

  #category-list
    flex-direction: row
    height: unset
    ul
      padding: 0 
      margin-right: 1rem


.slideshow-container
  grid-area: im
  width: 40rem
  margin: auto
  .slide-container
    padding: 1rem
    padding-top: 0
    .numbertext
      text-align: center
    img
      margin: 0 auto
      width: 100% 
      height: 500px
      object-fit: cover
      border: 4px solid $shadow_clr
  .next-container
    display: flex
    align-items: center
    justify-content: center
    .prev, .next 
      cursor: pointer
      position: relative
      width: auto
      padding: 1px 16px
      margin: 0 2rem
      margin-top: -55px
      color: $fg_clr
      font-weight: bold
      font-size: 1.2rem
      transition: 0.6s ease
      user-select: none
      border-radius: $border_radius

    .prev:hover, .next:hover 
      color: $bg_clr
      background-color: #0002

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