:root {
  --pink-color: #F86E66;
  --brown-color: #D29F7A;
  --beige-color: #E4DAC7;
  --blue-color: #8EBFC3;
  --slate-color: #C4CFCE;
}

body {
}

.font-fun {
  font-family: "Luckiest Guy", Ariel, sans-serif;
  font-weight: 400;
  font-style: normal;
}

.font-serif {
  font-family: "Arvo", serif;
  font-weight: 400;
  font-style: normal;
}

.bg-split {
  /* background: linear-gradient(to right, #000 100%, rgba(0,0,0,0.2) 0%), linear-gradient(to right, var(--brown-color) 0%, var(--brown-color) 50%, #8EBFC3 50%, #8EBFC3 100%); */
  background: radial-gradient(circle at bottom, rgba(0, 0, 0, 0.0), rgba(0, 0, 0, 0.0) 60%, rgba(55, 55, 110, 0.15)),
  linear-gradient(to right, var(--brown-color) 0%, var(--brown-color) 50%, #8EBFC3 50%, #8EBFC3 100%);


}

.bg-beige {
  background-color: #E4DAC7;
}

.bg-brown {
  background-color: #D29F7A;
}

.bg-blue {
  background-color: #8EBFC3;
}

.bg-pink {
  background-color: #F86E66;
}

.bg-blurry {
  background-color: rgba(255,255,255,0.6);
}


.bg-slate {
  background-color: var(--slate-color);
}