$serif: 'Playfair Display', serif
$sans-serif: 'Raleway', sans-serif

$color-present: #c9b458
$color-correct: #6aaa64
$color-absent: #787c7e

$key-color-present: #c9b458
$key-color-correct: #6aaa64
$key-color-absent: #787c7e

@mixin mobile 
  @media (max-width: 786px)
    @content


*
  padding: 0
  margin: 0
  box-sizing: border-box

body
  width: 100vw
  height: 100vh
  touch-action: manipulation
  display: flex
  flex-direction: column
  justify-content: center
  align-items: center

  user-select: none

header
  font-family: $serif
  font-size: 1.5rem
  font-weight: 700
  margin-bottom: 1rem
  transform: scale(-1, 1)

  p
    font-size: 1.2rem
    font-weight: 400
    margin-bottom: 1rem
  
.game
  display: flex
  flex-direction: column
  align-items: center
  gap: 1.5rem
  font-family: $sans-serif

.board
  display: flex
  flex-direction: column
  gap: .5rem

  .row
    display: flex
    flex-direction: row
    gap: .5rem

    .cell
      width: 4rem
      height: 4rem
      border: 2px solid #9b9b9b
      display: flex
      justify-content: center
      align-items: center
      font-size: 2rem
      font-weight: 800
      color: white
      
      &.unguessed
        color: black
        transform: scale(-1, 1)

      &.guessed
        color: black
        transform: scale(-1, 1)
        transition: all 0.3s

      &.correct
        background-color: $color-correct
        color: #fff
        border: none

      &.present
        background-color: $color-present
        color: #fff
        border: none
      
      &.absent
        background-color: $color-absent
        color: #fff
        border: none

.letters
  display: flex
  flex-direction: column
  gap: 1rem
  font-weight: 100

  @include mobile
    gap: 0.5rem

  .row
    display: flex
    flex-direction: row
    justify-content: center
    gap: 1rem

    @include mobile
      gap: 0.5rem

    .letter
      width: 3rem
      height: 4rem
      border: 2px solid black
      display: flex
      justify-content: center
      align-items: center
      font-size: 1rem
      font-weight: 800
      cursor: pointer
      transition: all 0.3s
      transform: scale(-1, 1)

      @include mobile
        width: 1.75rem
        height: 3rem
        font-size: .8rem

      &.correct
        background-color: $key-color-correct !important
        color: #fff
        border: none
      
      &.present
        background-color: $key-color-present
        color: #fff
        border: none
      
      &.absent
        background-color: $key-color-absent
        color: #fff
        border: none

    #backspace
      width: 5rem

      @include mobile
        width: 3rem
      
      svg
        transform: scale(-1, 1)
        width: 50%

    
    #enter
      width: 5rem

      @include mobile
        width: 3.5rem

.toast
  background: black !important
  color: white
  font-family: $sans-serif
  font-weight: 600
  border-radius: 5px !important
  transform: scale(-1, 1) !important

footer
  font-family: $serif
  font-size: 1rem
  font-weight: 400
  margin-top: 1rem

  a
    color: #000
    text-decoration: none
    font-weight: 700
    transition: all 0.3s

    &:hover
      color: #f00