@font-face {
  font-family: "Exo 2";
  font-style: normal;
  font-weight: 300;
  src:
    local("Exo 2"),
    url("Exo2-VariableFont_wght.ttf") format("truetype");
}

@font-face {
  font-family: "Exo 2";
  font-style: normal;
  font-weight: 600;
  src:
    local("Exo 2"),
    url("Exo2-VariableFont_wght.ttf") format("truetype");
}

html,
body {
  height: 100%;
}

#root {
  height: 100%;
  display: flex;
  flex-direction: column;
}

:root {
  font-size: 100%; /* Assuming 100% is equivalent to 16px */
}

body {
  font-family: sans-serif;
  color: #565a5b;
  font-weight: 300;
}

p,
a {
  font-size: 1rem; /* Base font size, equivalent to 16px */
}

h1 {
  font-size: 6.854rem; /* 1.618^4, approximately 110.71px */
  font-weight: 600;
}

h2 {
  font-size: 4.236rem; /* 1.618^3, approximately 68.53px */
}

h3 {
  font-size: 2.618rem; /* 1.618^2, approximately 42.35px */
}

h4 {
  font-size: 1.618rem; /* 1.618^1, approximately 26.18px */
}

h5 {
  font-size: 1rem; /* Base font size, equivalent to 16px */
}

h6 {
  font-size: 0.618rem; /* 1.618^-1, approximately 9.89px */
}

*:focus,
*:focus-visible {
  outline-color: #b4c3be;
}