:root {
    --background: #202020;
    --color: #add8e6;
}

body {
    margin: 0;
    height: 100svh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--background);
}

.circle {
    width: min(25vw, 25vh);
    height: min(25vw, 25vh);
    border-radius: 50%;
    background-color: var(--color);
    animation: effect 7.5s linear infinite;
}

@keyframes effect {
    0%, 100% {
        box-shadow: 0 0 0 0 var(--color);
    }

    50% {
        box-shadow: 0 0 0 min(7.5vw, 7.5vh) var(--color);
    }
}