html { background: linear-gradient(#000005, #050520); }
canvas {
display: block;
}
#light {
background: radial-gradient(30% 60%, circle contain, hsla(240, 100%, 20%, .25) 0%, hsla(240, 0%, 0%, 0) 100%);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
#ground {
background: linear-gradient(#101020, #001);
bottom: 0;
height: 30%;
left: 0;
position: absolute;
width: 100%;
}
#moon {
background: linear-gradient(#99a, #eef);
border-radius: 100%;
box-shadow: 0 0 150px hsla(0, 0%, 100%, .3);
top: 25%;
height: 500px;
left: 32%;
margin: -100px 0 0 -100px;
position: absolute;
width: 500px;
}
#house {
background: #000;
bottom: 30%;
height: 18px;
left: 30%;
margin: 0 0 0 -15px;
position: absolute;
width: 30px;
}
#house:before {
background: #000;
top: -15px;
content: '';
display: block;
height: 12px;
left: 21px;
margin: 0 0 0 0;
position: absolute;
width: 6px;
z-index: 2;
}
#house:after {
border-bottom: 15px solid #000;
border-right: 20px solid transparent;
border-left: 20px solid transparent;
top: -15px;
content: '';
display: block;
height: 0;
left: 50%;
margin: 0 0 0 -20px;
position: absolute;
width: 0;
}