@import "material-symbols/rounded.css";
@import "./styles/font.css";
@import "./styles/skeleton.css";
@import "./styles/intensity.css";

:root {
  font-family: "Lato", "Noto Sans TC", sans-serif;
  text-rendering: optimizeLegibility;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;

  --surface-hsl: 0deg 0% 30%;
  --surface-variant-hsl: 0deg 0% 22%;
  --background-hsl: 0deg 0% 14%;
  --background-variant-hsl: 0deg 0% 18%;
}

::-webkit-scrollbar {
  width: 4px;
}

::-webkit-scrollbar-thumb {
  background: #555;
  border-radius: 4px;
}

body {
  position: fixed;
  inset: 0;
  margin: 0;
  background-color: hsl(var(--background-hsl));
  color: #fff;
}

.container {
  margin: 0;
  padding-top: 10vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: center;
}

.pga-intensity-0 {
  background-color: lightgray;

  &:empty::after {
    content: "1";
  }
}

#svg-defs {
  position: fixed;
  visibility: hidden;
  pointer-events: none;
}

@media (prefers-color-scheme: dark) {
  :root {
    color: #f6f6f6;
    background-color: #2f2f2f;
  }
}
