@font-face {
  font-family: "Graphik";
  src: url("./fonts/Graphik-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "Graphik";
  src: url("./fonts/Graphik-Medium.otf") format("opentype");
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
}

@font-face {
  font-family: "Graphik";
  src: url("./fonts/Graphik-Bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700 800;
  font-display: swap;
}

@font-face {
  font-family: "Graphik";
  src: url("./fonts/Graphik-Black.otf") format("opentype");
  font-style: normal;
  font-weight: 900;
  font-display: swap;
}

@font-face {
  font-family: "NotoSansHans";
  src: url("./fonts/NotoSansHans-Light.otf") format("opentype");
  font-style: normal;
  font-weight: 300;
  font-display: swap;
}

@font-face {
  font-family: "NotoSansHans";
  src: url("./fonts/NotoSansHans-Regular.otf") format("opentype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "NotoSansHans";
  src: url("./fonts/NotoSansHans-Medium.otf") format("opentype");
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
}

@font-face {
  font-family: "NotoSansHans";
  src: url("./fonts/NotoSansHans-Bold.otf") format("opentype");
  font-style: normal;
  font-weight: 700 900;
  font-display: swap;
}

:root {
  --font-sans: "Graphik", "NotoSansHans", "PingFang SC", "Microsoft YaHei", sans-serif;
}

html,
body,
button,
input,
select,
textarea {
  font-family: var(--font-sans);
  font-synthesis: none;
}