CSS
body{
background:black;
}
.container{
position:relative;
width:800px;
height:600px;
background:#190721;
padding-top:50px;
margin:90px auto;
}
.desert{
position:relative;
width:300px;
height:550px;
background: -webkit-linear-gradient(top, rgba(86,1,39,1) 0%,rgba(145,2,2,1) 47%,rgba(241,116,50,1) 100%);
background: linear-gradient(to bottom, rgba(86,1,39,1) 0%,rgba(145,2,2,1) 47%,rgba(241,116,50,1) 100%);
margin:0px auto;
overflow:hidden
}
.sol{
position:absolute;
width:60px;
height:60px;
background: -webkit-linear-gradient(top, rgba(241,116,50,1) 0%,rgba(241,116,50,0.26) 64%,rgba(241,116,50,0) 86%);
background: linear-gradient(to bottom, rgba(241,116,50,1) 0%,rgba(241,116,50,0.26) 64%,rgba(241,116,50,0) 86%);
border-radius:100%;
box-shadow:-3px -5px 35px rgb(255, 149,73);
margin:162px 172px
}
.nubes,.nubes3,.nubes7,.nubes9,.nubes12{
position:absolute;
width:50px;
height:50px;
border-radius:100%;
background: -webkit-linear-gradient(top, rgba(241,116,50,.3) 0%,rgba(241,116,50,0) 43%,rgba(241,116,50,0) 73%);
background: linear-gradient(to bottom, rgba(241,116,50,.3) 0%,rgba(241,116,50,0) 43%,rgba(241,116,50,0) 73%);
}
.nubes{margin: 142px 192px;}
.nubes3{margin: 212px 132px;}
.nubes7{margin: 102px 12px;}
.nubes9{margin: 291px 12px;}
.nubes12{margin: 360px 192px;}
.nubes::before,.nubes3::before,.nubes7::before,.nubes9::before,.nubes12::before{
content:"";
position:absolute;
width:40px;
height:40px;
border-radius:100%;
background: -webkit-linear-gradient(top, rgba(241,116,50,.3) 0%,rgba(241,116,50,0) 43%,rgba(241,116,50,0) 73%);
background: linear-gradient(to bottom, rgba(241,116,50,.3) 0%,rgba(241,116,50,0) 43%,rgba(241,116,50,0) 73%);
margin: -7px 30px;
}
.nubes::after,.nubes3::after,.nubes7::after,.nubes9::after,.nubes12::after{
content:"";
position:absolute;
width:40px;
height:40px;
border-radius:100%;
background: -webkit-linear-gradient(top, rgba(241,116,50,.3) 0%,rgba(241,116,50,0) 43%,rgba(241,116,50,0) 73%);
background: linear-gradient(to bottom, rgba(241,116,50,.3) 0%,rgba(241,116,50,0) 43%,rgba(241,116,50,0) 73%);
margin: 12px 50px;
}
.cerro,.cerro7,.cerro12{
position:absolute;
width:261px;
height:261px;
border-radius:30px 0 0 0;
background: -webkit-linear-gradient(-45deg, rgba(255,60,53,1) 0%,rgba(142,23,2,1) 43%);
background: linear-gradient(135deg, rgba(255,60,53,1) 0%,rgba(142,23,2,1) 43%);
transform:rotate(45deg);
overflow:hidden
}
.cerro{margin:450px 21px;}
.cerro7{
margin:450px -53px;
transform:rotate(45deg) scale(.7);
}
.cerro3,.cerro9,.cerro21{
position:absolute;
width:231px;
height:231px;
border-radius:100%;
background: -webkit-linear-gradient(-45deg, rgba(109,16,2,1) 66%,rgba(255,60,53,1) 100%);
background: linear-gradient(135deg, rgba(109,16,2,1) 66%,rgba(255,60,53,1) 100%);
margin:-9px -162px
}
.cerro12{
transform:rotate(45deg) scale(.5);
margin:412px 121px
}
.s1,.s2,.s3,.s4,.s5,.s6,.s7{
position:absolute;
width:9px;
height:9px;
border-radius:100%;
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,199,117,1) 0%,rgba(249,149,0,0.68) 46%,rgba(249,149,0,0.31) 98%);
background: radial-gradient(ellipse at center, rgba(255,199,117,1) 0%,rgba(249,149,0,0.68) 46%,rgba(249,149,0,0.31) 98%);
box-shadow:0px 0px 9px rgba(255,255,255,.7);
}
.s1{
margin:21px 60px;
animation:brilla 1.2s alternate infinite;
}
.s2{
margin:70px 90px;
transform:scale(.7);
animation:brilla .9s alternate infinite;
}
.s3{
margin:40px 142px;
animation:brilla .7s alternate infinite;
}
.s4{
margin:70px 201px;
transform:scale(.7);
animation:brilla .6s alternate infinite;
}
.s5{
margin:21px 231px;
animation:brilla .8s alternate infinite;
}
.s6{
margin:50px 12px;
transform:scale(.9);
animation:brilla .6s alternate infinite;
}
.s7{
margin:50px 271px;
transform:scale(.9);
animation:brilla .6s alternate infinite;
}
@keyframes brilla{
0%{opacity:0.3}
100%{opacity:1}
}
