*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    background-color: #020617;
    background-image: url("./snowy.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

canvas {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

h1 {
    position: fixed;
    bottom: 1%;
    left: 1%;
    color: white;
    font-family: Arial,Helvetica,sans-serif;
    letter-spacing: 1px;
    font-size: 20px;
    pointer-events: none;
    text-shadow: 0 0 20px #00d9ff;
    z-index: 2;
}

#now-playing-list{
    position: absolute;
    top: 1%;
    left: 1%;
    color: white;
    font-size: 30px;
    color: white;
    font-family: Arial,Helvetica,sans-serif;
    letter-spacing: 8px;
    font-size: 1rem;
    pointer-events: none;
    text-shadow: 0 0 20px #00d9ff;
    z-index: 2;
}


/* =====================================================
   TEXTE MULTICOLORE
===================================================== */

.logo {
    position: absolute;
    bottom: 1%;
    left: 1%;
    gap: 1px;
    font-family: Arial Black, Arial, Helvetica, sans-serif;
    font-size: 30px;
    line-height: 1;
    z-index: 5;
    white-space: nowrap;
}

/* Une lettre */

.letter {
    position: relative;

    display: inline-block;

    /*
       Important :
       chaque lettre garde sa propre largeur.
    */
    width: 1em;
    height: 1.3em;
}


/* Les 4 copies d'une même lettre */

.letter span {
    position: absolute;

    left: 0;
    top: 0;

    display: block;

    font-family: inherit;
    font-size: inherit;
    font-weight: inherit;
    line-height: 1;

    white-space: nowrap;

    animation: letter-arrive
        0.8s
        cubic-bezier(.2,.9,.3,1)
        both;
}


/* =====================================================
   BLANC
===================================================== */

.letter .white {
    color: #ffffff;
    z-index: 4;

    --final-position: 0px;
}


/* =====================================================
   JAUNE
===================================================== */

.letter .yellow {
    color: #ffe000;
    z-index: 3;

    --final-position: 4px;
}


/* =====================================================
   ORANGE
===================================================== */

.letter .orange {
    color: #ff7200;
    z-index: 2;

    --final-position: 6px;
}


/* =====================================================
   BLEU
===================================================== */

.letter .blue {
    color: #040273;
    z-index: 1;

    --final-position: 8px;
}


/* =====================================================
   ANIMATION
===================================================== */

@keyframes letter-arrive {

    0% {
        opacity: 0;
        transform: translateY(-50px);
    }

    65% {
        opacity: 1;
    }

    100% {
        opacity: 1;
        transform: translateY(var(--final-position));
	transform: translateX(var(--final-position-x));
    }

}


/* =====================================================
   ORDRE D'ARRIVÉE
===================================================== */

/*
   BLANC
   puis JAUNE
   puis ORANGE
   puis BLEU

   Et chaque lettre démarre légèrement
   après la précédente.
*/


/* B */

.letter:nth-child(1) .white {
    animation-delay: 0s;
}

.letter:nth-child(1) .yellow {
    animation-delay: .10s;
}

.letter:nth-child(1) .orange {
    animation-delay: .20s;
}

.letter:nth-child(1) .blue {
    animation-delay: .30s;
}


/* O */

.letter:nth-child(2) .white {
    animation-delay: .08s;
}

.letter:nth-child(2) .yellow {
    animation-delay: .18s;
}

.letter:nth-child(2) .orange {
    animation-delay: .28s;
}

.letter:nth-child(2) .blue {
    animation-delay: .38s;
}


/* N */

.letter:nth-child(3) .white {
    animation-delay: .16s;
}

.letter:nth-child(3) .yellow {
    animation-delay: .26s;
}

.letter:nth-child(3) .orange {
    animation-delay: .36s;
}

.letter:nth-child(3) .blue {
    animation-delay: .46s;
}


/* J */

.letter:nth-child(4) .white {
    animation-delay: .24s;
}

.letter:nth-child(4) .yellow {
    animation-delay: .34s;
}

.letter:nth-child(4) .orange {
    animation-delay: .44s;
}

.letter:nth-child(4) .blue {
    animation-delay: .54s;
}


/* O */

.letter:nth-child(5) .white {
    animation-delay: .32s;
}

.letter:nth-child(5) .yellow {
    animation-delay: .42s;
}

.letter:nth-child(5) .orange {
    animation-delay: .52s;
}

.letter:nth-child(5) .blue {
    animation-delay: .62s;
}


/* U */

.letter:nth-child(6) .white {
    animation-delay: .40s;
}

.letter:nth-child(6) .yellow {
    animation-delay: .50s;
}

.letter:nth-child(6) .orange {
    animation-delay: .60s;
}

.letter:nth-child(6) .blue {
    animation-delay: .70s;
}


/* R */

.letter:nth-child(7) .white {
    animation-delay: .48s;
}

.letter:nth-child(7) .yellow {
    animation-delay: .58s;
}

.letter:nth-child(7) .orange {
    animation-delay: .68s;
}

.letter:nth-child(7) .blue {
    animation-delay: .78s;
}


/* =====================================================
   BOUTON PLAY
===================================================== */

#play-button {
  position: absolute;
  top:1%;
  right:1%;
  z-index:10;

  width: 58px;
  height: 58px;
  padding: 0;

  border: 0;
  border-radius: 50%;

  background: #fff;
  color: #111;

  display: grid;
  place-items: center;

  cursor: pointer;

  transition: transform .2s ease, background .2s ease;
}

#play-button svg {
  width: 22px;
  height: 22px;
  fill: currentColor;

  transform: translateX(1px);
  transition: transform .2s ease;
}


/* Petit effet élégant */

#play-button:hover {
  transform: scale(1.12);
  background: #f2f2f2;
}

#play-button:hover svg {
  transform: translateX(2px) scale(1.08);
}

#play-button:active {
  transform: scale(.92);
}