dialog:has(>form){position:fixed!important;margin:auto;border:none;border-radius:12px;padding:0;width:min(560px,92dvw);box-shadow:0 16px 48px #00000040;background-color:var(--color-bg);&::backdrop{background:#00000059;backdrop-filter:blur(4px)}form{display:flex;flex-direction:column;position:relative;.wave:after{height:24px}fieldset{border:none;display:flex;flex-direction:column;gap:8px;padding:0 32px;margin:48px 0;+fieldset{margin-top:0}}.form-header{display:flex;flex-direction:column;gap:6px;padding:32px;background:var(--color-soft);position:relative}.form-header h3{font-size:22px;font-weight:500;color:var(--color-primary);letter-spacing:.2px;margin:0}.form-header p{margin:0;font-size:14px;color:#666}>.actions{background-color:var(--color-primary);display:flex;justify-content:flex-end;gap:12px;flex-wrap:wrap;padding:32px;button{--button-bg: var(--color-bg);--button-color: var(--color-primary)}}}}label{display:flex;justify-content:space-between;align-items:center;gap:12px;position:relative;color:var(--color-fg);>span{width:160px;font-weight:700}input{width:100%;max-width:100%;padding:10px 16px;font-family:inherit;border-radius:100vw;--input-color: var(--color-ternary);border:1px solid var(--input-color);outline:none;background-color:transparent;color:var(--color-fg);&:user-invalid{--input-color: var(--color-error)}&:user-valid{--input-color: var(--color-success)}&:focus{outline:none}&:focus-visible{--input-color: var(--color-primary);box-shadow:0 0 0 3px oklch(from var(--input-color) 90% calc(c/2) h)}}}label:has(input:user-valid) span:after,label:has(input:user-invalid) span:after{display:inline-block;position:absolute;right:14px;bottom:8px;font-size:18px}label:has(input:user-valid) span:after{content:"\2713";color:var(--color-success)}label:has(input:user-invalid) span:after{content:"\2715";color:var(--color-error)}@media (max-width: 800px){dialog:has(>form){width:min(520px,94dvw);form{label{flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:8px}fieldset{gap:16px}>.actions{justify-content:center}}}}main{padding-bottom:32px;ul{flex-direction:column;gap:16px}section>h3{font-size:36px}section:has(.options){text-align:center;align-items:center;position:relative;gap:64px;max-width:100%;margin:32px 0 0;>h3{color:#fff;text-shadow:0 0 8px rgba(0,0,0,.8)}.background{position:absolute;inset:-35px 0 40%;background-color:var(--color-soft);background-size:cover;background-position:bottom;background-attachment:fixed;display:flex;flex-direction:column;justify-content:space-between;max-width:unset;z-index:-1;pointer-events:none}*{position:relative}>p:has(em){opacity:.8;font-style:italic}>*{max-width:1200px}+section~section{padding-top:0}}ul.options{flex-direction:row;gap:48px;margin:0 auto;li{display:flex;flex:1 1 100%;&:nth-child(1){--reveal-delay: 15%}&:nth-child(2){--reveal-delay: 30%}&:nth-child(3){--reveal-delay: 15%}&:nth-child(4){--reveal-delay: 0%}&:not(:first-child):not(:last-child) article{transform:scale(1.1)}article{flex:1 1 100%;padding:32px 24px;border-radius:8px;backdrop-filter:blur(8px);box-shadow:0 4px 8px #0003;overflow:hidden;position:relative;display:flex;text-align:center;align-items:center;flex-direction:column;max-width:300px;gap:24px;color:#fff;border:1px solid var(--color-primary);background-color:hsl(from var(--color-primary) h s calc(l/2) / 80%);transition-duration:.2s;&:hover{background-color:hsl(from var(--color-primary) h s l / 95%)}p{margin:0}h4+p{opacity:.8;font-size:90%;&[title]{text-decoration:underline;text-underline-offset:3px;text-decoration-style:dashed;text-decoration-color:var(--color-ternary)}+p{flex:1 0 auto;opacity:1}}data{width:calc(100% + 48px);padding:12px;font-weight:700;overflow:hidden;font-size:32px;position:relative;>span{position:relative}sub{font-size:60%;opacity:.8;vertical-align:baseline}&:before{content:"";position:absolute;inset:0;opacity:.4;background-color:var(--color-primary)}}}h4{text-shadow:0 0 4px rgba(0,0,0,.2);font-size:26px}}}}.checklist li{display:flex;gap:8px;&:before{content:"+";color:var(--color-success)}}@media (max-width: 1200px){main{ul.options{max-width:640px;display:grid;columns:2;gap:32px;li article{transform:none!important}}}}@media (max-width: 800px){main{padding-bottom:100px;section{padding-block:32px}h3{font-size:24px}section:has(.options){margin-top:0;gap:32px;padding-block:64px;h3{color:var(--color-fg);text-shadow:none}&:before{display:none}ul{flex-direction:column}.background{position:absolute;inset:0;background-color:var(--color-secundary);background-image:none!important}}ul.options{display:flex;flex-direction:column;gap:32px;li{article{border-radius:8px;backdrop-filter:none;box-shadow:none;border:none;max-width:400px;data{font-size:24px}}}}}}main{section:has(.options){.background{background-image:url("./opvang-v1.1.webp")}}section:first-child,section:last-of-type{.actions{display:flex;gap:16px;flex-wrap:wrap}}sub{font-size:60%}section.panorama{position:relative;img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}&:before{content:"";inset:0;opacity:0;position:absolute;z-index:1;background-color:#0006;animation:reveal 2s linear forwards;animation-timeline:view(70% 20%)}aside{border:1px solid var(--color-bg);margin-left:auto;max-width:502px;color:var(--color-fg);padding:32px;border-radius:8px;display:flex;flex-direction:column;text-wrap:balance;z-index:1;position:relative;box-shadow:0 0 16px #0006;opacity:0;overflow:hidden;backdrop-filter:blur(16px);&.left{margin-left:0;margin-right:auto}h3{margin:0}>*{position:relative}&:before{content:"";position:absolute;inset:0;opacity:.6;z-index:0;background-color:var(--color-bg)}}}section.donations{.background{background-image:url("./hond-en-kat-v1.1.webp")}h3{margin-top:32px}input{--input-color: #ffffff;color:#fff}button{margin-top:auto}}section.paw-support{margin-top:256px;.background{background-color:hsl(from var(--color-fg) h s l / 10%);background-image:none}img{border-radius:100vw;padding:30px;background-color:var(--color-bg)}article .icon{font-size:48px;min-width:48px}h3{color:var(--color-fg)}}section.paw-support,section.donations{p{font-size:18px;opacity:.8;max-width:720px}}}#qr-container{width:256px;height:256px;margin:64px auto 48px;min-width:128px;border-radius:5px;overflow:hidden;box-shadow:0 0 0 8px #fff}.bank-info{display:flex;flex-direction:column;gap:8px;width:60%;margin:0 auto 64px;color:var(--color-fg);>div{display:flex;justify-content:space-between;cursor:pointer;>span:first-child{opacity:.8}>span:last-child{font-weight:700;color:var(--color-primary);&.copied{color:var(--color-success)}}}}@media (min-width: 801px){main{section.paw-support{img{margin:-64px auto 0}h3{margin-top:-24px}}}}@media (max-width: 800px){main{section.donations{padding-block:64px!important}section.panorama{padding:0;&:before,img{display:none}aside{max-width:100vw;border-radius:0;border:none;background-color:var(--color-ternary);color:var(--color-bg);animation:none;box-shadow:none;backdrop-filter:none;overflow:unset;opacity:1;animation:none!important;transform:translateY(0)!important;padding-top:96px;padding-bottom:96px;.button{--button-bg: var(--color-bg)}&:before{display:none}}}}}