@import url('content_card.css');
@import url('button-styling.css');

@font-face {
  font-family: 'Jakarta';
  src: url('/static/fonts/PlusJakartaSans-VariableFont_wght.ttf') format('truetype');
}

:root {
  --background-lighter: #f9f6f3;
  --background: #F5F3F0;
  --background-darker: #EFEBE7;
  --background-dark: #DCD3CB;
  --main-orange: #F5786E;
  --main-triad: #6EB1F5;
  --main-orange-fade: #F5786E22;
  --orange: #F5786E;
  --orange-fade: #F5786E22;
  --dark-orange: #DF5449;
  --blue: #1b1564;
  --dark-blue: #1e1a52;
  --purple: #960C5D;
  --purple-fade: #960C5D11;
  --dark-purple: #771e52;
  --green: #a0d18c;
  --light-blue: #88C1FF;
  --link-blue: #007bff;
  --grey: #a7a7a7;
  --dark-grey: #4D4D4D;
  --form-blue: #60a8f6;
  --form-purple: #887FF5;
  --form-green: #6bee73;
  --form-pink: #F57FDC;
  --form-yellow: #F7E448;
  --new-form-tr1: #965954;
  --new-form-tr2: #B3736E;
  --new-form-tr3: #EF8F88;
  --new-form-tr4: #F4776D;
  --new-form-int1: #7D4F6A;
  --new-form-int2: #9D6686;
  --new-form-int3: #BD508F;
  --new-form-int4: #960C5D;
  --app-font: "Jakarta", sans-serif;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: var(--app-font) !important;
}

html, body {
  min-height: 100vh;
  max-height: 100vh;
  padding:0;
  margin:0;
  background-color: #F5F3F0;
}

body {
  display: flex;
  flex-direction: column;
}



.scroll-padding { /* FIX THIS LATER from SIMPLE PADDING to FADING AWAY CONTENT */
  z-index: 100;
  height: 20px;
  background-image: linear-gradient(#F7F7F7,rgba(255, 255, 0, 0));
}

main {
  background-color: #F5F3F0;
  color: #565656;

  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  /* Custom scrollbar styling */
  scrollbar-width: thin; /* Firefox - makes scrollbar thinner */
  scrollbar-color: #c1c1c1 transparent;
}