@import "https://cdn.jsdelivr.net/npm/bulma@1.0.4/css/bulma.min.css";
@import "./components.css";

:root {
  --color-primary: #7061DC;
  --color-primary-light: #B8B0EE;
  --color-primary-lighter: #E2DFF8;
  --color-primary-dark: #38316E;
  --color-primary-darker: #221D42;

  --color-background: #F1EFFC;

  --color-light-100: #f1f1f1;
  --color-light-200: #d9d9d9;
  --color-light-300: #bfbfbf;

  --color-dark-100: #0e0e0e;
  --color-dark-200: #272727;
  --color-dark-300: #3f3f3f;

  --color-text-100: #0e0e0e;
  --color-text-200: #272727;
  --color-text-300: #3f3f3f;

  --color-text-inverse-100: #f1f1f1;
  --color-text-inverse-200: #d9d9d9;
  --color-text-inverse-300: #bfbfbf;
}

@media (prefers-color-scheme: dark) {
  :root {
    --color-background: #0B0A16;

    --color-text-100: #f1f1f1;
    --color-text-200: #d9d9d9;
    --color-text-300: #bfbfbf;

    --color-text-inverse-100: #0e0e0e;
    --color-text-inverse-200: #272727;
    --color-text-inverse-300: #3f3f3f;
  }
}

html, body {
  background-color: var(--color-background);
}

body {
  height: 100vh;
}

.app__wrapper {
  min-height: calc(100vh - 10.5rem);
  /* display: flex;
  flex-direction: column;
  justify-content: space-between; */
}