/* pencil doodles drifting freely at random behind the letter, on every screen size */
.doodles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.doodle{position:absolute;left:0;top:0;color:var(--pencil);opacity:.5;will-change:transform}
.doodle.accent{color:var(--orange);opacity:.35}
.doodle svg{width:100%;height:100%;display:block;overflow:visible}
/* cheerful layered motion: the wrapper bobs and rocks, the drawing itself
   does a short playful wiggle every few seconds; durations set per doodle
   from JS through the CSS variables */
.dz{
  display:block;width:100%;height:100%;
  animation:doodleCheer var(--bd,3s) ease-in-out infinite;
  animation-delay:var(--rdel,0s);
}
.doodle svg{
  animation:doodleWiggle var(--wd,9s) ease-in-out infinite;
  animation-delay:var(--wdel,0s);
}
@keyframes doodleCheer{
  0%,100%{transform:translateY(-6px) rotate(-7deg)}
  50%{transform:translateY(6px) rotate(8deg)}
}
@keyframes doodleWiggle{
  0%,86%,100%{transform:scale(1) rotate(0deg)}
  89%{transform:scale(1.15) rotate(-6deg)}
  92%{transform:scale(1.07) rotate(5deg)}
  95%{transform:scale(1.02) rotate(-2deg)}
}
@media(prefers-reduced-motion:reduce){
  .dz,.doodle svg{animation:none}
}
@media(max-width:699px){
  .doodle{opacity:.45}
  .doodle.d1{width:66px!important;height:66px!important}
  .doodle.d2{width:58px!important;height:58px!important}
  .doodle.d3{width:48px!important;height:48px!important}
  .doodle.d4{width:56px!important;height:56px!important}
  .doodle.d5{width:44px!important;height:44px!important}
  .doodle.d6{width:54px!important;height:54px!important}
  .doodle.d7{width:54px!important;height:54px!important}
  .doodle.d8{width:50px!important;height:50px!important}
  .doodle.d9{width:52px!important;height:52px!important}
  .doodle.d10{width:48px!important;height:48px!important}
  .doodle.d11{width:46px!important;height:46px!important}
  .doodle.d12{width:46px!important;height:46px!important}
  .doodle.d13{width:44px!important;height:44px!important}
  .doodle.d14{width:50px!important;height:50px!important}
}
.doodle path,.doodle circle,.doodle rect,.doodle line{
  fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;
}