:root {
  --primary-color: #7264d6;
  --aside-backgroud-color: #fff;
  --profile-picture-height: 120px;
  --white-color: #fff;
  --gray-color: #79819a;
  --gray-dark-color: #47516b;
  --gray-darkest-color: #2e2e48;
  --gray-lightest-color: #e2e6ee;
  --gray-lightest-2-color: #f7f9fc;
  --gray-default-color: #79819a;
}

*,
::before,
::after {
  box-sizing: border-box;
}

html,
body {
  scroll-behavior: smooth;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-family: 'Nunito', sans-serif;
}

a {
  text-decoration-line: none;
}

a:hover {
  text-decoration-line: underline;
}

/* #: Common */
.heading-1,
.heading-2,
.heading-3,
.heading-4,
.heading-5,
.heading-6 {
  font-weight: 500;
}

.heading-1 {
  font-size: 2.986rem;
}

.heading-2 {
  font-size: 2.488rem;
}

.heading-3 {
  font-size: 2.074rem;
}

.heading-4 {
  font-size: 1.728rem;
}

.heading-5 {
  font-size: 1.44rem;
}

.heading-6 {
  font-size: 1.2rem;
}

.heading-1,
.heading-2,
.heading-3,
.heading-4,
.heading-5,
.heading-6 {
  color: var(--gray-darkest-color);
}

.horizontal-seperator {
  width: 100%;
  height: 1px;
  background: var(--gray-lightest-color);
}

.vertical-seperator {
  width: 1px;
  height: 100%;
  background: var(--gray-lightest-color);
}

.link {
  text-decoration: none;
  color: var(--gray-dark-color);
}

.btn {
  border-radius: 999px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.btn:hover {
  opacity: 0.8;
}

/* # Common */