@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Fira Sans Regular'), local('FiraSans-Regular'),
    url(../../static/media/fira-sans-v10-latin-regular.78773521.woff2) format('woff2');
}

@font-face {
  font-family: 'Fira Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local('Fira Sans SemiBold'), local('FiraSans-SemiBold'),
    url(../../static/media/fira-sans-v10-latin-600.5a2c789b.woff2) format('woff2');
}

:root {
  /* Primary */
  --color-darkest-purple: #191238;
  --color-darker-purple: #2e235d;
  --color-dark-purple: #4a308d;
  --color-purple: #5e3da8;
  --color-light-purple: #8052dc;
  --color-lighter-purple: #c2aaf9;
  --color-lightest-purple: #ede6fb;

  /* Neutral */
  --color-darkest-grey: #2b2837;
  --color-darker-grey: #393545;
  --color-dark-grey: #4b4657;
  --color-grey: #968fa7;
  --color-light-grey: #eceaf1;
  --color-lighter-grey: #f4f3f8;
  --color-lightest-grey: #fbf8ff;
  --color-white: #ffffff;

  /* Accent */
  --color-dark-coral: #dd5f6e;
  --color-coral: #e96d77;
  --color-light-coral: #fb7982;
  --color-lighter-coral: #fb9fa2;
  --color-lightest-coral: #fbdadb;
  --color-dark-mint: #22d39b;
  --color-mint: #30e8b6;
  --color-light-mint: #2cf6c3;

  /* Error */
  --color-darkest-red: #9b2c2c;
  --color-darker-red: #c53030;
  --color-dark-red: #e53e3e;
  --color-red: #f56565;
  --color-light-red: #fc8181;
  --color-lighter-red: #feb2b2;
  --color-lightest-red: #fdecec;

  /* Success */
  --color-darkest-green: #276749;
  --color-darker-green: #2f855a;
  --color-dark-green: #38a169;
  --color-green: #48bb78;
  --color-light-green: #68d391;
  --color-lighter-green: #9ae6b4;
  --color-lightest-green: #ebfcf0;

  --radius-size: 4px;
}

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

body {
  margin: 0;
  padding: 0;
  font-family: 'Fira Sans', sans-serif;
  font-size: 15px;
  line-height: 1.46667;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2b2837;
  color: var(--color-darkest-grey);
  background-color: #fbf8ff;
  background-color: var(--color-lightest-grey);

  /* Required for the snackbar messages */
  overflow: hidden;
}

p {
  color: #4b4657;
  color: var(--color-dark-grey);
}

:focus {
  outline: 3px solid #2cf6c3;
  outline: 3px solid var(--color-light-mint);
}

/* Lock the scroll position by adding this class to the "html" element. */
.scroll-lock {
  overflow: hidden !important;
}

#app {
  height: 100vh;
  display: grid;
}

body {
  /* Makes sure we can scroll the main storybook container */
  overflow: scroll !important;
}


/*# sourceMappingURL=main.8349fb57.chunk.css.map*/