:root {
  font-size: 600%;
  font-family: 'Pouf'; 
  /* Dieser Name korrespondiert mit den Einstellungen in fonts.css */
}

body {
  background-image: url("../Images/Dot_pink_blur_03.svg");  
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  mix-blend-mode:color-burn;


}


.rotated {
  transform: rotate(-15deg); /* Equal to rotateZ(45deg) */
  background-color: rgb(255, 255, 255);
}

.magenta {
  position: fixed;
  transform: rotate(-15deg);
  border-top: 5rem rgb(255, 2, 230) solid;
  /* stop-opacity: ; */
  border-bottom: 5rem rgb(252, 163, 243) solid;
  margin: -6rem;
  width: 300vw;
  vertical-align: middle;

  animation-name: magentamove;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  animation-delay: 1s;

}

.cyan {
  position: fixed;
  transform: rotate(-14deg);
  border-top: 5rem rgb(255, 255, 255) solid; 
  /* stop-opacity: ; */
  border-bottom: 5rem rgb(0, 76, 255) solid; 
  margin: -6rem;
  width: 300vw;
  vertical-align: middle;
  mix-blend-mode: multiply;

  animation-name: cyanmove;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
  animation-delay: 1s;


}

.yellow {
  position: relative; 
  bottom: 90px;
  right: -500px;
  transform: rotate(-3deg);
  border-top: 5rem rgb(250, 250, 1) solid; 
  /* stop-opacity: ; */
  border-bottom: 5rem rgb(255, 255, 255) solid; 
  margin: -6rem;
  width: 300vw;
  vertical-align: middle;
  mix-blend-mode: multiply;

  animation-name: yellomove;
  animation-duration: 4s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-direction: alternate;
}


h1 {
  text-align: center;
  /* font-weight: 100; */
  /* padding: 0.1rem; 0 0 0; */
  margin: -0.25rem 0 -0.4rem 0;
  /* transform: rotate(-15deg);
  border-top: 3rem rgb(238, 3, 3) solid;
  border-bottom: 3rem rgb(43, 73, 226) solid; */
  /* font-variation-settings: 'slnt'-2; */
}


#s1 {
  color: rgb(255, 2, 230); 
  mix-blend-mode: multiply;
  display: inline-block;
}
#s2 {
  color: rgb(255, 2, 230); opacity: 20%;
  mix-blend-mode: multiply;
  display: inline-block;
}
#s3 {
  color: rgb(255, 2, 230); 
  mix-blend-mode: multiply;
  display: inline-block;
}
#s4 {
  color: rgb(255, 2, 230); opacity: 20%;
  mix-blend-mode: multiply;
  display: inline-block;
}
#s5 {
  color: rgb(255, 2, 230); 
  mix-blend-mode: multiply;
  display: inline-block;
  }
#s6 {
  color: rgb(255, 2, 230); opacity: 20%;
  mix-blend-mode: multiply;
  display: inline-block;
}
#s7 {
  color: rgb(255, 2, 230); 
  mix-blend-mode: multiply;
  display: inline-block;
  }



#c1 {
  color: rgb(255, 255, 255); 
  mix-blend-mode: multiply;
  display: inline-block;
}
#c2 {
  color: rgb(0, 76, 255); 
  mix-blend-mode: multiply;
  display: inline-block;
}
#c3 {
  color: rgb(255, 255, 255); 
  mix-blend-mode: multiply;
  display: inline-block;
}
#c4 {
  color: rgb(0, 76, 255); 
  mix-blend-mode: multiply;
  display: inline-block;
}
#c5 {
  color: rgb(255, 255, 255); 
  mix-blend-mode: multiply;
  display: inline-block;
  }
#c6 {
  color: rgb(0, 76, 255); 
  mix-blend-mode: multiply;
  display: inline-block;
}
#c7 {
  color: rgb(255, 255, 255); 
  mix-blend-mode: multiply;
  display: inline-block;
  }


  #y1 {
    color: rgb(250, 250, 1);
    mix-blend-mode: multiply;
    display: inline-block;
  }
  #y2 {
    color: rgb(255, 255, 255); 
    mix-blend-mode: multiply;
    display: inline-block;
  }
  #y3 {
    color: rgb(250, 250, 1);
    mix-blend-mode: multiply;
    display: inline-block;
  }
  #y4 {
    color: rgb(255, 255, 255); 
    mix-blend-mode: multiply;
    display: inline-block;
  }
  #y5 {
    color: rgb(250, 250, 1);
    mix-blend-mode: multiply;
    display: inline-block;
    }
  #y6 {
    color: rgb(255, 255, 255); 
    mix-blend-mode: multiply;
    display: inline-block;
  }
  #y7 {
    color: rgb(250, 250, 1);
    mix-blend-mode: multiply;
    display: inline-block;
    }  


  /* span {
    animation-name: foo;
    animation-duration: 4s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate; } */
  
  @keyframes cyanmove {
    from { font-variation-settings: "brth"10, "wght"80; font-size: 100%; transform: rotate(-15deg);}
    to { font-variation-settings: "brth"100, "wght"100;  font-size: 100%; transform: rotate(-10deg);}
  }

  @keyframes yellomove {
    from { font-variation-settings: "brth"10, "wght"40; font-size: 100%; transform: rotate(-5deg);}
    to { font-variation-settings: "brth"100, "wght"100; font-size: 105%; transform: rotate(-1deg);}
  }

  @keyframes magentamove {
    from { font-variation-settings: "brth"10, "wght"40; font-size: 100%; transform: rotate(-18deg);}
    to { font-variation-settings: "brth"100, "wght"100; font-size: 105%; transform: rotate(-15deg);}
  }


  /* font-variation-settings: "brth"10, "wght"100; */
  
  /* #s2 { animation-delay: 0.3s; }
  #s3 { animation-delay: 0.6s; }
  #s4 { animation-delay: 0.9s; }
  #s5 { animation-delay: 1.2s; }
  #s6 { animation-delay: 1.5s; }
  #s7 { animation-delay: 1.8s; } */