body {
  font-family: Arial;
  overflow: hidden;
  margin:0;
  background-color: transparent;
}

#canvas {
  height: 100vh;
  width:100vw;
  
  background-color: transparent;/*rgb(123, 93, 255);*/
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.crown > .name-holder::before,
.crown > .leader-name-holder::before{
  position: absolute;
  content: "";
  height:22px;
  width:22px;
  background-image: url("https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Simple_gold_crown.svg/768px-Simple_gold_crown.svg.png");
  background-size: contain;
  transform: translatey(-15px); 
}

.crown > .name-holder,
.crown > .leader-name-holder{
  color: rgb(255, 4, 180);
}


.leader-name-holder {
  z-index: 10;
  color:rgb(221, 96, 64);
  text-shadow: -1px 0 white, 
                0 1px white, 
                1px 0 white, 
                0 -1px white;
  font-weight: bolder;

  width: fit-content;
  position: absolute;
  top:65px;
  font-size: 20px;

  display: flex;
  justify-content: center;
  align-items: center;
  width: inherit;
  margin-left:16px !important; 

  animation: up-down .6s alternate infinite;
  transform-origin: top;
  rotate:-8deg;
}

.flip:not(.looping) > .leader-name-holder {
  margin-left:-16px !important; 
  rotate:8deg;
}

.flip:not(.looping)  > .name-holder {
  rotate:8deg;
}

.name-holder {
  z-index: 10;
  color:rgb(221, 96, 64);
  text-shadow: -1px 0 white, 
                0 1px white, 
                1px 0 white, 
                0 -1px white;
  font-weight: bolder;

  position: absolute;
  top:75px;
  font-size: 18px;

  display: flex;
  justify-content: center;
  align-items: center;
  width: inherit;
  rotate:-8deg;
}

.locomotive {
  width: 160px;
  height:140px;

  left:0;
  right:0;
  top:0;

  /* background-color: rgba(7, 79, 112, 0.692);  */
  transition: all 1.5s linear;
  position: absolute;
  overflow: visible;
  z-index:1;

  display: block;
}

.locomotive > .svg{
  position: absolute;
  right:-14px !important;
}

.locomotive.flip:not(.looping)  > .svg{
  left:-14px !important;
  right:0 !important;
}

.instant {
  transition: none !important;
}

#canvas.intro-animation>.locomotive {
  transition: all 0.35s linear;
  animation: intro 0.4s alternate infinite;
}

#canvas.intro-animation>.wagon {
  transition: all 0.35s linear;
  animation: intro 0.4s alternate infinite;
}

/* #canvas>.intro-animation {
  animation: intro 0.4s alternate infinite;
} */

#header-shape-gradient {
  --color-stop: #f12c06;
  --color-bot: #faed34;
}

/* .intro-animation > .leader-name-holder, */
#canvas.intro-animation>.locomotive > .svg > #train > #left-wheel,
#canvas.intro-animation>.locomotive > .svg > #train > #right-wheel,

#canvas.intro-animation>.wagon > .svg > #wagon > #left-wheel,
#canvas.intro-animation>.wagon > .svg > #wagon > #right-wheel,

#canvas.intro-animation>.locomotive > .svg > #train > #nose{
  animation: rainbow 1s steps(360) infinite; 
  /* animation-duration: 0.2s; */
  /* fill: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3); */
}

#right-wheel::after,
#left-wheel::after {
  content:'HALLO WAAR BEN IK!!!!!';
  height:500px;
  width: 500px;
  background-color: tomato;
  z-index:10;
  position: fixed;
}

#canvas.intro-animation>.locomotive > .svg > #train > #wheel-rod{
  animation-duration: 0.2s;
}

@keyframes rainbow {
from {
   -webkit-filter:hue-rotate(10deg);
           filter:hue-rotate(10deg);
           transform: rotateZ(0deg);
   }
 to {
   -webkit-filter:hue-rotate(360deg);
           filter:hue-rotate(360deg);
           transform: rotateZ(360deg);
   }
   
}

@keyframes intro{
  from { transform: rotateZ(-10deg)}
  to   {  transform: rotateZ(10deg) scale(1.2)}
}

.wagon {
  z-index:0;
  width: 160px;
  height:140px;

  left:0;
  right:0;
  top:0;

   /* background-color: rgba(112, 7, 7, 0.363);   */
  transition: all 1.5s linear;
  position: absolute;

  display: block;
}

#body-head > #test_1 {
  fill: rgb(153, 0, 255);
}

.flip:not(.looping)  > .svg {
  transform: scaleX(-1);
}

/* BEGIN SVG Animations */

/* Klein percentage op de locomotief: hoe ver de hypetrain is naar het
   volgende level. Bewust onopvallend. */
.voortgang-indicator {
  position: absolute;
  right: 4px;
  top: 2px;
  z-index: 11;

  font-family: Arial, sans-serif;
  font-size: 11px;
  font-weight: bold;
  color: #8F4343;
  text-shadow: -1px 0 white, 0 1px white, 1px 0 white, 0 -1px white;
  opacity: 0.8;
  pointer-events: none;
}

#left-wheel,
#right-wheel{
  animation: wheel 1s linear infinite;
  transform-origin: center;
  transform-box: fill-box;
}

@keyframes wheel{
  from{
    transform: rotateZ(0deg);
  }to{
    transform: rotateZ(360deg);
  }
}

