html {
  min-height: 100%;
  background: #030106;
}

body {
  background-color: #030106;
  background-image:
    linear-gradient(90deg, rgba(2, 1, 5, .26), rgba(6, 2, 10, .08)),
    url("/raven-time-background.png");
  background-size: var(--background-size, cover);
  background-position: var(--background-position, center);
  background-repeat: no-repeat;
  background-attachment: fixed;
}

header {
  background: rgba(5, 3, 8, .48);
  border-bottom-color: rgba(157, 78, 221, .38);
  box-shadow: 0 8px 35px rgba(0, 0, 0, .22);
  backdrop-filter: blur(12px) saturate(130%);
  -webkit-backdrop-filter: blur(12px) saturate(130%);
}

.card {
  background: transparent;
  border-color: rgba(184, 99, 238, .38);
  box-shadow: 0 12px 35px rgba(0, 0, 0, .25);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

body.no-background {
  background-image: none;
}

body.solid-cards .card {
  background: linear-gradient(145deg, rgba(20, 12, 29, .88), rgba(6, 3, 10, .82));
}

body.reduced-motion *,
body.reduced-motion *::before,
body.reduced-motion *::after {
  scroll-behavior: auto !important;
  transition: none !important;
  animation: none !important;
}

.stat {
  background: rgba(6, 3, 10, .30);
  border-color: rgba(184, 99, 238, .38);
  box-shadow: 0 12px 35px rgba(0, 0, 0, .25);
}

.card .details {
  border-top-color: rgba(199, 125, 255, .24);
}

dialog {
  background: rgba(10, 5, 16, .76);
  border-color: rgba(199, 125, 255, .58);
  backdrop-filter: blur(18px) saturate(135%);
  -webkit-backdrop-filter: blur(18px) saturate(135%);
}

input,
select,
button,
.import-note,
.import-result {
  background-color: rgba(9, 5, 14, .58);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}

button.primary {
  background: linear-gradient(135deg, rgba(106, 27, 154, .82), rgba(162, 58, 221, .82));
}

.empty {
  background: rgba(5, 3, 8, .42);
  border: 1px solid rgba(157, 78, 221, .26);
  border-radius: 18px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}