:root {
  --metanet-primary: #fec600;
  --metanet-black: #08111b;
  --metanet-gray: #f0f4f7;
  --metanet-surface: #ffffff;
  --metanet-radius: 12px;
}

html,
body {
  background-color: var(--metanet-gray);
  color: var(--metanet-black);
  font-family: "Circular", Verdana, Arial, sans-serif;
}

a {
  color: var(--metanet-black);
}

.navbar,
.navbar.is-dark {
  background: var(--metanet-black);
  border-bottom: 3px solid var(--metanet-primary);
}

.navbar .navbar-item,
.navbar .navbar-link {
  color: #e7edf3;
}

.navbar .navbar-item:hover,
.navbar .navbar-link:hover,
.navbar .navbar-item.is-active,
.navbar .navbar-link.is-active {
  background: rgba(255, 255, 255, 0.06);
  color: #ffffff;
}

.navbar .navbar-dropdown {
  background: var(--metanet-surface);
  border-radius: var(--metanet-radius);
  box-shadow: 0 12px 32px rgba(8, 17, 27, 0.2);
}

.button.is-primary,
.button.is-link,
.button.is-info {
  background-color: var(--metanet-primary);
  border-color: var(--metanet-primary);
  color: var(--metanet-black);
}

.button.is-primary:hover,
.button.is-link:hover,
.button.is-info:hover {
  filter: brightness(0.95);
}

.button,
.input,
.select select,
.textarea,
.box,
.card,
.panel,
.navbar-dropdown .navbar-item button,
.navbar-dropdown .navbar-item .button {
  border-radius: var(--metanet-radius);
}

.box,
.card,
.panel {
  background: var(--metanet-surface);
  box-shadow: 0 12px 28px rgba(8, 17, 27, 0.12);
  border: 1px solid rgba(8, 17, 27, 0.04);
}

.table thead th {
  background: #f9fbfd;
  color: var(--metanet-black);
}

.table tr:hover td {
  background: #f9fbfd;
}

.tag.is-info,
.tag.is-primary {
  background: var(--metanet-primary);
  color: var(--metanet-black);
}

.notification.is-info,
.notification.is-primary {
  background: var(--metanet-primary);
  color: var(--metanet-black);
}