:root {
  --backend-sky-a: #4f87c0;
  --backend-sky-b: #7cc0f2;
  --backend-sky-c: #d8efff;
  --backend-ink: #eef6ff;
  --backend-muted: #d6e8fa;
  --backend-accent: #ffd35a;
  --backend-shadow: rgba(8, 20, 33, 0.35);
  --backend-font: "Segoe UI", "Trebuchet MS", sans-serif;
}

html,
body {
  min-height: 100%;
}

body {
  color: var(--backend-ink) !important;
  font-family: var(--backend-font) !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 211, 90, 0.62) 0, rgba(255, 211, 90, 0.08) 32%, transparent 40%),
    radial-gradient(circle at 76% 84%, rgba(255, 255, 255, 0.08), transparent 38%),
    radial-gradient(circle at 20% 90%, rgba(255, 255, 255, 0.06), transparent 35%),
    linear-gradient(170deg, var(--backend-sky-a) 0%, var(--backend-sky-b) 45%, var(--backend-sky-c) 100%) !important;
  background-attachment: fixed !important;
}

.card,
.hero,
.panel,
.stat {
  background: rgba(7, 24, 40, 0.34) !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  box-shadow: 0 15px 36px var(--backend-shadow) !important;
}

button,
input,
select,
textarea {
  font-family: inherit;
}

a {
  transition: color .14s ease, background-color .14s ease, border-color .14s ease, transform .14s ease;
}