#storm{
position:fixed;
left:0;top:0;
width:100%;
height:100%;
pointer-events:none;
z-index:2;
}
body{overflow-x:hidden;}
.fog{
position:fixed;
bottom:-120px;
left:-20%;
width:150%;
height:350px;
background:radial-gradient(circle,rgba(255,255,255,.12),transparent 70%);
filter:blur(70px);
animation:fog 18s infinite alternate ease-in-out;
pointer-events:none;
z-index:1;
}
@keyframes fog{
to{transform:translateX(120px) translateY(-25px);}
}
body::before{
content:"";
position:fixed;
left:-30%;
top:-30%;
width:170%;
height:170%;
background:
radial-gradient(circle,#ff003322,transparent 60%),
radial-gradient(circle,#ffbf0030,transparent 60%),
radial-gradient(circle,#ffffff08,transparent 75%);
animation:aurora 25s linear infinite;
z-index:-1;
}
@keyframes aurora{
to{transform:rotate(360deg);}
}