@font-face {
  font-family: "Manrope";
  src: url("fonts/manrope-variable-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-400-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "IBM Plex Mono";
  src: url("fonts/ibm-plex-mono-600-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
}

:root {
  --nuvox-navy: #0b1f33;
  --nuvox-navy-deep: #071827;
  --nuvox-navy-soft: #12344a;
  --nuvox-cyan: #00bfe8;
  --nuvox-aqua: #57dfc1;
  --nuvox-cloud: #f7fafc;
  --nuvox-action: #007c93;
  --nuvox-action-dark: #00677a;
  --nuvox-font-ui: "Manrope", "Segoe UI Variable Text", "Segoe UI", Arial, sans-serif;
  --nuvox-font-mono: "IBM Plex Mono", "Cascadia Code", Consolas, monospace;
}

.nuvox-brand {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
  color: var(--nuvox-navy);
  text-decoration: none;
}

.nuvox-brand__main {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.nuvox-brand__mark {
  display: block;
  width: 48px;
  height: 38px;
  object-fit: contain;
  flex: 0 0 auto;
}

.nuvox-brand__name {
  color: currentColor;
  font-family: var(--nuvox-font-ui);
  font-size: 34px;
  font-weight: 760;
  line-height: 1;
  letter-spacing: -.065em;
}

.nuvox-brand__meta {
  color: #617384;
  font-family: var(--nuvox-font-ui);
  font-size: 10px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: .065em;
  text-transform: uppercase;
}

.nuvox-brand__meta strong {
  color: currentColor;
  font-weight: 760;
}

.nuvox-brand--inverse {
  color: var(--nuvox-cloud);
}

.nuvox-brand--inverse .nuvox-brand__meta {
  color: #9eb2c3;
}

.nuvox-brand--compact .nuvox-brand__mark {
  width: 40px;
  height: 32px;
}

.nuvox-brand--compact .nuvox-brand__name {
  font-size: 28px;
}

@media (max-width: 520px) {
  .nuvox-brand__mark {
    width: 42px;
    height: 34px;
  }

  .nuvox-brand__name {
    font-size: 31px;
  }
}
