:root{--building-color1: #aa80ff;--building-color2: #66cc99;--building-color3: #cc6699;--building-color4: #538cc6;--window-color1: #bb99ff;--window-color2: #8cd9b3;--window-color3: #d98cb3;--window-color4: #8cb3d9}body.dark-mode{--building-color1: #000;--building-color2: #000;--building-color3: #000;--building-color4: #000;--window-color1: #777;--window-color2: #777;--window-color3: #777;--window-color4: #777}body.dark-neon-mode{--window-color1: #bb99ff;--window-color2: #8cd9b3;--window-color3: #d98cb3;--window-color4: #8cb3d9}body.dark-mode .sky{background:radial-gradient(closest-corner circle at 15% 15%,#ccc,#ccc 20%,#445 21%,#223)}*{box-sizing:border-box}body{height:100vh;margin:0;overflow:hidden}.controls{position:fixed;width:auto;max-width:300px;top:5%;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:10px;z-index:10;padding:10px;background-color:#fffc;border-radius:10px;box-shadow:0 2px 10px #00000080}.title{font-size:24px;font-family:fantasy;margin:0}.author{font-size:8px;font-family:fantasy;margin:0}.buttons{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center;align-items:center;gap:10px}.buttons button{width:125px;padding:5px 15px;border:none;background-color:#36add4;color:#fff;font-size:16px;cursor:pointer;border-radius:5px}.buttons button:hover{background-color:#005bb5}.buttons button:disabled{background-color:#36add4;color:#bbb;cursor:not-allowed;opacity:.6}body.rain-mode{position:relative;overflow:hidden}body.rain-mode:before,body.snow-mode:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:#0003;pointer-events:none;z-index:6}.drop{position:absolute;top:-20px;width:2px;height:20px;background:#4d92b7;animation:rainfall 1s infinite linear;opacity:.7;pointer-events:none;z-index:7}body.snow-mode{position:relative;overflow:hidden}.snowflake{position:absolute;top:-10px;width:4px;height:4px;background:#fff;border-radius:50%;animation:snowfall linear infinite;opacity:.8;pointer-events:none;z-index:7}.background-buildings,.foreground-buildings{width:100%;height:100%;display:flex;align-items:flex-end;justify-content:space-evenly;position:absolute;top:0}.building-wrap{display:flex;flex-direction:column;align-items:center}.window-wrap{display:flex;align-items:center;justify-content:space-evenly}.sky{background:radial-gradient(closest-corner circle at 15% 15%,#ffcf33,#ffcf33 20%,#ff6 21%,#bef)}.cloud{position:absolute;top:0;background:#ffffffe6;border-radius:50px;box-shadow:-20px 20px #f5f5f5cc,20px 20px #f5f5f5cc;opacity:1;pointer-events:none;z-index:3;animation:drift-cloud 6s ease-in-out infinite alternate;display:none}body.dark-mode .cloud{background:#969696e6;box-shadow:-20px 20px #787878cc,20px 20px #787878cc}body.rain-mode .sky:before,body.snow-mode .sky:before{content:"";position:absolute;top:10%;left:15%;width:150px;height:80px;background:#fafafa;border-radius:50px;box-shadow:-20px 20px #fafafa,20px 20px #fafafa;opacity:.85;z-index:3;transition:opacity .5s ease,transform .5s ease;transform:translate(0);animation:drift-cloud 6s ease-in-out infinite alternate}body.dark-mode.rain-mode .sky:before,body.dark-mode.snow-mode .sky:before{background:#969696;box-shadow:-20px 20px #787878,20px 20px #787878}body:not(.dark-mode).rain-mode .sky,body:not(.dark-mode).snow-mode .sky{background:radial-gradient(closest-corner circle at 15% 15%,#ffcf33,#ffcf33 20%,#bbb 21%,#bef)}body.rain-mode .sky .dark-mode,body.snow-mode .sky .dark-mode{background:radial-gradient(closest-corner circle at 15% 15%,#ccc,#ccc 20%,#445 21%,#223)}.bb1{width:10%;height:70%}.bb1-spire{width:3%;height:12%;background-color:var(--building-color1);position:relative}.bb1-spire-light{position:absolute;top:0;left:0;width:100%;height:10%;background-color:red;animation:blink-red 2s infinite ease-in-out}.bb1a{width:70%}.bb1b{width:80%}.bb1c{width:90%}.bb1d{width:100%;height:70%;background:linear-gradient(var(--building-color1) 50%,var(--window-color1))}.bb1-window{height:10%;background:linear-gradient(var(--building-color1),var(--window-color1))}.bb2{width:10%;height:50%}.bb2a{border-bottom:5vh solid var(--building-color2);border-left:5vw solid transparent;border-right:5vw solid transparent}.bb2b{width:100%;height:100%;background:repeating-linear-gradient(var(--building-color2),var(--building-color2) 6%,var(--window-color2) 6%,var(--window-color2) 9%)}.bb3{width:10%;height:55%;background:repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3),var(--window-color3) 15%)}.bb4{width:11%;height:58%}.bb4-spire{width:3%;height:10%;background-color:var(--building-color4);position:relative}.bb4-spire-light{position:absolute;top:0;left:0;width:100%;height:10%;background-color:red;animation:blink-red 2s infinite ease-in-out}.bb4a{width:80%;height:5%;background-color:var(--building-color4)}.bb4b{width:100%;height:85%;background-color:var(--building-color4)}.bb4-window{width:18%;height:90%;background-color:var(--window-color4)}.fb1{width:10%;height:60%}.fb1a{border-bottom:7vh solid var(--building-color4);border-left:2vw solid transparent;border-right:2vw solid transparent}.fb1b{width:60%;height:10%;background-color:var(--building-color4)}.fb1c{width:100%;height:80%;background:repeating-linear-gradient(90deg,var(--building-color4),var(--building-color4) 10%,transparent 10%,transparent 15%),repeating-linear-gradient(var(--building-color4),var(--building-color4) 10%,var(--window-color4) 10%,var(--window-color4) 90%)}.fb1-window{width:80%;height:65%;border-radius:50%;background-color:var(--window-color4);margin:10%}.fb2{width:10%;height:40%}.fb2a{width:100%;border-bottom:10vh solid var(--building-color3);border-left:1vw solid transparent;border-right:1vw solid transparent}.fb2b{width:100%;height:75%;background-color:var(--building-color3)}.fb2-window{width:22%;height:100%;background-color:var(--window-color3)}.fb3{width:10%;height:35%}.fb3-spire{width:3%;height:15%;background-color:var(--building-color1);position:relative}.fb3-spire-light{position:absolute;top:0;left:0;width:100%;height:10%;background-color:red;animation:blink-red 2s infinite ease-in-out}.fb3a{width:80%;height:15%;background-color:var(--building-color1)}.fb3b{width:100%;height:35%;background-color:var(--building-color1)}.fb3-bottom{background:linear-gradient(var(--building-color1) 50%,var(--window-color1))}.fb3-window{width:25%;height:80%;background-color:var(--window-color1)}.fb3-windowb{width:100%;height:100%;background:repeating-linear-gradient(to bottom,var(--building-color1),var(--building-color1) 10%,transparent 10%,transparent 15%),repeating-linear-gradient(var(--building-color1),var(--building-color1) 10%,var(--window-color1) 10%,var(--window-color1) 90%)}.fb4{width:8%;height:45%;position:relative;left:10%}.fb4a{border-top:5vh solid transparent;border-left:8vw solid var(--building-color1)}.fb4b{width:100%;height:89%;background-color:var(--building-color1);display:flex;flex-wrap:wrap}.fb4-window{width:30%;height:10%;border-radius:50%;background-color:var(--window-color1);margin:10%}.fb5{width:10%;height:33%;position:relative;right:10%;background:repeating-linear-gradient(var(--building-color2),var(--building-color2) 5%,transparent 5%,transparent 10%),repeating-linear-gradient(90deg,var(--building-color2),var(--building-color2) 12%,var(--window-color2) 12%,var(--window-color2) 44%)}.fb6{width:9%;height:38%;background:repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3) 10%,transparent 10%,transparent 30%),repeating-linear-gradient(var(--building-color3),var(--building-color3) 10%,var(--window-color3) 10%,var(--window-color3) 30%)}@keyframes blink-red{0%,to{opacity:1}50%{opacity:.4}}@keyframes rainfall{0%{transform:translate(10vw,-100vh) rotate(15deg);opacity:.2}50%{opacity:.7}to{transform:translate(-10vw,100vh) rotate(15deg);opacity:.5}}@keyframes snowfall{0%{transform:translateY(-100vh);opacity:.7}to{transform:translateY(100vh);opacity:.5}}@keyframes drift-cloud{0%{transform:translate(0)}to{transform:translate(20px)}}