@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-main
  text-decoration: inherit

a:hover
  color: $c-main

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


.card
  display: flex
  flex-direction: column

  border-radius: 5px
  padding: 12px 16px
  background: $ov-light


#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: $ov-lighter
  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

input
  border-radius: 8px
  border: 1px solid transparent
  padding: 0.6em 1.2em
  font-size: 1em
  font-weight: 500
  font-family: inherit
  background-color: $ov-lighter
  transition: all 0.25s
  box-sizing: border-box


input:focus, input:focus-visible
  border: 1px solid $c-main
  outline: none

input.error
  border: 1px solid $c-error

.flex-center
  display: flex
  justify-content: center
  align-items: center


.inline-flex-center
  display: inline-flex
  justify-content: center
  align-items: center

.clickable
  cursor: pointer
  user-select: none


main.content
  display: flex
  flex-direction: column
  gap: 20px
  margin: 100px auto 0
  padding: 0 32px 32px
  min-height: 100%
  max-width: $w-max

  background-color: rgba(black, 0.2)
  border-radius: 16px 16px 0 0

  @media (max-width: #{$w-max + (64px) * 2})
    margin: 100px 32px 0
    padding: 0 32px 16px

  @media (max-width: $w-mobile)
    margin: 100px 0 0
    padding: 0 32px 16px


// Overlay
.overlay
  position: fixed
  inset: 0

  background-color: rgba(0, 0, 0, 0.5)

  display: flex
  justify-content: center
  align-items: center

  z-index: 1000

  h2, p
    user-select: none
    margin: 0

  > div
    background-color: $c-bg
    padding: 2rem
    border-radius: 10px

    display: flex
    flex-direction: column
    gap: 1rem

    max-width: 400px