@import "../../utils/widthPicker"
@import "../../utils/colorPalette"

.introHeadingStyle
  font-weight: 700
  font-size: 75px
  line-height: 50px
  margin-bottom: 60px
  text-transform: uppercase
  +screen(lessThanMedium)
    font-size: 50px
    margin-bottom: 20px
    line-height: 52px
    font-weight: 100

.introLeadInStyle
  font-size: 40px
  line-height: 50px
  margin-bottom: 60px
  max-width: 900px
  margin-left: auto
  margin-right: auto
  +screen(lessThanMedium)
    font-size: 22px
    line-height: 26px
    margin-bottom: 30px

.introFont
  font-family: 'Montserrat', sans-serif
  font-weight: 600

.introMargin
  +screen(lessThanMedium)
    padding-top: 100px
    padding-bottom: 150px

.box
  display: inline-block
  font-size: 20px
  padding: 10px
  border: 2px solid $white
  width: 140px
  font-weight: 700
  line-height: 1.4em
  color: $pale-grey
  transition: color 0.3s, border 0.3s
  text-decoration: none
  backdrop-filter: blur(20px)
  &:hover
    border: 2px solid $sky-blue
    color: $sky-blue
    text-decoration: none

