.rnd-monofont {
  color: #333;
}

#tags-wrapper {
  color: #aaa;
}

#lang-wrapper {
  color: #aaa;
}

#brand-wrapper {
  color: #fff;
}

#en-link {
  color: #b87c8d;
  transition: 0.1s;
}
#en-link:hover, #en-link:focus, #en-link:active {
  color: #ddd;
}

#fr-link {
  color: #8194bd;
  transition: 0.1s;
}
#fr-link:hover, #fr-link:focus, #fr-link:active {
  color: #ddd;
}

/* 
 * single page view 
 */
html, body {
  height: 100%;
}

body {
  overflow-x: hidden;
}

#splash-wrapper {
  overflow: hidden;
}

/*
 * Radial color gradient effect
 */
#halo-wrapper {
  overflow: hidden;
  mix-blend-mode: soft-light;
}

#halo {
  width: 600px;
  min-width: 600px;
  height: 600px;
  min-height: 600px;
  border-radius: 50%;
  box-shadow: inset 0 0 50px #fff, inset 0 20px 80px #f0f, inset 0 -20px 80px #0ff, inset 0 20px 300px #f0f, inset 0 -20px 300px #0ff, 0 0 250px #fff, 0 -10px 280px #f0f, 0 10px 280px #0ff; /* outer bottom cyan */
}

#spotlight {
  --cursor-x: 100px;
  --cursor-y: 100px;
  --gradient-size: 200px;
  background-image: radial-gradient(circle var(--gradient-size) at var(--cursor-x) var(--cursor-y), #b4d2ff 0%, transparent 100%);
  mix-blend-mode: soft-light;
}

#spotlight-mask-in {
  --gradient-size: 300px;
  background-image: radial-gradient(circle var(--gradient-size) at 50% 50%, #858585 0%, #858585 50%, transparent 100%);
}

#spotlight-mask-out {
  --gradient-size: 800px;
  background-image: radial-gradient(circle var(--gradient-size) at 50% 50%, transparent 0%, transparent 33%, #858585 66%, #858585 100%);
}

/*
 * Random character background
 */
#bg-scrambler {
  width: 110%;
}

.splash-monofont {
  font-family: monospace, sans-serif;
  font-size: 1.25em;
  line-height: 1em;
  letter-spacing: 0.25em;
}

@media screen and (min-width: 640px) {
  .splash-monofont {
    font-size: 1em;
  }
}
@media screen and (min-width: 1024px) {
  .splash-monofont {
    font-size: 0.75em;
  }
}
.rnd-monofont {
  overflow: hidden;
}

/*
 * Tags Scrambler
 */
#tags-wrapper {
  font-weight: 800;
}

.tag {
  display: none;
}

/*
 * Language Links
 */
.flex-lang {
  font-weight: 800;
}

.lang-link {
  padding: 0.5em;
  margin: 0.5em;
}

.lang-link-spacer {
  padding: 1em 0;
}

/*
@keyframes arrowbounce {
  0%, 30%, 50%, 70%, 100% {
    transform: translateY(0em) rotate(180deg) translateX(50%);;
  }
  40% {
    transform: translateY(0.5em) rotate(180deg) translateX(50%);;
  }
  60% {
    transform: translateY(0.2em) rotate(180deg) translateX(50%);;
  }
}
.lang-arrow {
  display: block;
  text-align: center;
  height: 1em;
  width: 0.7em;
  bottom: 0.25em;
  left: 50%;
  transform: rotate(180deg) translateX(50%);
  animation: arrowbounce 2s infinite;
}
.fr-link .lang-arrow {
  animation-delay: 0.15s;
}
*/
/*
 * Brand logo
 */
h1.brand-text {
  padding: 0 0.25em;
  vertical-align: baseline;
  font-family: "Battambang", Arial, serif;
  text-shadow: 0 0 10px #888, 0 0 21px #888;
}