/* COLORS */
:root {
  /* grey */
  --c-white: #ffffff;
  --c-grey-50: #f5f5f6;
  --c-grey-100: #e5e6e8;
  --c-grey-200: #cdced4;
  --c-grey-300: #aaacb6;
  --c-grey-400: #7f8191;
  --c-grey-500: #646676;
  --c-grey-600: #565764;
  --c-grey-700: #4a4b54;
  --c-grey-800: #414149;
  --c-grey-900: #393940;
  --c-grey-950: #070708;

  /* blue */
  --c-blue-50: #edfaff;
  --c-blue-100: #d6f3ff;
  --c-blue-200: #b5ecff;
  --c-blue-300: #83e3ff;
  --c-blue-400: #48d0ff;
  --c-blue-500: #1eb3ff;
  --c-blue-600: #0696ff;
  --c-blue-700: #007df5;
  --c-blue-800: #0863c5;
  --c-blue-900: #0d559b;
  --c-blue-950: #0e345d;

  /* pink */

  --c-pink-50: #fef1f9;
  --c-pink-100: #fee5f4;
  --c-pink-200: #ffcaec;
  --c-pink-300: #ff9fda;
  --c-pink-400: #ff63bf;
  --c-pink-500: #ff47ab;
  --c-pink-600: #f01280;
  --c-pink-700: #f01280;
  --c-pink-800: #ad0752;
  --c-pink-900: #ad0752;
  --c-pink-950: #580026;
}

:root {
  --shadow-08: 0px 12px 24px 0px rgba(0, 0, 0, 0.08), 0px 4px 4px 0px rgba(0, 0, 0, 0.04);
}

* {
  box-sizing: border-box;
}

body,
html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

/* BUTTON */

button.btn__blue,
a.btn__blue {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 24px;
  gap: 10px;
  border: none;
  border-radius: 1000px;
  color: var(--c-grey-50);
  background-image: linear-gradient(90deg, #0d559b -105.14%, #0696ff 200.6%);
  cursor: pointer;
  text-decoration: none;

  &:hover {
    box-shadow: 0 0 0 1px var(--c-grey-50);
  }
}

button.btn__blue-pink,
a.btn__blue-pink {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px 24px;
  gap: 10px;
  border: none;
  border-radius: 1000px;
  color: var(--c-grey-50);
  background-image: linear-gradient(90deg, #0863c5 -53.81%, #ff47ab 142.97%);
  cursor: pointer;
  text-decoration: none;

  &:hover {
    box-shadow: 0 0 0 1px var(--c-grey-50);
  }
}

/* SCROLLBAR */
/* width */
::-webkit-scrollbar {
  width: 0px;
}

/* Track */
::-webkit-scrollbar-track {
  background: #f1f1f1;
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: #888;
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: #555;
}