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

.footerStyle
  padding-left: 0
  padding-right: 0
  padding-top: 10px
  +screen(small)
    padding-top: 0

.footerDarkText
  color: $light-grey
  text-align: center
  margin-top: 0
  margin-bottom: 0

.footerLightText
  color: $smoke-grey
  width: 100%

.footerName
  font-weight: 700
  font-size: 1.1rem
  margin-bottom: 5px
  margin-top: 0

.leftText
  font-family: 'Montserrat', sans-serif
  font-weight: 600
  font-size: 8.5rem
  line-height: 8.5rem
  display: flex
  justify-content: center
  flex-direction: column
  text-align: center
  margin-block-start: 0
  margin-block-end: 0
  margin-top: 0
  margin-bottom: 0
  +screen(large)
    font-size: 6.5rem
    line-height: 6.5rem
  +screen(lessThanMedium)
    font-size: 2.4rem
    line-height: 2rem
  +screen(greaterThanMedium)
    text-align: right

.lineSeparator
  padding-bottom: 10px
  +screen(greaterThanMedium)
    border-right: 1px solid $alpha-white
    padding-right: 45px
  +screen(lessThanMedium)
    border-bottom: 1px solid $alpha-white
    margin-left: 15px
    margin-right: 15px
    padding-bottom: 15px

.footerList
  list-style-position: inside
  margin-bottom: 0
  padding-left: 0
  +screen(greaterThanMedium)
    padding-left: 10px

.footerLinks
  margin: 6px 0
  &:hover a
    text-decoration: none
    color: $white

.signature
  margin-top: 15px
  margin-bottom: 10px
  width: 100%
  +screen(small)
    margin-top: 10px

.footerLeft
  width: 50%
  display: flex
  justify-content: center
  +screen(lessThanMedium)
    width: 100%

.footerRight
  width: 50%
  margin-top: auto
  margin-bottom: auto
  +screen(greaterThanMedium)
    padding-left: 40px
  +screen(lessThanMedium)
    width: 100%
    text-align: center
    padding-top: 15px

.footerListDescription
  margin-top: 0
  margin-bottom: 10px

.footerListContainer
  padding-top: 20px

.footerLocation
  margin-bottom: 15px
  margin-top: 0

.footerGithubStats
  &:hover
    p
      color: $white
    svg
      color: $white

.footerGithubStatsDiv
  display: flex
  justify-content: center

.footerGithubStatsLink
  text-decoration: none
  &:hover
    text-decoration: none