@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@500;700&family=Fredoka:wght@500;600&display=swap');

:root { background:#c8e8ff; color:#173b3d; }
* { box-sizing:border-box; }
body { margin:0; min-height:100vh; overflow:hidden; font-family:"DM Sans",Arial,sans-serif; }
main { min-height:100vh; display:grid; place-items:center; padding:32px; position:relative; background:linear-gradient(#bfe7ff 0 72%,#84c965 72%); }
.card { width:min(620px,100%); position:relative; z-index:2; text-align:center; padding:32px 32px 40px; }
.card img { width:min(365px,82vw); height:auto; margin:0 auto 35px; filter:drop-shadow(0 9px 0 rgba(23,59,61,.12)); }
.sign { position:relative; display:inline-block; background:#ffcf32; border:5px solid #173b3d; border-radius:12px; padding:18px 28px; box-shadow:0 9px 0 #173b3d; transform:rotate(-1.5deg); }
.sign:before,.sign:after { content:""; width:9px; height:9px; position:absolute; border-radius:50%; background:#173b3d; top:9px; }.sign:before{left:10px}.sign:after{right:10px}
p { margin:0; color:#173b3d; font:600 clamp(22px,4.5vw,36px)/1.1 Fredoka,"DM Sans",sans-serif; }
.construction-scene { position:absolute; inset:0; pointer-events:none; }
.ground { position:absolute; left:0; right:0; bottom:0; height:28%; background:repeating-linear-gradient(135deg,#69ad4e 0 28px,#7fc85d 28px 56px); }
.cloud { position:absolute; border-radius:999px; background:rgba(255,255,255,.86); width:126px; height:36px; }.cloud:before,.cloud:after{content:"";position:absolute;background:inherit;border-radius:50%}.cloud:before{width:52px;height:52px;left:20px;bottom:0}.cloud:after{width:68px;height:68px;right:14px;bottom:0}.cloud--one{top:15%;left:10%;transform:scale(.75)}.cloud--two{top:28%;right:10%;transform:scale(.55)}
.crane { position:absolute; right:9%; bottom:27%; width:12px; height:250px; background:#f6ae1b; border:3px solid #173b3d; transform:skewY(-5deg); }.crane:before{content:"";position:absolute;right:-3px;top:-3px;width:195px;height:12px;background:#f6ae1b;border:3px solid #173b3d}.crane i{position:absolute;right:91px;top:10px;width:2px;height:125px;background:#173b3d}.crane b{position:absolute;right:84px;top:130px;width:16px;height:19px;border:3px solid #173b3d;border-top:0;border-radius:0 0 9px 9px}.cone{position:absolute;bottom:22%;width:42px;height:70px;background:repeating-linear-gradient(to bottom,#f16535 0 18px,#fff7e8 18px 31px);clip-path:polygon(50% 0,100% 100%,0 100%);filter:drop-shadow(2px 3px 0 #173b3d)}.cone--one{left:12%}.cone--two{right:21%;transform:scale(.7)}
@media(max-width:700px){.crane{right:3%;transform:scale(.65);transform-origin:bottom right}.cloud--one{left:-5%}.cone--one{left:6%}.card{padding:12px}.ground{height:23%}}
@media(prefers-reduced-motion:no-preference){.cloud--one{animation:float 6s ease-in-out infinite}.cloud--two{animation:float 8s 1s ease-in-out infinite}@keyframes float{50%{translate:16px -7px}}}