/* Edit this palette to recolour all of the artwork. */
:root{--pink:#ff417e;--mint:#57ffd2;--yellow:#ffff52;--ink:#174f46;--shadow:#135a4938;background:var(--mint);color:var(--ink);font-family:Arial,Helvetica,sans-serif;color-scheme:light}
*{box-sizing:border-box}html,body{width:100%;overflow-x:hidden}body{margin:0;min-width:240px;min-height:100svh}main{min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:42px 20px;gap:38px}
.composition{position:relative;width:min(500px,73vw,calc((100svh - 160px)*0.98));min-width:200px;aspect-ratio:600/520}svg{display:block;width:100%;height:auto;overflow:visible}
.face{position:absolute;left:25.8333%;top:4.8077%;width:38.3333%;aspect-ratio:254.326/365.116}.face svg{position:absolute;inset:0}.wink{visibility:hidden}.is-winking .normal{visibility:hidden}.is-winking .wink{visibility:visible}
.name{position:absolute;left:4.3333%;top:54.4231%;width:81.3333%}.email-link{display:block;-webkit-tap-highlight-color:transparent;border-radius:12px}a:focus-visible{outline:3px solid var(--ink);outline-offset:9px}
.callout{position:absolute;left:53.3333%;top:11.5385%;width:45.8333%}.bubble-swing{position:relative;transform:rotate(-10deg);transform-origin:5% 96%;filter:drop-shadow(5px 7px 3px var(--shadow))}.bubble-text{position:absolute;left:9.7%;top:28%;width:80.3%}
.burst{position:absolute;width:4%;transform-origin:50% 100%}.burst-one{left:92%;top:-15%;--angle:10deg;transform:rotate(var(--angle))}.burst-two{left:101%;top:-10%;--angle:45deg;transform:rotate(var(--angle))}.burst-three{left:106%;top:2%;--angle:75deg;transform:rotate(var(--angle))}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(prefers-reduced-motion:no-preference){.bubble-swing{animation:bubble-in 800ms 700ms both}.burst{animation:burst-in 280ms both}.burst-one{animation-delay:1250ms}.burst-two{animation-delay:1320ms}.burst-three{animation-delay:1390ms}}
@keyframes bubble-in{0%{opacity:0;transform:rotate(24deg) scale(.02)}12%{opacity:1}60%{opacity:1;transform:rotate(-14deg) scale(1.07)}80%{transform:rotate(-8deg) scale(.98)}100%{opacity:1;transform:rotate(-10deg) scale(1)}}
@keyframes burst-in{from{opacity:0;transform:rotate(var(--angle)) scale(.1)}70%{opacity:1;transform:rotate(var(--angle)) scale(1.14)}to{opacity:1;transform:rotate(var(--angle)) scale(1)}}
@media(max-width:480px){main{gap:32px;padding-inline:16px}.composition{width:85vw}}
@media(max-height:480px) and (orientation:landscape){main{padding-block:20px;gap:10px}.composition{width:min(370px,calc((100svh - 95px)*1.154))}}

/* Centre the face and wordmark; the callout does not affect their layout. */
.composition{left:0}
.face{left:30.8333%}
.name{left:9.3333%}
.callout{left:58.3333%}
.composition{transform:translateY(-2.054%)}


/* Mobile-only sizing: keep the callout/burst comfortably inside the viewport. */
@media(max-width:480px){
  .callout{left:59%;top:13%;width:40%}
  .burst{width:3.5%}
  .burst-one{left:91%;top:-13%}
  .burst-two{left:99%;top:-8%}
  .burst-three{left:103%;top:3%}
}