/* I like my header texts with a smaller font weight:  */

h1, h2, h3, h4, h5, h6
  font-weight: 300

h1
  font-size: 2.5em
h2
  font-size: 2em
h3
  font-size: 1.75em
h4
  font-size: 1.5em
h5
  font-size: 1.25em
h6
  font-size: 1em

/* center, left and right align:  */

.text-center
  text-align: center

.text-left
  text-align: left

.text-right
  text-align: right

// Text Colours
@each $variation in $variations
  .text-#{$variation}
    color: var(--#{$variation})

.text-light
  color: $text-dark

// Text styling
.text-italic
  font-style: italic !important

.text-bold
  font-weight: bold !important

.text-underline
  text-decoration: underline !important

.text-muted
  color: grey

/* Larger p element for "leading" text */

.lead
  font-size: 1.2em

.display-1
  font-size: 6rem
  font-weight: 200
  line-height: 1.2

.display-2
  font-size: 5.5rem
  font-weight: 200
  line-height: 1.2

.display-3
  font-size: 4.5rem
  font-weight: 200
  line-height: 1.2

.display-4
  font-size: 3.5rem
  font-weight: 200
  line-height: 1.2

.display-5
  font-size: 2.5rem
  font-weight: 200
  line-height: 1.2

.display-6
  font-size: 2rem
  font-weight: 200
  line-height: 1.2

a
  color: var(--text-color)

p
  hyphens: auto
  overflow-wrap: anywhere