@import "vars"
@import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap')
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@500&display=swap')

html
  height: 100%

body
  font-family: $font
  line-height: 1.5
  font-weight: 400
  width: 100%
  height: 100%
  margin: 0
  overflow-x: hidden

  color-scheme: dark
  color: rgba(255, 255, 255, 0.87)
  background-color: $c-bg

  font-synthesis: none
  text-rendering: optimizeLegibility
  -webkit-font-smoothing: antialiased
  -moz-osx-font-smoothing: grayscale

a
  font-weight: 500
  color: $c-darker
  text-decoration: inherit

a:hover
  color: $c-main

h1
  font-size: 3.2em
  line-height: 1.1


.card
  padding: 2em


#app
  width: 100%
  height: 100%


main:not(.no-margin)
  max-width: 1280px

  margin: 0 auto
  padding-bottom: 100px


button
  border-radius: 8px
  border: 1px solid transparent
  padding: 0.6em 1.2em
  font-size: 1em
  font-weight: 500
  font-family: inherit
  background-color: #1a1a1a
  opacity: 0.9
  cursor: pointer
  transition: all 0.25s


button:hover
  border: 1px solid $c-main


button:focus, button:focus-visible
  color: $c-main
  outline: none

.level-0
  --lv-color: $c-lv0

.level-1
  --lv-color: $c-lv1

.level-2
  --lv-color: $c-lv2

.level-3
  --lv-color: $c-lv3

.error
  color: $c-error