:root {
  --palette-00: rgb(252, 215, 228);
  --palette-05: rgb(219, 190, 240);
  --palette-10: rgb(167, 194, 227);
  --palette-15: rgb(148, 214, 196);
  --palette-20: rgb(138, 201, 130);

  --card-outline: #242424;
  --card-shadow: #cdcdcd;

  --drop-shadow-offset: var(--gutter);

  --alert: crimson;
  --notice: forestgreen;
}

.card {
  outline: 1px solid var(--card-outline);
  margin-right: var(--drop-shadow-offset);
  margin-bottom: var(--drop-shadow-offset);
  box-shadow: var(--drop-shadow-offset) var(--drop-shadow-offset) 0
    var(--card-shadow);
}

.text-alert {
  color: var(--alert);

  a.subtle-link,
  &.subtle-link {
    /* Prevent subtle-link's color: unset from winning */
    color: var(--alert);
  }
}

.text-notice {
  color: var(--notice);
}

.admin-controls {
  a,
  a:visited,
  a:hover,
  a:active {
    color: var(--alert);
  }

  button {
    border: 1px solid var(--alert);
  }
}

.cycle-background:nth-child(5n + 1),
.cycle-background1 {
  background-color: var(--palette-00);
}

.cycle-background:nth-child(5n + 2),
.cycle-background2 {
  background-color: var(--palette-10);
}

.cycle-background:nth-child(5n + 3),
.cycle-background3 {
  background-color: var(--palette-20);
}

.cycle-background:nth-child(5n + 4),
.cycle-background4 {
  background-color: var(--palette-05);
}

.cycle-background:nth-child(5n + 5),
.cycle-background5 {
  background-color: var(--palette-15);
}

.cycle-shadow:nth-child(5n + 1),
.cycle-shadow1 {
  margin-right: var(--drop-shadow-offset);
  margin-bottom: var(--drop-shadow-offset);
  box-shadow: var(--drop-shadow-offset) var(--drop-shadow-offset) 0
    var(--palette-15);
}

.cycle-shadow:nth-child(5n + 2),
.cycle-shadow2 {
  margin-right: var(--drop-shadow-offset);
  margin-bottom: var(--drop-shadow-offset);
  box-shadow: var(--drop-shadow-offset) var(--drop-shadow-offset) 0
    var(--palette-00);
}

.cycle-shadow:nth-child(5n + 3),
.cycle-shadow3 {
  margin-right: var(--drop-shadow-offset);
  margin-bottom: var(--drop-shadow-offset);
  box-shadow: var(--drop-shadow-offset) var(--drop-shadow-offset) 0
    var(--palette-10);
}

.cycle-shadow:nth-child(5n + 4),
.cycle-shadow4 {
  margin-right: var(--drop-shadow-offset);
  margin-bottom: var(--drop-shadow-offset);
  box-shadow: var(--drop-shadow-offset) var(--drop-shadow-offset) 0
    var(--palette-20);
}

.cycle-shadow:nth-child(5n + 5),
.cycle-shadow5 {
  margin-right: var(--drop-shadow-offset);
  margin-bottom: var(--drop-shadow-offset);
  box-shadow: var(--drop-shadow-offset) var(--drop-shadow-offset) 0
    var(--palette-05);
}