:root {
  /* Brand colors */
  --accent-color: #012785;
  --light-accent-color: #0035ba;
  --navbar-color: #abccff;

  /* Derived colors */
  --hover-accent-color: color-mix(
    in srgb,
    var(--light-accent-color),
    black 20%
  );
  --active-accent-color: color-mix(
    in srgb,
    var(--hover-accent-color),
    black 40%
  );
  --btn-border-color: var(--light-accent-color);
  --btn-hover-border-color: color-mix(
    in srgb,
    var(--light-accent-color),
    black 20%
  );
}

/* Full-page background image */
html,
body {
  height: 100%;
}

body {
  background: linear-gradient(
      rgba(255, 255, 255, 0.7),
      rgba(255, 255, 255, 0.7)
    ),
    url("/dex/theme/favicon.png") no-repeat center center;
  background-size: contain;
}
.card {
  padding: 20px;
}
.ood-nav {
  background-color: #c3dbff;
}
.ood-nav-logo {
  width: 10em;
}
.ood-logo-container {
  height: 2em;
}

.btn {
  background-color: var(--btn-border-color) !important;
  border-color: var(--btn-border-color) !important;
}
.btn:hover {
  background-color: var(--hover-accent-color) !important;
  border-color: var(--btn-hover-border-color) !important;
}