:root{color-scheme:light}*{box-sizing:border-box}body{margin:0;min-height:100vh;font-family:Trebuchet MS,Segoe UI,Arial,sans-serif;background:#87ceeb;overflow-x:hidden;position:relative}body:before{background:url(/img/rolling-wave.jpg) 50%/cover no-repeat}body:after,body:before{content:"";position:fixed;inset:18% 7.5% 6% 7.5%;border-radius:28px;pointer-events:none;z-index:0}body:after{background:hsla(0,0%,100%,.18)}.page{position:relative;width:min(960px,92vw);margin:2rem auto;z-index:1}.rainbow-star{position:fixed;top:2rem;right:2rem;z-index:1;pointer-events:none;width:min(180px,15vw);height:auto}.hero{display:grid;grid-gap:1rem;gap:1rem;grid-template-columns:minmax(0,1fr) 240px;width:88%;margin:0 auto;align-items:center;padding:1rem 1.5rem;border:14px solid transparent;border-radius:16px;background:conic-gradient(from 90deg at top left,transparent 90%,rgba(159,221,255,.75) 0) 0 0 /32px 32px no-repeat,conic-gradient(from 180deg at top right,transparent 90%,rgba(159,221,255,.75) 0) 100% 0 /32px 32px no-repeat,conic-gradient(from 0deg at bottom left,transparent 90%,rgba(159,221,255,.75) 0) 0 100% /32px 32px no-repeat,conic-gradient(from -90deg at bottom right,transparent 90%,rgba(159,221,255,.75) 0) 100% 100% /32px 32px no-repeat,rgba(216,244,255,.75)}h1{margin-top:0;font-size:clamp(2rem,5vw,3rem);color:rgba(16,24,32,.96)}p{font-size:clamp(1.1rem,3vw,1.4rem);margin:.75rem 0;color:rgba(18,28,38,.92)}.intro{padding-right:1rem}.avatar{border-radius:18px;justify-self:center}@media (max-width:760px){.rainbow-star{width:15vw;top:1rem;right:1rem}.hero{grid-template-columns:1fr;text-align:center}.intro{padding-right:0}.avatar{order:-1}}