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

html {
  font-size: 100%;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  scrollbar-color: var(--btn-primary-bg) var(--input-bg);
  scrollbar-width: thin;
}

* {
  scrollbar-color: var(--btn-primary-bg) var(--input-bg);
  scrollbar-width: thin;
}

*::-webkit-scrollbar {
  width: 0.75em;
  height: 0.75em;
}

*::-webkit-scrollbar-track {
  background-color: var(--input-bg);
}

*::-webkit-scrollbar-thumb {
  background-color: var(--btn-primary-bg);
  border: 0.15em solid var(--input-bg);
  border-radius: var(--border-radius);
}

*::-webkit-scrollbar-thumb:hover {
  background-color: var(--btn-primary-border);
}

body {
  margin: 0;
  padding-top: var(--navbar-height);
  font-family: "FORM UDPGothic", "Hiragino Sans", "Yu Gothic UI", "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: var(--base-font-size);
  line-height: var(--base-line-height);
  color: var(--text-color);
  background-color: var(--body-bg);
  overflow-y: scroll;
}

@font-face {
  font-family: "FORM UDPGothic";
  src: url("/assets/fonts/FORMUDPGothic/FORMUDPGothic-Regular.woff2") format("truetype");
  font-style: normal;
  font-weight: 400;
}

@font-face {
  font-family: "FORM UDPGothic";
  src: url("/assets/fonts/FORMUDPGothic/FORMUDPGothic-Bold.woff2") format("truetype");
  font-style: normal;
  font-weight: 700;
}

@font-face {
  font-family: "Material Symbols Outlined";
  src: url("/assets/fonts/Material_Symbols/MaterialSymbolsOutlined-VariableFont_FILL,GRAD,opsz,wght.woff2") format("truetype");
  font-style: normal;
  font-weight: 100 700;
}

.material-symbols-outlined {
  font-family: "Material Symbols Outlined";
  font-style: normal;
  font-weight: 400;
  font-size: 1em;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  vertical-align: middle;
  user-select: none;
  -webkit-font-smoothing: antialiased;
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  color: currentColor;
}

.material-symbols-outlined.icon-leading {
  margin-right: 0.20em;
}

.material-symbols-outlined.icon-only {
  margin-right: 0;
}

body.performance-mode *,
body.performance-mode *::before,
body.performance-mode *::after {
  transition: none !important;
  animation: none !important;
}

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

a:hover {
  text-decoration: underline;
}

button,
input,
textarea,
select {
  font: inherit;
  margin: 0;
}

button {
  cursor: pointer;
}

h1, h2, h3, h4, h5, h6 {
  margin-top: 0;
  margin-bottom: 0.70em;
  font-weight: 500;
}

p {
  margin: 0 0 0.70em;
}

dl, dd {
  margin: 0;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.hide {
  display: none !important;
}

.text-muted {
  color: var(--text-muted);
}