base.scss

$white: whitesmoke;

$light-pink: #ffb3c6;
$light-blue: #a6e1fa;
$light-yellow: #fcf6bd;
$light-green: #95d5b2;
$light-purple: #b8b8ff;

$dark-navy-blue: #0a2472;

$light-grey-assent: #2d2f31;
$dark-grey-assent: #171819;

$warning: #ff4976;
$sucsess: #95d5b2;

$gradient: linear-gradient(
  90deg,
  rgba(0, 0, 0, 1) 0%,
  rgba(31, 31, 31, 1) 100%
);
$userGradient: radial-gradient(
  circle at 10% 20%,
  rgb(253, 239, 132) 0%,
  rgb(247, 198, 169) 54.2%,
  rgb(21, 186, 196) 100.3%
);

$border-radius: 1.5rem;

// TYPO -----------------------------
$heading-font: "Satoshi", sans-serif;
$thin-font: "Oswald", sans-serif;
$fat-font: "Excon", sans-serif;

$small-main-heading-size: clamp(3.5rem, 7vw, 6.5rem);
$small-secondary-heading-size: clamp(1.125rem, 2.25vw, 1.75rem);

$big-main-heading-size: clamp(4.35rem, 9.5vw, 9rem);
$big-secondary-heading-size: clamp(1.5rem, 2.5vw, 2rem);


@mixin flex($direction, $justify, $align) {
  display: flex;
  flex-direction: $direction;
  justify-content: $justify;
  align-items: $align;
}

// MEDIA------------------------------

$LAPTOP: 1200px;
$TABLET: 960px;
$SCREENS: 768px;
$MOBILE: 481px;


// ONMOUNT---------------------------

$onMount: onMount 2000ms cubic-bezier(0.175, 0.885, 0.32, 1.275) 1;