@use './global'
@use '../../configs/design.site' as design
@use 'sass:color'

:root
  color-scheme: light dark
  background-color: light-dark(design.$light-background, design.$dark-background)
  transition: background-color 0.6s ease-out

body
  color: light-dark(color.adjust(design.$light-background, $blackness: 95%), color.adjust(design.$dark-background, $lightness: 95%))
  transition: color 0.6s ease-out

a
  margin-right: 1rem

main
  text-align: center
  padding: 1em
  margin: 0 auto

h1
  @extend body
  text-transform: uppercase
  font-size: 4rem
  font-weight: 100
  line-height: 1.1
  margin: 4rem auto
  max-width: 14rem

  @media (min-width: design.$mobile)
    max-width: none

p
  max-width: 14rem
  margin: 2rem auto
  line-height: 1.35

  @media (min-width: design.$mobile)
    max-width: none
