@font-face {
  font-family: "OracleSans";
  src: url("../../../../resources/Fonts/OracleSans_Rg.ttf") format("truetype");
  font-weight: 400;
}

@font-face {
  font-family: "OracleSans";
  src: url("../../../../resources/Fonts/OracleSans_SBd.ttf") format("truetype");
  font-weight: 600;
}

:root {
  --gas-dark: #171e25;
  --gas-blue: #264d6d;
  --gas-orange: #f29111;
  --gas-yellow: #ffc107;
}

body {
  font-family: "OracleSans", sans-serif;
}

a,
a:link,
a:visited {
  color: #a84f00;
}

.gas-api-top {
  align-items: center;
  background: radial-gradient(110% 180% at 0 100%, var(--gas-blue) 0%, var(--gas-dark) 70%);
  color: white;
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: space-between;
  padding: 1.1rem 2rem;
}

.gas-api-brand {
  color: white !important;
  font-size: 1.35rem;
  font-weight: 600;
  text-decoration: none;
}

.gas-api-product {
  color: #d8e0e7;
  margin-left: 0.6rem;
}

.gas-api-nav {
  display: flex;
  gap: 1.25rem;
}

.gas-api-nav a {
  color: white !important;
  font-weight: 600;
  text-decoration: none;
}

.gas-api-nav a[aria-current="page"] {
  border-bottom: 3px solid var(--gas-yellow);
  padding-bottom: 0.3rem;
}

.top-nav,
.sub-nav {
  background: #202b35;
}

.top-nav a,
.sub-nav a,
.nav-list-search label {
  color: white !important;
}

.title,
.header > .title {
  color: var(--gas-dark);
}

.gas-api-footer {
  background: var(--gas-dark);
  color: white;
  margin-top: 3rem;
  padding: 1.25rem 2rem;
}