:root {
  --col1:darkred;
  --col2:red;
  --col3:darkorange;
  --col4:orange;
  --col5:yellow;
  --col6:lawngreen;
  --col7:green;
  --col8:darkgreen;
  --col9:turquoise;
  --col10:deepskyblue;
  --col11:cornflowerblue;
  --col12:steelblue;
  --col13:royalblue;
  --col14:blue;
  --col15:darkblue;
  --col16:blueviolet;
  --col17:purple;
  --col18:hotpink;
  --col19:violet;
  --col20:pink;
  --col21:mistyrose;
  --col22:palegoldenrod;
  --col23:goldenrod;
  --col24:darkgoldenrod;
  --col25:black;

   --start-breit: 0%;
   --ende-breit: 99%;
   --dauer: 2.0s;

   --zoeger1: calc(0.1s * 1);
   --zoeger2: calc(0.1s * 2);
   --zoeger3: calc(0.1s * 3);
   --zoeger4: calc(0.1s * 4);
   --zoeger5: calc(0.1s * 5);
   --zoeger6: calc(0.1s * 6);
   --zoeger7: calc(0.1s * 7);
   --zoeger8: calc(0.1s * 8);
   --zoeger9: calc(0.1s * 9);
  --zoeger10: calc(0.1s * 10);
  --zoeger11: calc(0.1s * 11);
  --zoeger12: calc(0.1s * 12);
  --zoeger13: calc(0.1s * 13);
  --zoeger14: calc(0.1s * 14);
  --zoeger15: calc(0.1s * 15);
  --zoeger16: calc(0.1s * 16);
  --zoeger17: calc(0.1s * 17);
  --zoeger18: calc(0.1s * 18);
  --zoeger19: calc(0.1s * 19);
  --zoeger20: calc(0.1s * 20);
  --zoeger21: calc(0.1s * 21);
  --zoeger22: calc(0.1s * 22);
  --zoeger23: calc(0.1s * 23);
  --zoeger24: calc(0.1s * 24);
  --zoeger25: calc(0.1s * 25);
}
.test {
  background-color: mistyrose;
}
html, body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  background-color: black;
  font-size: 2rem;
}
body {
  width: 100%;
  width: 100svw;
  margin-top: 5svh;
}
@keyframes wreite {
  from {
    max-width: var(--start-breit);
    max-height: var(--start-breit);
  }
  to {
    max-width: var(--ende-breit);
    max-height: var(--ende-breit);
  }
}
div {
  display: block;
  margin: 0;
  margin-left: auto;
  margin-right: auto;
  padding: 10px;
  width: 640px;
  height: 640px;
  max-width: 42%;
  max-height: 42%;
  background-color: var(--col1);
  border:2px outset azure;
  align-content: center;
  text-align: center;
  border-radius: 95%;
/*  animation: wreite var(--dauer) alternate infinite;*/
/*  animation-delay: var(--zoeger1);*/
}
div div {
  padding: 0;
  background-color: var(--col2);
  border:none;
  animation: wreite var(--dauer) alternate infinite;
  animation-delay: var(--zoeger2);
}
div div div {
  background-color: var(--col3);
  animation: wreite var(--dauer) alternate infinite;
  animation-delay: var(--zoeger3);
}
div div div div {
  background-color: var(--col4);
  animation: wreite var(--dauer) alternate infinite;
  animation-delay: var(--zoeger4);
}
div div div div div {
  background-color: var(--col5);
  animation: wreite var(--dauer) alternate infinite;
  animation-delay: var(--zoeger5);
}
div div div div div div {
  background-color: var(--col6);
  animation: wreite var(--dauer) alternate infinite;
  animation-delay: var(--zoeger6);
}
div div div div div div div {
  background-color: var(--col7);
  animation: wreite var(--dauer) alternate infinite;
  animation-delay: var(--zoeger7);
}
div div div div div div div div {
  background-color: var(--col8);
  animation: wreite var(--dauer) alternate infinite;
  animation-delay: var(--zoeger8);
}
div div div div div div div div div{
  background-color: var(--col9);
  animation: wreite var(--dauer) alternate infinite;
  animation-delay: var(--zoeger9);
}
div div div div div div div div div div{
  background-color: var(--col10);
  animation: wreite var(--dauer) alternate infinite;
  animation-delay: var(--zoeger10);
}
div div div div div div div div div div div {
  background-color: var(--col11);
  animation: wreite var(--dauer) alternate infinite;
  animation-delay: var(--zoeger11);
}
div div div div div div div div div div div div {
  background-color: var(--col12);
  animation: wreite var(--dauer) alternate infinite;
  animation-delay: var(--zoeger12);
}
div div div div div div div div div div div div div{
  background-color: var(--col13);
  animation: wreite var(--dauer) alternate infinite;
  animation-delay: var(--zoeger13);
}
div div div div div div div div div div div div div div{
  background-color: var(--col14);
  animation: wreite var(--dauer) alternate infinite;
  animation-delay: var(--zoeger14);
}
div div div div div div div div div div div div div div div{
  background-color: var(--col15);
  animation: wreite var(--dauer) alternate infinite;
  animation-delay: var(--zoeger15);
}
div div div div div div div div div div div div div div div div{
  background-color: var(--col16);
  animation: wreite var(--dauer) alternate infinite;
  animation-delay: var(--zoeger16);
}
div div div div div div div div div div div div div div div div div{
  background-color: var(--col17);
  animation: wreite var(--dauer) alternate infinite;
  animation-delay: var(--zoeger17);
}
div div div div div div div div div div div div div div div div div div{
  background-color: var(--col18);
  animation: wreite var(--dauer) alternate infinite;
  animation-delay: var(--zoeger18);
}
div div div div div div div div div div div div div div div div div div div{
  background-color: var(--col19);
  animation: wreite var(--dauer) alternate infinite;
  animation-delay: var(--zoeger19);
}
div div div div div div div div div div div div div div div div div div div div{
  background-color: var(--col20);
  animation: wreite var(--dauer) alternate infinite;
  animation-delay: var(--zoeger20);
}
div div div div div div div div div div div div div div div div div div div div div{
  background-color: var(--col21);
  animation: wreite var(--dauer) alternate infinite;
  animation-delay: var(--zoeger21);
}
div div div div div div div div div div div div div div div div div div div div div div{
  background-color: var(--col22);
  animation: wreite var(--dauer) alternate infinite;
  animation-delay: var(--zoeger22);
}
div div div div div div div div div div div div div div div div div div div div div div div{
  background-color: var(--col23);
  animation: wreite var(--dauer) alternate infinite;
  animation-delay: var(--zoeger23);
}
div div div div div div div div div div div div div div div div div div div div div div div div{
  background-color: var(--col24);
  animation: wreite var(--dauer) alternate infinite;
  animation-delay: var(--zoeger24);
}
div div div div div div div div div div div div div div div div div div div div div div div div div{
  background-color: var(--col25);
  animation: wreite var(--dauer) alternate infinite;
  animation-delay: var(--zoeger25);
}
@media screen and (orientation: portrait) {
  div {
    width: 100%;
    max-width: 89svw;
    max-height: 89svw;
  }
}