:root {
  --ink: #26264d;
  --line: #3f3b71;
  --blue: #b9b7e8;
  --yellow: #e5c36b;
  --pink: #c59acb;
  --green: #9ebbc8;
}

body {
  background: #101c3a url("time-background.jpg") center / cover fixed no-repeat;
}

.panel {
  border-color: #3f3b71;
  background: rgba(255, 253, 247, 0.96);
  box-shadow: 10px 10px 0 rgba(4, 9, 28, 0.42);
}

h1,
.activity-header h1 {
  color: #332e65;
  text-shadow: 3px 3px 0 #d8b65c;
}

.back {
  border-color: #4b467d;
  background: #f2f0ff;
  color: #302c5b;
}

.activity-grid,
.activity {
  position: relative;
  overflow: hidden;
  border-color: #4b467d;
  background: rgba(255, 255, 255, 0.93);
}

.activity-grid::before,
.activity::before {
  content: "◷";
  position: absolute;
  left: 50%;
  top: 52%;
  z-index: 0;
  color: #4b467d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(20rem, 43vw, 45rem);
  font-weight: 400;
  line-height: 1;
  opacity: 0.05;
  pointer-events: none;
  transform: translate(-50%, -50%) rotate(-8deg);
}

.activity-grid > *,
.activity > * {
  position: relative;
  z-index: 1;
}

.activity-grid a,
.tile,
.choice,
.letter,
.listen,
.chip {
  border-color: #4b467d;
  box-shadow: 3px 3px 0 rgba(33, 28, 70, 0.28);
}

.activity-grid .activity-picture {
  border-color: #4b467d;
  background: rgba(255, 255, 255, 0.68);
}

.fill {
  background: linear-gradient(90deg, #756bc2, #d6af4d);
}

.panel .day-question {
  border-color: #8179b8;
  background: #f1efff;
}

.panel .day-question strong {
  background: #ead17d;
}

body .activity-header h1.compact-title {
  text-shadow: 2px 2px 0 rgba(216, 182, 92, 0.78);
}

.complete {
  z-index: 1000;
}