<div class="left-flare horizontal-flare"></div>
<div class="right-flare horizontal-flare"></div>
<div class="full-flare horizontal-flare"></div>
<div class="lens-center"></div>
<div class="circle-1"></div>
<div class="circle-2"></div>
<div class="conic-1"></div>
<div class="conic-2"></div>
<div class="conic-3"></div>

body {
    background: black;
    display: grid;
    height: 100vh;
    box-sizing: border-box;
    margin: 0;
    overflow: hidden;
}

.lens-center {
    position: relative;
    width: 40vmin;
    height: 40vmin;
    border-radius: 100%;
    left: calc(35% - (40vmin / 2));
    top: calc(35% - (40vmin / 2));
    background: radial-gradient(closest-side circle at center,
        hsl(4 5% 100% / 100%) 0%, 
        hsl(4 5% 100% / 100%) 15%, 
        hsl(4 10% 70% / 70%) 30%,
        hsl(4 0% 50% / 30%) 55%,
        hsl(4 0% 10% / 5%) 75%,
        transparent 99%
    );
    filter: blur(4px);
}
.lens-center::before{
    content: '';
    display: block;
    width: 80vmin;
    height: 80vmin;
    left: calc((80vmin - 40vmin) / 2 * -1);
    top: calc((80vmin - 40vmin) /2 * -1);
    position: absolute;
    border-radius: 100%;
    background: radial-gradient(closest-side circle at center,
      hsl(4 15% 70% / 15%) 0%,
      transparent 100%);
}

.lens-center::after {
    content: '';
    display: block;
    width: 4vmin;
    height: 4vmin;
    left: 65%;
    bottom: 25%;
    position: absolute;
    border-radius: 100%;
    background: radial-gradient(closest-side circle at center,
        hsl(4 30% 70% / 60%) 0%,
        transparent 75%);
}

.circle-1 {
    width: calc(40vmin * 0.7);
    height: calc(40vmin * 0.7);
    left: 65%;
    top: 65%;
    border-radius: 100%;
    position: absolute;
    background: radial-gradient(closest-side circle at center,
        transparent 50%,
        hsl(4 10% 70% / 40%) 90%,
        transparent 100%);
    filter: blur(5px);
}

.circle-2 {
    width: calc(40vmin * 0.4);
    height: calc(40vmin * 0.4);
    left: 62%;
    top: 62%;
    border-radius: 100%;
    position: absolute;
    background:  hsl(4 10% 60% / 40%);
    filter: blur(2px);
}

.horizontal-flare {
    position: absolute;
    height: 5vh;
}

.right-flare {
    left: 35%;
    width: calc(100vw - 35%);
    top: calc(35% - (5vh / 2));
    background: radial-gradient(ellipse at center left,
        hsl(4 20% 90% / 80%) 0%,
        hsl(4 10% 70% / 40%) 30%,
        transparent 75%);
    filter: opacity(50%);
}

.left-flare {
    left: 0;
    top: calc(35% - (5vh / 2));
    width: 35%;
    background: radial-gradient(ellipse at center right,
        hsl(4 20% 90% / 60%) 0%,
        hsl(calc(4 + 10) 10% 70% / 40%) 30%,
        transparent 75%);
    filter: opacity(40%);
}

.full-flare {
    background: radial-gradient(closest-side ellipse at 45% center,
        hsl(4 20% 90% / 80%) 0%,
        hsl(4 10% 70% / 30%) 30%,
        transparent 95%);
    left: 0%;
    width: 100%;
    top: 75vh; 
    filter: blur(5px);
}


.conic-1 {
    width: calc(40vmin * 1.6);
    height: calc(40vmin * 1.6);
    position: absolute;
    background: conic-gradient(from 5deg at 0% 100%, 
        transparent 0deg,
        hsl(4 10% 70% / 30%) 15deg,
        transparent 30deg);
    left: 35%;
    bottom: calc(100vh - 35%);
    filter: blur(5px);
}

.conic-2 {
    width: calc(40vmin * 3);
    height: calc(40vmin * 3);
    position: absolute;
    background: conic-gradient(from -5deg at 0% 100%, 
        transparent 0deg,
        hsl(4 10% 70% / 30%) 45deg,
        transparent 90deg);
    transform-origin: bottom left;
    transform: rotate(-30deg);
    left: 35%;
    bottom: calc(100vh - 35%);
}
.conic-3 {
    width: calc(40vmin * 3.1);
    height: calc(40vmin * 3.1);
    position: absolute;
    background: conic-gradient(from 5deg at 0% 100%, 
        transparent 0deg,
        hsl(4 10% 70% / 30%) 7deg,
        transparent 15deg);
    transform-origin: bottom left;
    transform: rotate(-45deg);
    filter: blur(5px);
    left: 35%;
    bottom: calc(100vh - 35%);
}