@font-face {
  font-family: 'Raleway';
  src: url('../../fonts/Raleway/Raleway-Variable.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
:root {
  /* surfaces */
  --color-bg: #eeebe7;
  --color-bg-muted: #ffffff;
  --color-bg-contrast: #291f1e;
  --color-bg-contrast-muted: #3b2d2b;

  /* text */
  --color-text: #4f4046;
  --color-text-muted: #3b2d2b;
  --color-text-on-contrast: #ffffff;
  --color-text-on-contrast-muted: #eae9ed;

  /* border */
  /* --color-border: var(--neutral-200);
  --color-border-strong: var(--neutral-400);
  --color-border-on-contrast: rgba(255, 255, 255, 0.14); */

  /* accents */
  --color-accent: #445f4b;
  --color-accent-hover: #ffc433;
  --color-text-on-accent: var(--color-text);

  --color-accent-2: #c83e4d;
  --color-accent-2-hover: #b33241;
  --color-accent-2-text: #ffffff;

  /* links */
  /* --color-link: var(--brand-600);
  --color-link-hover: var(--brand-500); */

  /* states */
  /* --color-success: #15803d;
  --color-warning: #b45309;
  --color-danger: #b91c1c;
  --color-info: #1d4ed8; */

  /* fonts */
  --font-main:
    'Raleway', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  outline: 0;
  border: none;
  list-style: none;
  line-height: 1;
  border-radius: 0;
  background-color: transparent;
  text-decoration: none;
  color: inherit;
  font-family: inherit;
}
html {
  font-size: 62.5%;
  width: 100%;
  height: 100%;
  scrollbar-width: thin;
}
body {
  color: var(--color-text);
  font-family: var(--font-main);
  font-weight: 400;
  font-size: 1.8rem;
  background-color: var(--color-bg);
  word-wrap: break-word;
  width: 100%;
  height: 100%;
}
a,
button {
  cursor: pointer;
}
.spacing {
  flex-shrink: 1;
  width: 100%;
  height: 100%;
}
.root {
  width: 100%;
  position: relative;
}

.page-main {
  padding-top: 0.6rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
}