:root {
  --body-background-color: #FBFAFF;
  --body-text-color: #191C1C;
  --nav-background-color: #FFFFFF;
  --nav-border-bottom-color: #EFEBFF;
  --nav-current-border-bottom-color: #D8FF2E;
  --card-background-color: #FFFFFF;
  --card-border-color: #E1E1E1;
  --up-border-left-color: #78ED64;
  --down-border-left-color: #FE2779;
  --down-background-color: #FFC9DD;
  --degraded-border-left-color: #F3886B;
  --tag-color: #191C1C;
  --tag-up-background-color: #78ED64;
  --tag-down-background-color: #FE2779;
  --tag-degraded-background-color: #F3886B;
  --change-background-color: #F3886B;
  --error-button-border-color: #1a46ad;
  --error-button-background-color: #D4D9F7;
  --error-button-color: #ffffff;
  --submit-button-border-color: #D8FF2E;
  --submit-button-background-color: #D8FF2E;
  --submit-button-color: #191C1C;
  --graph-opacity: 1;
  --graph-filter: brightness(0) saturate(100%) invert(92%) sepia(21%) saturate(3637%) hue-rotate(188deg) brightness(96%) contrast(111%);
}

article:before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background-image: var(--background);
  filter: var(--graph-filter);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center right;
}

article > * {
  position: relative;
}

body {
  background-image: url(peaky-bg.jpg) !important;
  background-position: center center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

.logo img {
  width: 100px;
}

nav {
  height: 71px
}