/* Circular Std Book */
@font-face {
  font-family: "Circular Std";
  src: url("/fonts/CircularStd-Book.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

/* Circular Std Book Italic */
@font-face {
  font-family: "Circular Std";
  src: url("/fonts/CircularStd-BookItalic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}

/* Circular Std Medium */
@font-face {
  font-family: "Circular Std";
  src: url("/fonts/CircularStd-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

/* Circular Std Medium Italic */
@font-face {
  font-family: "Circular Std";
  src: url("/fonts/CircularStd-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
}

/* Circular Std Bold */
@font-face {
  font-family: "Circular Std";
  src: url("/fonts/CircularStd-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

/* Circular Std Bold Italic */
@font-face {
  font-family: "Circular Std";
  src: url("/fonts/CircularStd-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
}

/* Circular Std Black */
@font-face {
  font-family: "Circular Std";
  src: url("/fonts/CircularStd-Black.ttf") format("truetype");
  font-weight: 900;
  font-size: normal;
}

/* Circulat Std Black Italic*/
@font-face {
  font-family: "Circular Std";
  src: url("/fonts/CircularStd-BlackItalic.ttf") format("truetype");
  font-weight: 900;
  font-size: italic;
}

/* Hubot Sans Light */
@font-face {
  font-family: "Hubot Sans";
  src: url("/fonts/HubotSans-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}

/* Hubot Sans Book */
@font-face {
  font-family: "Hubot Sans";
  src: url("/fonts/HubotSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}

/* Hubot Sans Medium */
@font-face {
  font-family: "Hubot Sans";
  src: url("/fonts/HubotSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}

/* Hubot Sans SemiBold */
@font-face {
  font-family: "Hubot Sans";
  src: url("/fonts/HubotSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}

/* Hubot Sans Bold */
@font-face {
  font-family: "Hubot Sans";
  src: url("/fonts/HubotSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}

/* Hubot Sans Black */
@font-face {
  font-family: "Hubot Sans";
  src: url("/fonts/HubotSans-Black.ttf") format("truetype");
  font-weight: 900;
  font-style: normal;
}

/* Ibm Plex Sans */

@font-face {
  font-family: "IBMPlexSans";
  src: url("/fonts/IBMPlexSans-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: "IBMPlexSans";
  src: url("/fonts/IBMPlexSans-Bold.ttf") format("truetype");
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: "IBMPlexSans";
  src: url("/fonts/IBMPlexSans-Italic.ttf") format("truetype");
  font-weight: 400;
  font-style: italic;
}
@font-face {
  font-family: "IBMPlexSans";
  src: url("/fonts/IBMPlexSans-BoldItalic.ttf") format("truetype");
  font-weight: 700;
  font-style: italic;
}
@font-face {
  font-family: "IBMPlexSans";
  src: url("/fonts/IBMPlexSans-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "IBMPlexSans";
  src: url("/fonts/IBMPlexSans-LightItalic.ttf") format("truetype");
  font-weight: 300;
  font-style: italic;
}
@font-face {
  font-family: "IBMPlexSans";
  src: url("/fonts/IBMPlexSans-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: "IBMPlexSans";
  src: url("/fonts/IBMPlexSans-MediumItalic.ttf") format("truetype");
  font-weight: 500;
  font-style: italic;
}
@font-face {
  font-family: "IBMPlexSans";
  src: url("/fonts/IBMPlexSans-SemiBold.ttf") format("truetype");
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: "IBMPlexSans";
  src: url("/fonts/IBMPlexSans-SemiBoldItalic.ttf") format("truetype");
  font-weight: 600;
  font-style: italic;
}
@font-face {
  font-family: "IBMPlexSans";
  src: url("/fonts/IBMPlexSans-Thin.ttf") format("truetype");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "IBMPlexSans";
  src: url("/fonts/IBMPlexSans-ThinItalic.ttf") format("truetype");
  font-weight: 100;
  font-style: italic;
}
@font-face {
  font-family: "IBMPlexSans";
  src: url("/fonts/IBMPlexSans-ExtraLight.ttf") format("truetype");
  font-weight: 200;
  font-style: normal;
}
@font-face {
  font-family: "IBMPlexSans";
  src: url("/fonts/IBMPlexSans-ExtraLightItalic.ttf") format("truetype");
  font-weight: 200;
  font-style: italic;
}

:root {
  /* new Color Palette */
  /* Dark Background: #1A1A1A (hsl(0, 0%, 10%)) */
  /* Primary Text: #FFFFFF (hsl(0, 0%, 100%)) */
  /* Secondary Text: #B3B3B3 (hsl(0, 0%, 70%)) */
  /* Accent Color: #007BFF (hsl(204, 100%, 50%)) */
  /* Accent Color: #FF6F61 (hsl(6, 100%, 60%)) */
  --hue: 204;
  --sat: 100%;
  --lig: 50%;
  color-scheme: dark;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  tab-size: 4;
  box-sizing: border-box;
}

h1,
h2,
h3 {
  font-weight: 600;
}

h2 {
  font-size: 1.25rem;
}

h3 {
  font-size: 1rem /* 16px */;
}

img {
  max-width: 100%;
  height: auto;
}

.title > p > span:first-child {
  display: inline-block;
  transform: scaleX(1.5);
  margin-right: 0.15em;
  margin-left: 0.15em;
}

.tooltip {
  display: hidden;
}

.group:hover .tooltip {
  display: block;
}