:root {
  /* from https://brand.uci.edu/identity/colors.php */
  --uc-blue-color: rgb(37 87 153);
  --uc-gold-color: rgb(255 204 79);
  --uc-dark-gray: rgb(85 87 89);
  --uc-darkest-blue: rgb(0 34 68);

  --page-bg-color: #FFF;
  --navbar-bg-color: var(--uc-blue-color);
  --text-body-color: var(--uc-dark-gray);
  --heading-color: var(--uc-darkest-blue);
  --text-muted-color: hsla(200,0%,0%,.7);
  --accent-bg-color: rgba(from var(--uc-blue-color) r g b / 10%);

  --table-hover-bg-color: rgba(from var(--uc-blue-color) r g b / 5%);
  
  --sidebar-border-color: white;
  
  --navbar-bg-color: var(--uc-blue-color);
  --navbar-border-color: var(--uc-gold-color);
  --navbar-text-color: #fff;
  --navbar-disabled-text-color: #ccc;
  --navbar-hover-text-color: var(--uc-blue-color);
  --navbar-hover-bg-color: var(--uc-gold-color);

  --nav-item-hover-bg: var(--uc-gold-color);
}

:is(h1, h2, h3, h4, h5, h6) strong {
  letter-spacing: .05em;
  font-variant-caps: small-caps;

  background: linear-gradient(120deg, rgba(from var(--uc-gold-color) r g b / 30%));
  background-size: 100% 50%;
  background-position: 50% 50%;
  background-repeat: no-repeat;
}

a {
  color: var(--uc-blue-color);
  text-decoration: underline;
  text-underline-offset: 0.1em;
  text-decoration-thickness: 1px;
  text-decoration-color: oklch(from currentColor l c h / 50%);

  transition: outline 0.2s ease, background-color 0.8s ease, color 0.8s ease;

  &:hover {
    background-color: var(--uc-gold-color);
    outline: 3px solid var(--uc-gold-color);
  }
}

@media (width >= 768px) {
  .navbar-header { display: none; }
}

.navbar-default {
  background-clip: content-box;
  font-weight: 600;

  .dropdown-menu {
    outline: 1px solid var(--navbar-border-color);
  }
}

.navbar-default {
  background:
    url("../img/grid14.png"),
    var(--navbar-bg-color);
  background-blend-mode: soft-light;
}

body {
  background:
    url("../img/grid14.png"),
    linear-gradient(100deg, var(--accent-bg-color), transparent 40vw),
    linear-gradient(300deg, var(--accent-bg-color), transparent 20vw);
  background-attachment: fixed;
}

.bs-sidebar {
  border-color: var(--sidebar-border-color);
  background: var(--accent-bg-color);

  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;

  .bs-sidenav { background-image: initial; }

  .edit-this {
    margin: .5em;
    padding: .5em;
    border-top: 1px solid var(--sidebar-border-color);
    text-align: center;
    font-size: 80%;
  }
}