@use '/src/styles/variables.sass' as vars
@use '/src/styles/fonts.sass' as fonts
@use '/src/styles/breakpoint.sass' as views

.body
  color: vars.$textColor
  font-family: fonts.$Roboto
  background-image: url('/src/assets/images/optimized/background.avif'), url('/src/assets/images/optimized/background.webp')
  position: absolute
  top: 0
  left: 0
  min-width: 99vw
  min-height: 90vh
  object-fit: cover
  z-index: -1
  opacity: 1
  background-attachment: fixed
  background-size: cover

  @media only screen and (max-width: views.$mobile)
    background-image: url('/src/assets/images/optimized/background-mobile.avif'), url('/src/assets/images/optimized/background-mobile.webp')
    min-width: 100vw
    min-height: 100vh
    object-fit: fill

.close-text
  padding: 3rem 0 0 0
  font-size: 0.75rem
  font-weight: 500

.inter
  @extend .body
  font-family: fonts.$Inter

.roboto
  @extend .body
  font-family: fonts.$Roboto

.montserrat
  @extend .body
  font-family: fonts.$Montserrat

.open-sans
  @extend .body
  font-family: fonts.$OpenSans

.public-sans
  @extend .body
  font-family: fonts.$PublicSans