$color-primary: #D36B4C
$color-secondary: #D2B48C
$salbeiLight: #A7C1A8
$salbei: #819A91
$blue: #5C7285
$darkblue: #636F95
$honey: #E4B95B
$beige: #E2E0C8
$pink: #AE445A
$color-bg: #f9f9f9
$terra: #817363
$lightBlue: #E2ECF4
$salbeiLight: #EBF7F3
$lightGold: #F8F1E1
$lightLavender: #EEE0F7

$breakPointPhone: 480px       // Smartphones
$breakPointPad: 768px         // Tablets
$breakPointDesk: 1024px       // Laptops & kleine Desktops
$breakPointWide: 1440px       // Große Desktops

@font-face
  font-family: 'OoohBaby'
  src: url('/fonts/OoohBaby-Regular.woff2') format('woff2')
  font-weight: normal
  font-style: normal
  font-display: swap

@font-face
  font-family: 'Paprika'
  src: url('/fonts/Paprika-Regular.woff2') format('woff2')
  font-weight: normal
  font-style: normal
  font-display: swap

@font-face
  font-family: 'Mainfont'
  src: url('/fonts/Urbanist-ExtraLight.woff2') format('woff2')
  font-weight: normal
  font-style: normal
  font-display: swap

@font-face
  font-family: 'Mainfont-Bold'
  src: url('/fonts/Urbanist-Medium.woff2') format('woff2')
  font-weight: normal
  font-style: normal
  font-display: swap

$font-Header: 'Paprika', sans-serif  
$mainFont: 'Mainfont', Helvetica, Arial, sans-serif
$boldFont: 'Mainfont-Bold', Arial, sans-serif

body
  font-family: $mainFont

h1, h2, .flowFont
    font-family: $font-Header
h1
    color: $pink
    font-size: clamp(2.2rem, 1.8rem + 2vw, 4rem)
    margin: 1rem 0 0 0

h2
    color: darken($honey, 20%)
    font-size: clamp(1.6rem, .9rem + 2vw, 2.2rem)

p, li
    font-size: clamp(1.2rem, .8rem + 2vw, 1.4rem)
    color: darkgrey

b
    font-family: $boldFont