@font-face {
  font-family: "Studio Press Start";
  src: url("/fonts/PressStart2P-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Studio JetBrains Mono";
  src: url("/fonts/JetBrainsMono-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Studio JetBrains Mono";
  src: url("/fonts/JetBrainsMono-SemiBold.ttf") format("truetype");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

@font-face {
  font-family: "Studio JetBrains Mono";
  src: url("/fonts/JetBrainsMono-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}

:root {
  --studio-font-title: "Studio Press Start", "FSPixelSansUnicode-Regular", monospace;
  --studio-font-content: "Studio JetBrains Mono", "FSPixelSansUnicode-Regular", monospace;
}

html,
body,
#root,
input,
textarea,
select,
option {
  font-family: var(--studio-font-content) !important;
}

body * {
  font-family: var(--studio-font-content) !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
[class*="title"],
[class*="Title"],
[class*="heading"],
[class*="Heading"],
[class*="brand"],
[class*="Brand"] {
  font-family: var(--studio-font-title) !important;
  font-weight: 400 !important;
  letter-spacing: 0 !important;
  line-height: 1.45 !important;
}

button,
[role="button"],
[class*="topbar"] button,
[class*="toolbar"] button,
[class*="nav"] button,
[class*="tab"] {
  font-family: var(--studio-font-content) !important;
  font-weight: 700 !important;
}

h1 {
  font-size: clamp(16px, 1.45vw, 24px) !important;
}

h2 {
  font-size: clamp(13px, 1.1vw, 18px) !important;
}

h3,
h4,
h5,
h6 {
  font-size: clamp(10px, 0.85vw, 14px) !important;
}

button,
[role="button"],
[class*="tab"] {
  font-size: clamp(8px, 0.63vw, 11px) !important;
}

p,
li,
td,
th,
label,
input,
textarea,
select {
  line-height: 1.55 !important;
}

code,
pre,
.metric,
[class*="value"],
[class*="Value"],
[class*="content"],
[class*="Content"],
[class*="message"],
[class*="Message"],
[class*="chat"],
[class*="Chat"] {
  font-family: var(--studio-font-content) !important;
}

@media (max-width: 900px) {
  button,
  [role="button"],
  [class*="tab"] {
    font-size: 8px !important;
  }
}