html {
height: 100%;
}
body {
height: 100%;
background-color: #000;
margin: 0;
padding: 0;
}
.lensflare {
position: relative;
overflow: hidden;
width: 100%;
min-height: 100%;
overflow: hidden;
}
.source-spread {
position: absolute;
background: radial-gradient(rgba(255, 225, 255, .05) 10%, rgba(255, 225, 255, .05) 30%, rgba(0, 0, 0, 0) 60%);
border-radius: 50%;
width: 2000px;
height: 2000px;
margin-top: -1000px;
margin-left: -1000px;
top: 14%;
left: 14%;
z-index: 0;
}
.source {
position: absolute;
background: radial-gradient(#fff 0%, rgba(243, 206, 205, .4) 35%, rgba(88, 88, 88, .3) 60%, rgba(0, 0, 0, 0) 70%);
border-radius: 50%;
width: 800px;
height: 800px;
margin-top: -400px;
margin-left: -400px;
top: 14%;
left: 14%;
z-index: 2;
}
.source-beam {
position: absolute;
background: radial-gradient(rgba(255, 255, 255, .3) 0%, rgba(0, 0, 0, 0) 70%);
border-radius: 50%;
width: 2200px;
height: 28px;
margin-top: -14px;
margin-left: -1100px