html {
  scroll-behavior: smooth;
}

body {
  /* Default is light theme */
  --white: #ffffff;
  --off-white: #fdf8f5;
  --teal-1: #76ffdc;
  --teal-2: #4ed4b2;
  --teal-2-20: #4ed4b234;
  --blue-1: #5caff9;
  --blue-1-05: #5caff90d;
  --blue-1-20: #5caff934;
  --blue-2: #1482e3;
  --blue-2-25: #1482e340;
  --purple-1: #525284;
  --purple-2: #2a2a62;
  --black: #000000;
  --grey-1: #c4c4c4;
  --grey-1-24: #c4c4c440;
  --grey-2: #bbbbbb;
  --grey-3: #6b6b6b;
  --red: #9f616a;
  --gradient-blue-green: linear-gradient(
    99.94deg,
    #1481e3 -17.95%,
    #4ed4b2 172.82%
  );
  /* used in mobile navbar background */
  --navbar-gray: #787878b2;

  color: var(--black);
  font-family: "Poppins", "sans-serif";
  font-size: 1rem;
  font-weight: 400;
  line-height: calc(30 / 16);

  margin: 0;
}

/* FIXME: Dark theme is the same as light theme right now */
.dark {
  --white: #ffffff;
  --off-white: #fdf8f5;
  --teal-1: #76ffdc;
  --teal-2: #4ed4b2;
  --blue-1: #5caff9;
  --blue-1-05: #5caff90d;
  --blue-1-20: #5caff934;
  --blue-2: #1482e3;
  --purple-1: #525284;
  --purple-2: #2a2a62;
  --gradient-blue-green: linear-gradient(
    99.94deg,
    #1481e3 -17.95%,
    #4ed4b2 172.82%
  );
  /* used in mobile navbar background */
  --navbar-gray: #787878b2;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-style: normal;
  line-height: 1.5;
  color: var(--purple-2);
}

h1 {
  font-size: calc(48rem / 16);
  font-weight: 700;
}

h2 {
  font-size: calc(36rem / 16);
  font-weight: 700;
}

h3 {
  font-size: calc(24rem / 16);
  font-weight: 600;
}

h4 {
  font-size: calc(18rem / 16);
  font-weight: 600;
}

input {
  font-family: "Poppins", "sans-serif";
}