/* effekt-styles */
:root {
}
html, body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  background-color: black;
}
body {
  width: 100%;
  width: 100svw;
  height: 100svh;
}
.wrapper {
  display: flex;
  flex-direction: column;
  align-self: center;

  /* wichtig für divas */
  width: 98svw;
  padding-right: 1svw;
  height: 98svh;
  padding-bottom: 1svh;
}
.diva {
  --anzahl: 120; /* anzahl divas */
  width: calc(98svw / var(--anzahl));
  height: calc(98svh / var(--anzahl));
  background-color: mediumaquamarine;
  border-radius: 0.8rem;
  margin:0;
  padding:0;
}
@keyframes bewegungA { /* 21 / 4 ~~ 5 */
  from {background-color: #dc6bff; margin-left: 0%}
   5% { background-color: #6BE7FF;}
  10% { background-color: #CBFF6B;}
  15% { background-color: #FFAF6B;}
  20% { background-color: #C07DD5;}
  25% { background-color: #7EC0CC;}
  30% { background-color: #B1CC7E;}
  35% { background-color: #CCA27E;}
  40% { background-color: #A080AA;}
  45% { background-color: #7D9599;}
  50% { background-color: #8F997D;}
  55% { background-color: #998A7D;}
  60% { background-color: #7C7080;}
  65% { background-color: #506266;}
  70% { background-color: #5E6650;}
  75% { background-color: #665A50;}
  80% { background-color: #4F3D55;}
  85% { background-color: #1E3033;}
  90% { background-color: #2B331E;}
  95% { background-color: #33271E;}
  to {  background-color: #4F751D; margin-left: 100%}
}
.diva {
  --basis: 1.5s; /* wartezeit bevor es losgeht */
  --speed: 2.0s;
  --step: 0.03s;
  --zeit1: calc(var(--basis) + var(--step) * 1); /* = 1.1s */
  --zeit2: calc(var(--basis) + var(--step) * 2);
  --zeit3: calc(var(--basis) + var(--step) * 3);
  --zeit4: calc(var(--basis) + var(--step) * 4);
  --zeit5: calc(var(--basis) + var(--step) * 5);
  --zeit6: calc(var(--basis) + var(--step) * 6);
  --zeit7: calc(var(--basis) + var(--step) * 7);
  --zeit8: calc(var(--basis) + var(--step) * 8);
  --zeit9: calc(var(--basis) + var(--step) * 9);
  --zeit10: calc(var(--basis) + var(--step) * 10);
  --zeit11: calc(var(--basis) + var(--step) * 11);
  --zeit12: calc(var(--basis) + var(--step) * 12);
  --zeit13: calc(var(--basis) + var(--step) * 13);
  --zeit14: calc(var(--basis) + var(--step) * 14);
  --zeit15: calc(var(--basis) + var(--step) * 15);
  --zeit16: calc(var(--basis) + var(--step) * 16);
  --zeit17: calc(var(--basis) + var(--step) * 17);
  --zeit18: calc(var(--basis) + var(--step) * 18);
  --zeit19: calc(var(--basis) + var(--step) * 19);
  --zeit20: calc(var(--basis) + var(--step) * 20);
  --zeit21: calc(var(--basis) + var(--step) * 21);
  --zeit22: calc(var(--basis) + var(--step) * 22);
  --zeit23: calc(var(--basis) + var(--step) * 23);
  --zeit24: calc(var(--basis) + var(--step) * 24);
  --zeit25: calc(var(--basis) + var(--step) * 25);
  --zeit26: calc(var(--basis) + var(--step) * 26);
  --zeit27: calc(var(--basis) + var(--step) * 27);
  --zeit28: calc(var(--basis) + var(--step) * 28);
  --zeit29: calc(var(--basis) + var(--step) * 29);
  --zeit30: calc(var(--basis) + var(--step) * 30);
  --zeit31: calc(var(--basis) + var(--step) * 31);
  --zeit32: calc(var(--basis) + var(--step) * 32);
  --zeit33: calc(var(--basis) + var(--step) * 33);
  --zeit34: calc(var(--basis) + var(--step) * 34);
  --zeit35: calc(var(--basis) + var(--step) * 35);
  --zeit36: calc(var(--basis) + var(--step) * 36);
  --zeit37: calc(var(--basis) + var(--step) * 37);
  --zeit38: calc(var(--basis) + var(--step) * 38);
  --zeit39: calc(var(--basis) + var(--step) * 39);
  --zeit40: calc(var(--basis) + var(--step) * 40);
  --zeit41: calc(var(--basis) + var(--step) * 41);
  --zeit42: calc(var(--basis) + var(--step) * 42);
  --zeit43: calc(var(--basis) + var(--step) * 43);
  --zeit44: calc(var(--basis) + var(--step) * 44);
  --zeit45: calc(var(--basis) + var(--step) * 45);
  --zeit46: calc(var(--basis) + var(--step) * 46);
  --zeit47: calc(var(--basis) + var(--step) * 47);
  --zeit48: calc(var(--basis) + var(--step) * 48);
  --zeit49: calc(var(--basis) + var(--step) * 49);
  --zeit50: calc(var(--basis) + var(--step) * 50);
  --zeit51: calc(var(--basis) + var(--step) * 51);
  --zeit52: calc(var(--basis) + var(--step) * 52);
  --zeit53: calc(var(--basis) + var(--step) * 53);
  --zeit54: calc(var(--basis) + var(--step) * 54);
  --zeit55: calc(var(--basis) + var(--step) * 55);
  --zeit56: calc(var(--basis) + var(--step) * 56);
  --zeit57: calc(var(--basis) + var(--step) * 57);
  --zeit58: calc(var(--basis) + var(--step) * 58);
  --zeit59: calc(var(--basis) + var(--step) * 59);
  --zeit60: calc(var(--basis) + var(--step) * 60);
  --zeit61: calc(var(--basis) + var(--step) * 61);
  --zeit62: calc(var(--basis) + var(--step) * 62);
  --zeit63: calc(var(--basis) + var(--step) * 63);
  --zeit64: calc(var(--basis) + var(--step) * 64);
  --zeit65: calc(var(--basis) + var(--step) * 65);
  --zeit66: calc(var(--basis) + var(--step) * 66);
  --zeit67: calc(var(--basis) + var(--step) * 67);
  --zeit68: calc(var(--basis) + var(--step) * 68);
  --zeit69: calc(var(--basis) + var(--step) * 69);
  --zeit70: calc(var(--basis) + var(--step) * 70);
  --zeit71: calc(var(--basis) + var(--step) * 71);
  --zeit72: calc(var(--basis) + var(--step) * 72);
  --zeit73: calc(var(--basis) + var(--step) * 73);
  --zeit74: calc(var(--basis) + var(--step) * 74);
  --zeit75: calc(var(--basis) + var(--step) * 75);
  --zeit76: calc(var(--basis) + var(--step) * 76);
  --zeit77: calc(var(--basis) + var(--step) * 77);
  --zeit78: calc(var(--basis) + var(--step) * 78);
  --zeit79: calc(var(--basis) + var(--step) * 79);
  --zeit80: calc(var(--basis) + var(--step) * 80);
  --zeit81: calc(var(--basis) + var(--step) * 81);
  --zeit82: calc(var(--basis) + var(--step) * 82);
  --zeit83: calc(var(--basis) + var(--step) * 83);
  --zeit84: calc(var(--basis) + var(--step) * 84);
  --zeit85: calc(var(--basis) + var(--step) * 85);
  --zeit86: calc(var(--basis) + var(--step) * 86);
  --zeit87: calc(var(--basis) + var(--step) * 87);
  --zeit88: calc(var(--basis) + var(--step) * 88);
  --zeit89: calc(var(--basis) + var(--step) * 89);
  --zeit90: calc(var(--basis) + var(--step) * 90);
  --zeit91: calc(var(--basis) + var(--step) * 91);
  --zeit92: calc(var(--basis) + var(--step) * 92);
  --zeit93: calc(var(--basis) + var(--step) * 93);
  --zeit94: calc(var(--basis) + var(--step) * 94);
  --zeit95: calc(var(--basis) + var(--step) * 95);
  --zeit96: calc(var(--basis) + var(--step) * 96);
  --zeit97: calc(var(--basis) + var(--step) * 97);
  --zeit98: calc(var(--basis) + var(--step) * 98);
  --zeit99: calc(var(--basis) + var(--step) * 99);
  --zeit100: calc(var(--basis) + var(--step) * 100);
  --zeit101: calc(var(--basis) + var(--step) * 101);
  --zeit102: calc(var(--basis) + var(--step) * 102);
  --zeit103: calc(var(--basis) + var(--step) * 103);
  --zeit104: calc(var(--basis) + var(--step) * 104);
  --zeit105: calc(var(--basis) + var(--step) * 105);
  --zeit106: calc(var(--basis) + var(--step) * 106);
  --zeit107: calc(var(--basis) + var(--step) * 107);
  --zeit108: calc(var(--basis) + var(--step) * 108);
  --zeit109: calc(var(--basis) + var(--step) * 109);
  --zeit110: calc(var(--basis) + var(--step) * 110);
  --zeit111: calc(var(--basis) + var(--step) * 111);
  --zeit112: calc(var(--basis) + var(--step) * 112);
  --zeit113: calc(var(--basis) + var(--step) * 113);
  --zeit114: calc(var(--basis) + var(--step) * 114);
  --zeit115: calc(var(--basis) + var(--step) * 115);
  --zeit116: calc(var(--basis) + var(--step) * 116);
  --zeit117: calc(var(--basis) + var(--step) * 117);
  --zeit118: calc(var(--basis) + var(--step) * 118);
  --zeit119: calc(var(--basis) + var(--step) * 119);
  --zeit120: calc(var(--basis) + var(--step) * 120);
}
.diva:nth-child(1) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit1); }
.diva:nth-child(2) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit2); }
.diva:nth-child(3) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit3); }
.diva:nth-child(4) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit4); }
.diva:nth-child(5) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit5); }
.diva:nth-child(6) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit6); }
.diva:nth-child(7) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit7); }
.diva:nth-child(8) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit8); }
.diva:nth-child(9) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit9); }
.diva:nth-child(10) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit10); }
.diva:nth-child(11) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit11); }
.diva:nth-child(12) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit12); }
.diva:nth-child(13) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit13); }
.diva:nth-child(14) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit14); }
.diva:nth-child(15) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit15); }
.diva:nth-child(16) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit16); }
.diva:nth-child(17) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit17); }
.diva:nth-child(18) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit18); }
.diva:nth-child(19) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit19); }
.diva:nth-child(20) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit20); }
.diva:nth-child(21) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit21); }
.diva:nth-child(22) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit22); }
.diva:nth-child(23) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit23); }
.diva:nth-child(24) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit24); }
.diva:nth-child(25) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit25); }
.diva:nth-child(26) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit26); }
.diva:nth-child(27) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit27); }
.diva:nth-child(28) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit28); }
.diva:nth-child(29) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit29); }
.diva:nth-child(30) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit30); }
.diva:nth-child(31) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit31); }
.diva:nth-child(32) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit32); }
.diva:nth-child(33) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit33); }
.diva:nth-child(34) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit34); }
.diva:nth-child(35) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit35); }
.diva:nth-child(36) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit36); }
.diva:nth-child(37) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit37); }
.diva:nth-child(38) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit38); }
.diva:nth-child(39) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit39); }
.diva:nth-child(40) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit40); }
.diva:nth-child(41) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit41); }
.diva:nth-child(42) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit42); }
.diva:nth-child(43) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit43); }
.diva:nth-child(44) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit44); }
.diva:nth-child(45) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit45); }
.diva:nth-child(46) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit46); }
.diva:nth-child(47) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit47); }
.diva:nth-child(48) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit48); }
.diva:nth-child(49) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit49); }
.diva:nth-child(50) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit50); }
.diva:nth-child(51) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit51); }
.diva:nth-child(52) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit52); }
.diva:nth-child(53) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit53); }
.diva:nth-child(54) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit54); }
.diva:nth-child(55) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit55); }
.diva:nth-child(56) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit56); }
.diva:nth-child(57) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit57); }
.diva:nth-child(58) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit58); }
.diva:nth-child(59) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit59); }
.diva:nth-child(60) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit60); }
.diva:nth-child(61) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit61); }
.diva:nth-child(62) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit62); }
.diva:nth-child(63) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit63); }
.diva:nth-child(64) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit64); }
.diva:nth-child(65) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit65); }
.diva:nth-child(66) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit66); }
.diva:nth-child(67) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit67); }
.diva:nth-child(68) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit68); }
.diva:nth-child(69) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit69); }
.diva:nth-child(70) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit70); }
.diva:nth-child(71) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit71); }
.diva:nth-child(72) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit72); }
.diva:nth-child(73) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit73); }
.diva:nth-child(74) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit74); }
.diva:nth-child(75) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit75); }
.diva:nth-child(76) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit76); }
.diva:nth-child(77) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit77); }
.diva:nth-child(78) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit78); }
.diva:nth-child(79) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit79); }
.diva:nth-child(80) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit80); }
.diva:nth-child(81) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit81); }
.diva:nth-child(82) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit82); }
.diva:nth-child(83) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit83); }
.diva:nth-child(84) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit84); }
.diva:nth-child(85) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit85); }
.diva:nth-child(86) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit86); }
.diva:nth-child(87) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit87); }
.diva:nth-child(88) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit88); }
.diva:nth-child(89) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit89); }
.diva:nth-child(90) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit90); }
.diva:nth-child(91) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit91); }
.diva:nth-child(92) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit92); }
.diva:nth-child(93) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit93); }
.diva:nth-child(94) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit94); }
.diva:nth-child(95) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit95); }
.diva:nth-child(96) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit96); }
.diva:nth-child(97) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit97); }
.diva:nth-child(98) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit98); }
.diva:nth-child(99) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit99); }
.diva:nth-child(100) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit100); }
.diva:nth-child(101) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit101); }
.diva:nth-child(102) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit102); }
.diva:nth-child(103) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit103); }
.diva:nth-child(104) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit104); }
.diva:nth-child(105) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit105); }
.diva:nth-child(106) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit106); }
.diva:nth-child(107) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit107); }
.diva:nth-child(108) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit108); }
.diva:nth-child(109) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit109); }
.diva:nth-child(110) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit110); }
.diva:nth-child(111) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit111); }
.diva:nth-child(112) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit112); }
.diva:nth-child(113) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit113); }
.diva:nth-child(114) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit114); }
.diva:nth-child(115) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit115); }
.diva:nth-child(116) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit116); }
.diva:nth-child(117) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit117); }
.diva:nth-child(118) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit118); }
.diva:nth-child(119) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit119); }
.diva:nth-child(120) { animation: bewegungA var(--speed) alternate infinite; animation-delay: var(--zeit120); }