:root {
  --bg-color: #3b4a62;
  --main-color: #bef0ff;
  --caret-color: #bef0ff;
  --sub-color: #fe9841;
  --sub-alt-color: #313e55;
  --text-color: #dbdeeb;
  --error-color: #ed2939;
  --error-extra-color: #ce122c;
  --colorful-error-color: #ed2939;
  --colorful-error-extra-color: #ce122c;
}

@keyframes pulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1);
  }
}

header #logo .text {
  background: linear-gradient(120deg, var(--main-color), var(--sub-color));
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  padding-bottom: 0.1em;
}

/* fix logo clipping */
header #logo .icon {
  padding-bottom: 0.05em;
}
header {
  margin-bottom: -0.1em;
}
/*  */

header #logo .text .top {
  color: var(--main-color);
}
header.focus #logo .text {
  background: linear-gradient(-120deg, var(--main-color), var(--sub-color));
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  padding-bottom: 0.1em;
}
header.focus nav > .textButton,
header.focus nav > .showAlerts {
  background: none;
}
header nav > .textButton,
header nav > .showAlerts {
  border-radius: 150px 150px 32px 32px;
  background-color: var(--sub-alt-color);
  color: var(--main-color);
}
header nav > .textButton:hover,
header nav > .showAlerts:hover {
  animation: pulse 800ms ease-out infinite;
  color: var(--main-color);
  background-color: var(--sub-alt-color);
}
header nav > .view-leaderboards,
header nav > .view-leaderboards:hover {
  color: var(--sub-color);
}
