@import url("styles/theme.css");
@import url("styles/utility.css");
@font-face {
  font-family: "hoefler";
  src: url("/fonts/hoefler.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "icons";
  src: url("/fonts/icons.otf") format("opentype");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "manrope";
  src: url("fonts/manrope.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "montserr";
  src: url("fonts/montserr.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

html,
body {
  margin: 0;
  padding: 0;
  scrollbar-width: none;
  overscroll-behavior-y: contain;
  &::-webkit-scrollbar {
    display: none;
  }
}

body {
  display: flex;
  flex-direction: column;
  min-width: 400px;
  min-height: 100vh;
}

* {
  --val-navbar-height: 68px;
  --val-menubar-width: min(200px, 29%);

  scrollbar-width: none;
  -webkit-tap-highlight-color: transparent;
  &::-webkit-scrollbar {
    display: none;
  }
  &::-moz-selection {
    background-color: transparent;
    color: inherit;
  }
  &:selection {
    background-color: transparent;
    color: inherit;
  }
}
@media (width < 512px) {
  * {
    --val-navbar-height: 72px;
  }
}

body {
  overflow-x: hidden;
  overflow-y: scroll;
  font-family: manrope;
  background: var(--col-bg);
  color: var(--col-fg);
  font-size: 16px;
}
body > * {
  padding: 0 16px;
}