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

body {
  margin: 0;
}

@keyframes oaArm { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(7deg); } }
.oa-arm { animation: oaArm 1.8s ease-in-out infinite; }
@keyframes hurrSpin { to { transform: rotate(360deg); } }
.hurr-spin { animation: hurrSpin 8s linear infinite; transform-box: fill-box; transform-origin: center; }

@font-face {
  font-family: 'RoSDigits';
  src: url('https://fonts.gstatic.com/s/vt323/v17/pxiKyp0ihIEF2isfFJU.woff2') format('woff2');
  unicode-range: U+0030-0039;
  size-adjust: 118%;
}
@keyframes ws-spin { to { transform: rotate(360deg); } }
@keyframes ws-drift { 0%,100% { transform: translateX(0); } 50% { transform: translateX(16px); } }
@keyframes ws-fall { 0% { transform: translateY(-6px); opacity: 0; } 25% { opacity: 1; } 100% { transform: translateY(16px); opacity: 0; } }
@keyframes ws-flash { 0%, 82%, 96%, 100% { opacity: 0; } 86%, 92% { opacity: 1; } 89% { opacity: 0.25; } }
@keyframes ph-ring { 0%,100% { transform: rotate(0); } 8% { transform: rotate(-14deg); } 16% { transform: rotate(12deg); } 24% { transform: rotate(-10deg); } 32% { transform: rotate(8deg); } 40% { transform: rotate(0); } }
.ws-sun { animation: ws-spin 24s linear infinite; transform-box: fill-box; transform-origin: center; }
.ws-cloud { animation: ws-drift 7s ease-in-out infinite; }
.ws-drop { animation: ws-fall 1.1s linear infinite; }
.ws-flake { animation: ws-fall 2.4s linear infinite; }
.ws-bolt { animation: ws-flash 3.4s linear infinite; }
.ph-ring { animation: ph-ring 1.4s ease-in-out infinite; display: inline-block; }
@keyframes pc-arm { 0%,100% { transform: rotate(8deg); } 50% { transform: rotate(-12deg); } }
.pc-arm { animation: pc-arm 1.6s ease-in-out infinite; }
@keyframes oa-blink { 0%, 55% { opacity: 1; } 56%, 100% { opacity: 0.25; } }
.oa-blink { animation: oa-blink 1.4s steps(1) infinite; }
@media (prefers-reduced-motion: reduce) { .ws-sun, .ws-cloud, .ws-drop, .ws-flake, .ws-bolt, .ph-ring, .pc-arm, .oa-blink { animation: none !important; } }

@keyframes wxdrift { from { transform: translateX(-10%); } to { transform: translateX(10%); } }
@keyframes wxfall { from { transform: translateY(-25%); opacity: 1; } to { transform: translateY(115%); opacity: 0.75; } }
@keyframes wxdrop { 0% { top: -14%; } 100% { top: 112%; } }
@keyframes wxflash { 0%, 69%, 77%, 100% { opacity: 0; } 71%, 75% { opacity: 1; } }
@keyframes wxspin { to { transform: rotate(360deg); } }
@keyframes wxwobble { 0%, 100% { transform: translateX(-5px) rotate(-3deg); } 50% { transform: translateX(5px) rotate(3deg); } }