@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;600;700&display=swap");

:root {
  --text-primary: #363636;
  --text-secondary: #2a2a2a;
  --text-tertiary: #919191;
  --text-quaternary: #ffffff;

  --bg-primary: #ffffff;

  --green-050: #a0e0cd;
  --green-100: #50c6a3;
  --green-200: #49b494;
  --green-300: #41a285;

  --blue-050: #97c6ec;
  --blue-100: #4097dc;
  --blue-200: #3a89c8;
  --blue-300: #347cb4;

  --gray-050: #e6e6e6;
  --gray-100: #d1d1d1;
  --gray-200: #bebebe;
  --gray-300: #ababab;

  --red-050: #eba5a3;
  --red-100: #db5a56;
  --red-200: #c7524e;
  --red-300: #b34a46;

  --yellow-050: #f8ef8d;
  --yellow-100: #f2e22e;
  --yellow-200: #dccd2a;
  --yellow-300: #c6b926;

  --purple-050: #bbaae0;
  --purple-100: #8263c7;
  --purple-200: #765ab5;
  --purple-300: #6a51a3;

  --shadow-primary: 0px 0px 4px rgba(64, 151, 220, 0.16);
  --shadow-secondary: 0px 0px 4px rgba(64, 151, 220, 0.24);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;

  font-family: "Montserrat", sans-serif;
  color: var(--text-primary);

  text-decoration: none;
  list-style: none;

  border: 0;
  outline: 0;
}

html,
body {
  overflow-x: hidden;
}

/*
    Heading
*/
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-weight: 700;
}

h1,
.h1 {
  font-size: 32px;
  line-height: 48px;
}

h2,
.h2 {
  font-size: 24px;
  line-height: 36px;
}

h3,
.h3 {
  font-size: 20px;
  line-height: 30px;
}

h4,
.h4 {
  font-size: 16px;
  line-height: 24px;
}

h5,
.h5 {
  font-size: 14px;
  line-height: 21px;
}

h6,
.h6 {
  font-size: 12px;
  line-height: 18px;
}

/*
    Paragraphs
*/
p,
.p1,
.p2 {
  font-size: 16px;
  line-height: 24px;
}

.p3,
.p4 {
  font-size: 14px;
  line-height: 21px;
}

.p5,
.p6 {
  font-size: 12px;
  line-height: 18px;
}

.p1,
.p3,
.p5 {
  font-weight: 400;
}

.p2,
.p4,
.p6 {
  font-weight: 300;
}

/*
    Links
*/
.l1,
.l2,
.l3,
.l4 {
  text-decoration: underline;
}

a,
.l1,
.l2 {
  font-size: 14px;
  line-height: 21px;
}

.l3,
.l4 {
  font-size: 12px;
  line-height: 18px;
}

a,
.l1,
.l3 {
  font-weight: 600;
}

.l2,
.l4 {
  font-weight: 400;
}

/*
    Others
*/

button {
  cursor: pointer;
}

main {
  &::-webkit-scrollbar,
  *::-webkit-scrollbar {
    width: 6px;
    height: 6px;
  }

  &::-webkit-scrollbar-thumb,
  *::-webkit-scrollbar-thumb {
    background: var(--gray-200);
    border-radius: 8px;
  }

  &::-webkit-scrollbar-track-piece,
  *::-webkit-scrollbar-track-piece {
    background: var(--gray-050);
    border-radius: inherit;

    @media screen and (max-width: 768px) {
      border-radius: 6px;
    }
  }
}
