*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

html,
body{
    width:100%;
    height:100%;
    overflow:hidden;
    background:#000;
}

.hero{
    position:fixed;
    inset:0;

    background-image:url("bg.png");
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center center;

    overflow:hidden;
}

/* ---------- Desktop ---------- */

.overlay{
    position:absolute;
    inset:0;

    background:
    radial-gradient(circle at center,
        rgba(0,0,0,0) 20%,
        rgba(0,0,0,.25) 55%,
        rgba(0,0,0,.72) 100%),

    linear-gradient(
        to bottom,
        rgba(0,0,0,.05),
        rgba(0,0,0,.18),
        rgba(0,0,0,.55));
}

.light{

    position:absolute;

    width:900px;
    height:900px;

    top:-25%;
    left:-20%;

    border-radius:50%;

    background:
    radial-gradient(circle,
    rgba(255,220,140,.22),
    transparent 72%);

    filter:blur(90px);

    animation:lightMove 18s ease-in-out infinite alternate;

    pointer-events:none;

}

@keyframes lightMove{

0%{

transform:translate(0,0);

}

100%{

transform:translate(80px,35px);

}

}

.fog{

position:absolute;

width:200%;
height:200%;

left:-50%;
top:-50%;

background:
radial-gradient(circle,
rgba(255,255,255,.04),
transparent 70%);

filter:blur(110px);

animation:fogMove 70s linear infinite;

pointer-events:none;

}

.fog2{

opacity:.35;

animation-duration:100s;

animation-direction:reverse;

}

@keyframes fogMove{

from{

transform:translateX(0);

}

to{

transform:translateX(-260px);

}

}

.dust{

position:absolute;
inset:0;

background-image:
radial-gradient(rgba(255,255,255,.65) .8px,transparent .9px);

background-size:150px 150px;

opacity:.08;

animation:dustMove 80s linear infinite;

pointer-events:none;

}

@keyframes dustMove{

from{

transform:translateY(0);

}

to{

transform:translateY(-800px);

}

}


/* ---------- Tablet ---------- */

@media (max-width:992px){

.hero{

background-position:center center;

}

.light{

width:700px;
height:700px;

}

}


/* ---------- Mobile ---------- */

@media (max-width:768px){

.hero{

background-image:url("bgmobile.png");
background-size:cover;
background-position:center center;

}

.light{

width:450px;
height:450px;

top:-15%;
left:-30%;

opacity:.8;

}

.fog{

opacity:.18;

}

.dust{

opacity:.05;

}

}


/* ---------- Small phones ---------- */

@media (max-width:480px){

.hero{

background-image:url("bgmobile.png");
background-size:cover;
background-position:center center;

}

.overlay{

background:
linear-gradient(
180deg,
rgba(0,0,0,.08),
rgba(0,0,0,.22),
rgba(0,0,0,.58));

}

}