*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
*::before,*::after{content:'';position:absolute}
.city{height:100vh;font:12px/1 'Avenir Next',sans-serif;background:#161a1d}
.back{position:relative;min-width:1400px;height:calc(100vh - 40px);background:#21262c;padding-left:15%}
.back::after{left:0;bottom:0;width:100%;height:150px;background:linear-gradient(transparent,#21262c)}
.front{padding-left:15%}
.inner{position:relative;width:1400px;height:100%;margin:0 auto}
.tower{position:absolute;bottom:0;width:130px;background:#161a1d;box-shadow:inset 2px 0 0 #111417,inset -2px 0 0 #111417,inset 0 3px 0 #111417,inset 0 -20px 0 #111417}
.tower:nth-child(1)::after{height:100%;background:rgba(33,38,44,0.8)}
.tower:nth-child(2)::after{height:100%;background:rgba(33,38,44,0.8)}
.tower:nth-child(3)::after{height:100%;background:rgba(33,38,44,0.8)}
.tower:nth-child(4)::after{height:100%;background:rgba(33,38,44,0.8)}
.tower:nth-child(5)::after{height:100%;background:rgba(33,38,44,0.8)}
.tower:nth-child(6)::after{height:100%;background:rgba(33,38,44,0.8)}
.tower:nth-child(7)::after{height:100%;background:rgba(33,38,44,0.8)}
.tower:nth-child(8)::after{height:100%;background:rgba(33,38,44,0.4)}
.tower:nth-child(9)::after{height:100%;background:rgba(33,38,44,0.4)}
.tower:nth-child(10)::after{height:100%;background:rgba(33,38,44,0.4)}
.tower:nth-child(11)::after{height:100%;background:rgba(33,38,44,0.4)}
.tower:nth-child(12)::after{height:100%;background:rgba(33,38,44,0.4)}
.tower:nth-child(13)::after{height:100%;background:rgba(33,38,44,0.4)}
.tower:nth-child(1){height:400px;left:400px}
.tower:nth-child(2){height:380px;left:850px}
.tower:nth-child(3){height:200px;left:0px}
.tower:nth-child(4){height:310px;left:200px}
.tower:nth-child(5){height:350px;left:610px}
.tower:nth-child(6){height:310px;left:1030px}
.tower:nth-child(7){height:200px;right:0px}
.tower:nth-child(8){height:230px;left:120px}
.tower:nth-child(9){height:280px;left:340px}
.tower:nth-child(10){height:260px;left:530px}
.tower:nth-child(11){height:240px;left:750px}
.tower:nth-child(12){height:250px;left:1000px}
.tower:nth-child(13){height:160px;left:1170px}
.tower:nth-child(14){height:110px;left:70px}
.tower:nth-child(15){height:140px;left:390px}
.tower:nth-child(16){height:190px;left:620px}
.tower:nth-child(17){height:140px;left:780px}
.tower:nth-child(18){height:80px;left:1040px}
.radio{position:absolute;top:-5px;left:50%;width:20px;height:5px;margin-left:-10px;background:#1c2126}
.radio::before{top:-90px;left:9px;width:2px;height:90px;background:#1c2126}
.radio::after{top:-70px;left:9px;width:2px;height:2px;border-radius:50%;box-shadow:0 5px 0 red,0 5px 5px red,0 5px 10px red,0 25px 0 red,0 25px 5px red,0 25px 10px red,0 45px 0 red,0 45px 5px red,0 45px 10px red;animation:2s radio infinite}
.tower:nth-child(2) .radio::after{}
@keyframes radio{50%{opacity:0}
100%{opacity:0}
}.win{position:absolute;top:5px;left:2px;width:calc(100% - 4px);height:calc(100% - 27px);overflow:hidden}
.win::after{top:0;left:0;width:6px;height:3px;background:#2e3338}
.tower:nth-child(1) .win::after{}
.tower:nth-child(2) .win::after{}
.tower:nth-child(3) .win::after{}
.tower:nth-child(4) .win::after{}
.tower:nth-child(5) .win::after{}
.tower:nth-child(6) .win::after{}
.tower:nth-child(7) .win::after{}
.tower:nth-child(8) .win::after{}
.tower:nth-child(9) .win::after{}
.tower:nth-child(10) .win::after{}
.tower:nth-child(11) .win::after{}
.tower:nth-child(12) .win::after{}
.tower:nth-child(13) .win::after{}
.tower:nth-child(14) .win::after{}
.tower:nth-child(15) .win::after{}
.tower:nth-child(16) .win::after{}
.tower:nth-child(17) .win::after{}
.tower:nth-child(18) .win::after{}
.win::before{top:5px;left:0;width:100%;height:3px;background:rgba(17,20,23,0.4)}
.moon{position:absolute;right:30px;top:100px;width:80px;height:80px;border-radius:50%;background:linear-gradient(#afbfcf,#73808c)}
.front .inner{height:40px}
.welcome{position:absolute;top:-52px;left:50%;width:200px;height:43px;margin-left:-100px;text-align:center;background:#171b1f;box-shadow:0 0 0 2px #161a1d}
.welcome h1{margin:5px 0;font-size:9px;letter-spacing:10px;color:#2e3338}
.welcome h2{font-size:18px;letter-spacing:5px;color:#94a6b8;margin-top:0}
.welcome h2 span{color:#2e3338;text-shadow:0 0 0;animation:3s letter infinite}
@keyframes letter{4%{color:#2e3338}
8%{color:#94a6b8}
12%{color:#2e3338}
16%{color:#94a6b8}
20%{color:#2e3338}
100%{color:#2e3338}
}.welcome::before,.welcome::after{top:-10px;left:-8px;width:8px;height:110px;border-left:2px solid #161a1d;border-right:2px solid #161a1d;background-image:repeating-linear-gradient(transparent,transparent 8px,#161a1d 8px,#161a1d 16px)}
.welcome::after{left:auto;right:-8px}
.trees{width:100%}
.tree{position:absolute;left:0;bottom:40px;width:6px;height:30px;background:#161a1d}
.tree:nth-child(1){left:35px}
.tree:nth-child(2){left:70px}
.tree:nth-child(3){left:105px}
.tree:nth-child(4){left:140px}
.tree:nth-child(5){left:175px}
.tree:nth-child(6){left:210px}
.tree:nth-child(7){left:245px}
.tree:nth-child(8){left:280px}
.tree:nth-child(9){left:315px}
.tree:nth-child(10){left:350px}
.tree:nth-child(11){left:385px}
.tree:nth-child(12){left:420px}
.tree:nth-child(13){left:455px}
.tree:nth-child(14){left:490px}
.tree:nth-child(15){left:525px}
.tree:nth-child(16){left:870px}
.tree:nth-child(17){left:905px}
.tree:nth-child(18){left:940px}
.tree:nth-child(19){left:975px}
.tree:nth-child(20){left:1010px}
.tree:nth-child(21){left:1045px}
.tree:nth-child(22){left:1080px}
.tree:nth-child(23){left:1115px}
.tree:nth-child(24){left:1150px}
.tree:nth-child(25){left:1185px}
.tree:nth-child(26){left:1220px}
.tree:nth-child(27){left:1255px}
.tree:nth-child(28){left:1290px}
.tree:nth-child(29){left:1325px}
.tree:nth-child(30){left:1360px}
.tree::before{top:-15px;left:50%;width:30px;height:30px;margin-left:-15px;border-radius:25px 0 25px 0;background:#161a1d;transform:rotate(-45deg)}
canvas{position:absolute;top:0;left:0;z-index:1}