/* Triptoy theme: deep indigo night with a slowly shifting rainbow */

html, html[data-theme="light"], html[data-theme="dark"] {
  --accent-color: #1b1530;
  --alt-accent-color: #2a2148;
  --game-dark: #1b1530;
  --game-highlight: #b66df2;
  --game-showcase: radial-gradient(ellipse at 30% 0%, #3a2470 0%, #1b1530 60%);
  --game-button-bg: linear-gradient(#1b1530, #1b1530) padding-box,
                    var(--triptoy-rainbow) border-box;
  --game-button-fg: #fff;
  --game-title-font: Futura, "Century Gothic", "Avenir Next", "Josefin Sans", sans-serif;
  --triptoy-rainbow: linear-gradient(90deg, #ff4d6d, #ffb84d, #f5f06a, #5ef08a,
                                     #4dc9ff, #7a6bff, #e56bff, #ff4d6d);
}

@keyframes triptoy-shift {
  from { background-position: 0% 0; }
  to { background-position: 200% 0; }
}

.page-header {
  padding-bottom: 5px;
}

.page-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 5px;
  background: var(--triptoy-rainbow);
  background-size: 200% 100%;
  animation: triptoy-shift 12s linear infinite;
}

article h1.title {
  text-transform: uppercase;
  letter-spacing: .18em;
  font-weight: 300;
}

article h2 {
  border-left: 12px solid transparent;
  border-image: linear-gradient(#ff4d6d, #f5f06a, #4dc9ff, #e56bff) 1;
}

.store-links a, .store-links a:visited {
  border: 3px solid transparent;
  background-size: 100% 100%, 200% 100%;
  animation: triptoy-shift 12s linear infinite;
}

.store-links a:hover {
  box-shadow: 0 0 18px rgba(182, 109, 242, .6);
}

.screenshots img {
  box-shadow: 0 0 24px rgba(122, 107, 255, .35);
}

.features li::before {
  content: "✦";
  background: var(--triptoy-rainbow);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}