.cityscape{--sc-sky1:#b9e0f2;--sc-sky2:#eaf6ee;--sc-sun:#ffd971;--sc-sun-x:1120px;--sc-sun-y:84px;--sc-sun-op:1;--sc-moon-op:0;--sc-stars:0;--sc-cloud:#ffffffe6;--sc-far:#c2d8c9;--sc-build:#e7ded2;--sc-build2:#dbd2c4;--sc-roof:#9aa8b8;--sc-win:#5a6e8259;--sc-win-glow:0;--sc-tower:#6e7b8c;--sc-tower-lights:0;--sc-tree:#7fbf8e;--sc-tree-dark:#5da173;--sc-ground:#d8ecdc;--sc-river:#a8d4e6;width:100%;display:block;overflow:hidden}.cityscape.t-dawn{--sc-sky1:#f6c3ae;--sc-sky2:#fdeedd;--sc-sun:#ff9d5c;--sc-sun-x:220px;--sc-sun-y:240px;--sc-cloud:#fff0e6d9;--sc-far:#cbb3bd;--sc-build:#ecdcd0;--sc-build2:#e0cfc2;--sc-roof:#a394a8;--sc-win:#78646e4d;--sc-tower:#7a7287;--sc-tree:#8fbf94;--sc-ground:#e3e5d2;--sc-river:#d5c3c4}.cityscape.t-dusk{--sc-sky1:#f0916c;--sc-sky2:#fbdfc0;--sc-sun:#ff7e42;--sc-sun-x:260px;--sc-sun-y:260px;--sc-cloud:#ffe2c8cc;--sc-far:#b98d97;--sc-build:#e6cdb9;--sc-build2:#d9bda8;--sc-roof:#8d7d95;--sc-win:#ffd98a;--sc-win-glow:.45;--sc-tower:#6d5f78;--sc-tower-lights:.35;--sc-tree:#6fa87e;--sc-ground:#ddd3bd;--sc-river:#e8b993}.cityscape.t-evening{--sc-sky1:#3d4578;--sc-sky2:#8c7ca4;--sc-sun-op:0;--sc-moon-op:1;--sc-stars:.5;--sc-cloud:#d2cdeb59;--sc-far:#4a4e75;--sc-build:#5d6284;--sc-build2:#525777;--sc-roof:#3d4260;--sc-win:#ffd166;--sc-win-glow:.8;--sc-tower:#454a68;--sc-tower-lights:.8;--sc-tree:#3f6e58;--sc-tree-dark:#35594a;--sc-ground:#454f68;--sc-river:#59628c}.cityscape.t-night{--sc-sky1:#0f152e;--sc-sky2:#262e50;--sc-sun-op:0;--sc-moon-op:1;--sc-stars:1;--sc-cloud:#b4bee624;--sc-far:#202744;--sc-build:#2c3352;--sc-build2:#262c48;--sc-roof:#1b2138;--sc-win:#ffce5e;--sc-win-glow:1;--sc-tower:#232946;--sc-tower-lights:1;--sc-tree:#24483c;--sc-tree-dark:#1d3b32;--sc-ground:#232b45;--sc-river:#2e3a63}.cityscape svg *{transition:fill 1s,opacity 1s,transform 1.2s}.cityscape .sun{transform:translate(var(--sc-sun-x), var(--sc-sun-y));opacity:var(--sc-sun-op)}.cityscape .moon{opacity:var(--sc-moon-op)}.cityscape .stars{opacity:var(--sc-stars)}.cityscape .win{fill:var(--sc-win)}.cityscape .tl{opacity:var(--sc-tower-lights)}.cityscape .cloud{fill:var(--sc-cloud)}.cityscape .cloud-a{animation:46s linear infinite cityscape-drift}.cityscape .cloud-b{animation:62s linear infinite reverse cityscape-drift}@keyframes cityscape-drift{0%{transform:translate(-60px)}50%{transform:translate(60px)}to{transform:translate(-60px)}}.cityscape .tl circle{animation:3.2s ease-in-out infinite cityscape-twinkle}.cityscape .tl circle:nth-child(2n){animation-delay:1.1s}.cityscape .tl circle:nth-child(3n){animation-delay:2s}@keyframes cityscape-twinkle{0%,to{opacity:1}50%{opacity:.45}}