@font-face {
    font-family: "Inter";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("thirdparty/fonts/inter-regular.woff2");
}

@font-face {
    font-family: "Inter";
    font-weight: 400;
    font-style: italic;
    font-display: swap;
    src: url("thirdparty/fonts/inter-italic.woff2");
}

@font-face {
    font-family: "Inter";
    font-weight: 700;
    font-style: normal;
    font-display: swap;
    src: url("thirdparty/fonts/inter-bold.woff2");
}

@font-face {
    font-family: "Inter";
    font-weight: 700;
    font-style: italic;
    font-display: swap;
    src: url("thirdparty/fonts/inter-bold-italic.woff2");
}

:root {
  --body-background-color: hsl(0, 0%, 100%);
}

@media (prefers-color-scheme: dark) {
  :root {
    --body-background-color: #262626;
  }

  input, code {
    background-color: #1d1d1d;
  }
}

body {
  background-color: var(--body-background-color);
  /* Use a modern font stack as a fallback if the web font can't be loaded. */
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  /* Match the Godot 4.6+ editor default. */
  font-feature-settings: "calt" 0, "ss04" 1, "tnum" 1;
  line-height: 1.618;
}

.icon-grid {
  /* Always use dark background color, as the icons are designed to be seen on a dark background. */
  background-color: #262626;
  border-radius: 1rem;
  display: flex;
  flex-wrap: wrap;
}

.icon {
  display: flex;
  align-items: center;
  padding: 0.5rem
}

.icon img {
  max-width: var(--icon-size);
  max-height: var(--icon-size);
  width: var(--icon-size);
  height: var(--icon-size);
  object-fit: contain;
}