:root{--leaf-brown: rgb(184, 80, 40);--leaf-orange: rgb(226, 140, 63);--leaf-yellow: rgb(255, 200, 120)}@keyframes backround-pan{0%{background-position:0% center}to{background-position:-200% center}}@keyframes scale{0%,to{transform:scale(0)}50%{transform:scale(1)}}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(180deg)}}body{background-color:#0a0a0a;display:grid;height:100vh;margin:0;overflow:hidden;place-items:center}h1{color:#fff;font-family:Rubik,sans-serif;font-size:clamp(2rem,2vw,4rem);font-weight:400;margin:0;padding:20px;text-align:center}h1>.autumn{display:inline-block;position:relative}h1>.autumn>.autumn-leaves{--size: clamp(20px, 1.5vw, 30px);animation:scale .7s ease forwards;display:block;height:var(--size);left:var(--leaves-left);position:absolute;top:var(--leaves-top);width:var(--size)}h1>.autumn>.autumn-leaves>svg{display:block;opacity:.7;animation:rotate 1s linear infinite}h1>.autumn>.autumn-leaves>svg>g>path{fill:var(--leaf-orange)}h1>.autumn>.autumn-leaves>svg>path>g{fill:var(--leaf-orange)}h1>.autumn>.autumn-text{animation:backround-pan 3s linear infinite;background:linear-gradient(to right,var(--leaf-brown),var(--leaf-orange),var(--leaf-yellow),var(--leaf-brown));background-size:200%;-webkit-background-clip:text;-webkit-text-fill-color:transparent;white-space:nowrap}