@import "vars"
@import url('https://fonts.googleapis.com/css2?family=Quicksand&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: light 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
  width: 100%
  height: 100%


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: border-color 0.25s

button:hover
  border-color: $c-main

button:focus, button:focus-visible
  outline: 4px auto -webkit-focus-ring-color