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

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

.text
  color: light-dark(color.adjust(design.$lightBackground, $blackness: 90%), color.adjust(design.$darkBackground, $lightness: 90%))
  transition: background-color 0.6s ease-out

a
  margin-right: 1rem

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

h1
  color: #335d92
  text-transform: uppercase
  font-size: 4rem
  font-weight: 100
  line-height: 1.1
  margin: 4rem auto
  max-width: 14rem

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

@media (min-width: 480px)
h1
  max-width: none

p
  max-width: none