:root {
  --color-rose-pine-dawn-base: hsl(32deg, 57%, 95%);
  --color-rose-pine-dawn-surface: hsl(35deg, 100%, 98%);
  --color-rose-pine-dawn-overlay: hsl(33deg, 43%, 91%);
  --color-rose-pine-dawn-muted: hsl(257deg, 9%, 61%);
  --color-rose-pine-dawn-subtle: hsl(248deg, 12%, 52%);
  --color-rose-pine-dawn-text: hsl(248deg, 19%, 40%);
  --color-rose-pine-dawn-love: hsl(343deg, 35%, 55%);
  --color-rose-pine-dawn-gold: hsl(35deg, 81%, 56%);
  --color-rose-pine-dawn-rose: hsl(3deg, 53%, 67%);
  --color-rose-pine-dawn-pine: hsl(197deg, 53%, 34%);
  --color-rose-pine-dawn-foam: hsl(189deg, 30%, 48%);
  --color-rose-pine-dawn-iris: hsl(268deg, 21%, 57%);
  --color-rose-pine-dawn-highlight-low: hsl(25deg, 35%, 93%);
  --color-rose-pine-dawn-highlight-med: hsl(10deg, 9%, 86%);
  --color-rose-pine-dawn-highlight-high: hsl(315deg, 4%, 80%);
}

/* Fonts */
.poppins-regular {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  font-style: normal;
}

.poppins-medium {
  font-family: "Poppins", sans-serif;
  font-weight: 500;
  font-style: normal;
}

.poppins-semibold {
  font-family: "Poppins", sans-serif;
  font-weight: 600;
  font-style: normal;
}

.poppins-bold {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-style: normal;
}

/* Styles */
html,
body {
  padding: 0;
  margin: 0;
  background-color: var(--color-rose-pine-dawn-base);
}

html {
  text-align: center;
  height: 100vh;
  width: 100vw;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

body {
  width: 384px;
  display: flex;
  flex-flow: column nowrap;
  gap: 32px;
}

.headings {
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
}

.profile-pic {
  height: 128px;
  width: 128px;
  border-radius: 80px;
}

.heading-main {
  margin: 0;
  padding: 0;
  color: var(--color-rose-pine-dawn-text);
  font-size: 40px;
}

footer,
.sub-heading-main {
  margin: 0;
  padding: 0;
  color: var(--color-rose-pine-dawn-text);
  font-size: 16px;
  text-align: center;
}

.buttons {
  width: 100%;
  display: flex;
  flex-flow: column nowrap;
  justify-content: center;
  align-items: center;
  gap: 16px;
}

.button {
  width: 180px;
  padding: 8px 56px;
  border-radius: 8px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.button-link {
  text-decoration: none;
  color: var(--color-rose-pine-dawn-base);
}