/* HEADER */
#header {
    position: relative;
    margin: 8vh auto 0 auto;
    padding: clamp(25px, 8vh, 50px);
    border: 4px dashed var(--fblue);
    border-radius: 999px;
    background: color-mix(in srgb, var(--glass) 65%, transparent);
    backdrop-filter: blur(1px);
    text-align: center;
    width: fit-content;
}

.title {
    color: var(--white);
    font-weight: clamp(450, 500, 650);
    font-size: clamp(2.5rem, 8vw, 5rem);
    margin: 0;
}

/* sparkle christine text */
.sparkle-container {
    position: absolute;
    pointer-events: none;
    animation: growAndFade 800ms ease-in-out forwards;
}

.sparkle-container img {
  filter: drop-shadow(0 0 8px gold);
}

.sparkle-text {
    position: relative;
    display: inline-block;
}

@keyframes growAndFade {
    0% { transform: scale(0) rotate(0deg); opacity: 1; }
    50% { transform: scale(1) rotate(90deg); opacity: 1; }
    100% { transform: scale(0) rotate(180deg); opacity: 0; }
}

/* MY SPIN CUBE HEADER LOL */
.cube {
  /* display: inline-block; */
  display: flex;
  position: relative;
  width: 140px;
  height: 1.2em;
  perspective: 800px;
  transform-style: preserve-3d;
  animation: cubeSpin 8s infinite ease-in-out;

  transform-origin: center center;

  margin-left: auto;
  margin-right: auto;
  font-size: 1.4rem;
  font-weight: 400;
}

.cube .face {
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-shadow: 0 0 20px var(--yellow);
}

/* cube faces */
.cube .face:nth-child(1) {
  transform: rotateX(0deg) translateZ(0.6em);
  /* color: var(--fblue); */
  color: var(--cubetext);
}
.cube .face:nth-child(2) {
  transform: rotateX(90deg) translateZ(0.6em);
  /* color: var(--sblue); */
  color: var(--cubetext);
}
.cube .face:nth-child(3) {
  transform: rotateX(180deg) translateZ(0.6em);
  /* color: var(--tblue); */
  color: var(--cubetext);
}
.cube .face:nth-child(4) {
  transform: rotateX(270deg) translateZ(0.6em);
  /* color: var(--sblue); */
  color: var(--cubetext);
}

/* cube rotation */
@keyframes cubeSpin {
  0%, 15%   { transform: rotateX(0deg); }
  25%, 40%  { transform: rotateX(-90deg); }
  50%, 65%  { transform: rotateX(-180deg); }
  75%, 90%  { transform: rotateX(-270deg); }
  100%      { transform: rotateX(-360deg); }
}