:root {
  font-size: 12px;
  font-family: ui-monospace, monospace;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  --color-background: #000;
  --color-text: #fff;
  --color-link: #fff;
  --color-link-hover: #fff;
  --page-padding: 1.5rem;
  --color-loader-bg: #ffffff;
  --color-loader-bar-bg: rgba(101, 82, 60, 0.1);
  --color-loader-bar-fill: rgb(101, 82, 60);
}

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

body {
  margin: 0;
  padding: 0;
  color: var(--color-text);
  background-color: var(--color-background);
}

a {
  text-decoration: none;
  color: var(--color-link);
  outline: none;
  cursor: pointer;
}

a:hover {
  text-decoration: underline;
  color: var(--color-link-hover);
}

a:focus:not(:focus-visible) {
  outline: none;
}

a:focus-visible {
  outline: 2px solid red;
}

#root {
  position: relative;
  min-height: 100svh;
}