@import "./anvaka-vs.css";
@import "./tooltip.pcss";

@import "./media-tablet.pcss";
@import "./media-mobile.pcss";

:root {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;

  font-size: 100%;

  /* hsl(207deg 5% 35%) */
  --textColor: hsl(220, 10%, 45%);
  --textColorMuted: hsl(220, 5%, 50%);
  --borderColor: hsl(220, 10%, 88%);
  /* --borderColor: hsl(0deg 2% 86%); */

  --borderFocusColor: #aaa;

  /* wikipedia color */
  /* --c-accent: hsl(220, 60%, 50%);
  --c-accent-soft: hsl(220, 50%, 80%);
  --c-secondary: hsl(220, 55%, 75%); */

  --c-accent: hsl(342, 44%, 63%);
  --c-accent-soft: hsl(344, 50%, 80%);
  --c-secondary: hsl(342, 39%, 72%);
}

#app {
  position: absolute;
  z-index: 10;

  top: 0;
  bottom: 0;
  left: 0;
  right: 0;

  background-color: hsl(0, 33%, 98%);
}

.layout-container {
  margin: 0.8em;
}

.muted {
  /* background-color: #fff; */
  opacity: 0.7;
  color: var(--textColorMuted);
}

.about-links {
  position: absolute;

  top: 0;
  right: 0;

  font-size: 0.9rem;
  opacity: 0.6;
}

a:hover {
  color: var(--c-accent);
}

/* reset */
a {
  color: inherit;
  text-decoration: underline solid 1.7px;
  text-decoration: underline dotted 1.7px;
}
input,
select {
  font-family: inherit;
}

dd {
  margin-inline-start: 0;
}

/* ------------------------ scrollbar ------------------------- */
/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
  --size: 12px;
  width: var(--size);
  height: var(--size);
}

*::-webkit-scrollbar-track {
  background: hsl(0, 0%, 96%);
}

*::-webkit-scrollbar-thumb {
  background-color: hsl(0, 0%, 88%);
}

*::-webkit-scrollbar-button {
  height: 0;
}
