/* 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;
  gap: 10px;
  flex-wrap: wrap;
  align-self: center;
  padding: 0;
  /* wichtig für divas */
  width: 75svw;
  height: 96svh;
  padding-left: 7svw;
}
/* hic sunt animationes */
@media screen {

@keyframes ani_abcd {
  from { background-color: var(--col-a); }
  34% { background-color: var(--col-b); }
  67% { background-color: var(--col-c); }
  to { background-color: var(--col-d); }
}
@keyframes ani_bcda {
  from { background-color: var(--col-b); }
  34% { background-color: var(--col-c); }
  67% { background-color: var(--col-d); }
  to { background-color: var(--col-a); }
}
@keyframes ani_cdab {
  from { background-color: var(--col-c); }
  34% { background-color: var(--col-d); }
  67% { background-color: var(--col-a); }
  to { background-color: var(--col-b); }
}
@keyframes ani_dabc {
  from { background-color: var(--col-d); }
  34% { background-color: var(--col-a); }
  67% { background-color: var(--col-b); }
  to { background-color: var(--col-c); }
}

/* die b-liga */
@keyframes ani_acbd {
  from { background-color: var(--col-a); }
  34% { background-color: var(--col-c); }
  67% { background-color: var(--col-b); }
  to { background-color: var(--col-d); }
}
@keyframes ani_bdca {
  from { background-color: var(--col-b); }
  34% { background-color: var(--col-d); }
  67% { background-color: var(--col-c); }
  to { background-color: var(--col-a); }
}

}

.diva, .divb, .divc, .divd {
  --div-w: 62px;
   /* https://colordesigner.io/gradient-generator */
  --col-a: mediumvioletred; /* #c51685 */
  --col-b: #c55616;
  --col-c: #85c516;
  --col-d: #16c556;

/*  --col-a: yellow;*/
/*  --col-b: yellowgreen;*/
/*  --col-c: greenyellow;*/
/*  --col-d: green;*/

  --borcol-a: white;
  --ani-t: 4s;
  width: var(--div-w);
  height: var(--div-w);
  border: 2px outset var(--borcol-a);
  border-radius: 2rem;
  margin: calc(var(--div-w) / 1.1);
  padding:0;
}
.diva {
  background-color: var(--col-a);
  animation: ani_abcd var(--ani-t) linear infinite;
}
.divb {
  background-color: var(--col-b);
  animation: ani_bcda var(--ani-t) linear infinite;
  animation-delay: 0.5s;
}
.divc {
  background-color: var(--col-c);
  animation: ani_cdab var(--ani-t) linear infinite;
  animation-delay: 1.5s;
}
.divd {
  background-color: var(--col-d);
  animation: ani_dabc var(--ani-t) linear infinite;
  animation-delay: 2.5s;
}

/* hic sunt delays */
/*
@media screen {

.diva:nth-child(even) {
  animation-delay: 1s;
}
.divb:nth-child(even) {
  animation-delay: 1.25s;
}

}
*/