html
  /*-webkit-font-smoothing: antialiased*/
  /*--moz-osx-font-smoothing: grayscale*/
  scroll-behavior: smooth
  /* 18px */
  font-size: 112.5%

  @media screen and (max-width: $size-small)
    font-size: 100%

body
  font-weight: 400
  line-height: 1.65
  font-family: var(--font)
  color: var(--color-paragraph)
  background-color: var(--color-background)
  min-height: 100vh

p
  margin-bottom: 1.15rem

h1,
h2,
h3,
h4,
h5
  font-weight: 400
  line-height: 1.15
  color: var(--color-headline)
  font-family: "Libre Franklin Black"

h1
  word-spacing: 1rem
  font-size: 3rem
  text-align: center
  overflow-wrap: anywhere
  line-height: 1.5
  //hyphens: auto
  @media screen and (max-width: $size-small)
    font-size: 1.5rem
    word-spacing: inherit

h2
  font-size: 1.602em
  overflow-wrap: anywhere
  //hyphens: auto
h3
  font-size: 1.424em

h4
  font-size: 1.266em

h5
  font-size: 1.125em

small,
.text_small
  font-size: 0.889em

a
  color: var(--color-headline)
  font-weight: bold
  &:hover, &:active
    color: var(--color-secondary)

h2 + blockquote
  margin-top: 1rem

ul.no-style
  margin: 0
  padding: 0
  list-style-type: none

blockquote
  padding: 1rem 1.5rem
  margin: 2rem 0 3rem
  width: calc(100% - 1rem)
  border: solid 2px var(--color-highlight-border)
  border-radius: var(--radius-corner)
  box-shadow: 1rem 1rem 0 0 var(--color-highlight-bg)
  background-color: var(--color-white)
  overflow-wrap: anywhere
  hyphens: auto

  @media screen and (max-width: $size-small)
    margin: 1rem 0 1.5rem
    padding: .5rem .75rem
    width: calc(100% - .5rem)
    box-shadow: .5rem .5rem 0 0 var(--color-highlight-bg)

  ul
    padding-left: 20px