#nose,
#body-leaf,
#body-head,
#main-body{
  animation: body .5s alternate infinite;
  transform-box: fill-box;
  transform-origin: bottom;
}

@keyframes body{
  from{
    transform: rotateX(0deg);
  }to{
    transform: rotateX(20deg);
  }
}

#body-head {
  animation: body-head .5s alternate infinite;
  transform-box: fill-box;
  transform-origin: bottom;
}

@keyframes body-head{
  from{
    transform: rotateX(10deg) rotateZ(-14deg);
  }to{
    transform: rotateX(-30deg) rotateZ(4deg);
  }
}

#body-leaf {
  animation: leaf .5s alternate infinite;
  transform-box: fill-box;
  transform-origin: right;
}

@keyframes leaf{
  from{
    transform: rotateX(-5deg) rotateZ(-15deg);
  }to{
    transform: rotateX(20deg) rotateZ(15deg) translateX(2em);
  }
}

.pipe-head,
.pipe {
  animation: pipe .5s alternate infinite;
  transform-box: none;
  transform-origin: bottom;
}

@keyframes pipe{
  from{
    transform: rotateX(0deg);
  }to{
    transform: rotateX(20deg);
  }
}

.confetti-pipe-head,
.confetti-pipe {
  z-index: 2;
  animation: c-pipe 1s ;
  transform-box: fill-box;
  transform-origin: bottom;
}

.confetti-pipe-head
{
  animation: c-pipe-head 1s ;
}


@keyframes c-pipe{
  from{
    transform: rotateX(0deg) scaleX(1) scaleY(1);
  }to{
    transform: rotateX(20deg) scaleX(1.2) scaleY(0.7) translateY(2em);
  }
}

@keyframes c-pipe-head{
  from{
    transform: rotateX(0deg) scaleX(1) scaleY(1) translateY(1);
  }to{
    transform: rotateX(20deg) scaleX(1.2) scaleY(1)  translateY(4em);
  }
}

#nose
{
  animation: nose .5s alternate infinite;
  transform-box: fill-box;
  transform-origin: center;
}

@keyframes nose {
  from{
    transform: scaleY(1.2);
  }to{
    transform: scaleY(1.0);
  }
}

#wheel-rod {
  animation: rotate-rod 1s linear infinite;
  transform-origin: right;
  transform-box: fill-box;
}

@keyframes rotate-rod{
  from { transform: rotate(0deg) translateX(2.5em)  rotate(0deg); }
  to   { transform: rotate(360deg) translateX(2.5em) rotate(-360deg); }
}

@keyframes up-down{
  from { transform: translateY(-0em) scaleX(1.05) scaleY(0.95)}
  to   {  transform: translateY(0em) scaleX(0.95) scaleY(1.05)}
}

.looping > .leader-name-holder,
.looping > .name-holder {
  rotate: -190deg;
  top:20%;
  transform-origin: bottom;
}

.looping > svg {
  transform: scaleY(-1) !important;
}
/* Kleurvarianten voor de cadeautjes in de gift-subs-kiepwagon. Het cadeautje
   is één plaatje (src/gift-item.png), dus we verschuiven de kleur met een
   filter in plaats van met losse plaatjes. Ongeveer een vijfde van de stapel
   krijgt zo'n tint (zie cadeauKlassen in kiepwagon-lading.js), zodat de
   stapel er minder eenvormig uitziet. Bewust kleine verschuivingen: het moet
   nog steeds hetzelfde cadeautje zijn. */
/* Feller roze. */
.kiepwagon-cadeau-roze {
  filter: hue-rotate(-25deg);
}

/* Warmer, richting koraal. */
.kiepwagon-cadeau-koraal {
  filter: hue-rotate(14deg);
}

/* Zelfde kleur, maar wat dieper. */
.kiepwagon-cadeau-diep {
  filter: brightness(0.9) saturate(1.15);
}

/* De twee hieronder mogen verder van het origineel af staan: een enkel
   cadeautje in een heel andere kleur maakt de stapel levendiger. */
.kiepwagon-cadeau-lavendel {
  filter: hue-rotate(-80deg);
}

.kiepwagon-cadeau-groen {
  filter: hue-rotate(150deg);
}

/* Zilveren (tier 2) en gouden (tier 3) metaalglans voor kijkers met een eigen
   abonnement. De filters zelf staan in src/abonnement-glans.js.
   Het filter staat per onderdeel van de tekening, zodat we onderdelen kunnen
   overslaan:
   - de saus bovenop (#body-head, en bij de locomotief ook #pipe-head op de
     schoorsteen) houdt zijn eigen kleur;
   - de lading van kiepwagons houdt zijn eigen kleuren;
   - bij een level-up laten de wielen en de neus hun regenboog zien: die
     animatie (rainbow) zet zelf een filter en gaat dan voor op deze regel. */
.abonnement-zilver > .svg > g > :not(defs):not(#body-head):not(#pipe-head):not(.kiepwagon-vulniveau):not(.kiepwagon-cadeaus) {
  filter: url(#metaal-zilver);
}

.abonnement-goud > .svg > g > :not(defs):not(#body-head):not(#pipe-head):not(.kiepwagon-vulniveau):not(.kiepwagon-cadeaus) {
  filter: url(#metaal-goud);
}