div {
  text-align:center;
}
body {
  background-color:#DAF7A6;
}

ul {
  display: table;
  margin: 0 auto;
}


/* border animation: tuto vid for conic gradients: https://www.youtube.com/watch?v=ezP4kbOvs_E */
@property --inner {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}
@property --outer {
  syntax: "<percentage>";
  initial-value: 30%;
  inherits: false;
}

.test {
  position: relative;
  margin: 30px auto;
  padding: 2em;
  width: 300px;
  height: 250px;
  background: black;
  border-radius: 35%;
  color: aliceblue;

  display: flex;
  align-items: center;
}

.test::after,
.test::before {
  content: "";
  position: absolute;

  width:100%;
  height:100%;
  top:50%;
  left:50%;
  translate:-50% -50%;
  padding:15px;
  z-index:-1;
  border-radius: 35%;

  background-image: repeating-radial-gradient(
    ellipse 50% 50% at center,
    rgb(14,106,168) var(--inner),
    rgb(53,199,225) var(--outer)
  );

  animation: grow 3s linear infinite;
}

.test::before {
  filter: blur(2.0rem);
  opacity: 0.8;
}

@keyframes grow {
  from {
    --inner: 0%;
    --outer: 30%;
  }
  to {
    --inner: 150%;
    --outer: 180%;
  }
}

.test img{
  min-width:95%;
  min-height: 95%;
}