:root {
    --body-bg: #e0e4e4;
}
html, body {
    border:0;
    margin:0;
    padding:0;
    overflow:hidden;
    width:100%;
    height:100%;
    background:var(--body-bg);
}
d {
    --time:1s;
    --maxwidth: 300px;
    --hue: 0deg;
    --op:.3;
    
    position:absolute;
    border-radius:50%;
    transition:all 1s;
    border:solid black 1px;
    aspect-ratio:1.618;
    transform: translate(-50%, -50%);
    width:0;
    
    animation: spread var(--time) infinite ease-out;
	animation-delay:0s;
    
    
    border-color: hsl(var(--hue), var(--sat), 50%);
    
    z-index:0;
    
}
@keyframes spread {
  0% {
        width:0px;
  		opacity:0;
  }
  30% {opacity:var(--op)}
  30% {opacity:var(--op)}
  100% {
  		width:var(--maxwidth);
  		opacity:0;
	}
}