body,header{align-items:center}form,header{-webkit-box-shadow:rgba(99,99,99,.2) 0 2px 8px 0;display:flex;width:90%}.progress,.text-btn,form>div:first-child,form>div:first-child>div:first-child,form>div:first-child>div:last-child,textarea{width:100%}button,form,header,select{background:#fff}body,form,header,header>div{display:flex}.progress,.question{opacity:0;visibility:hidden}.question input,textarea{box-sizing:border-box;padding:15px}.coffee-btn,.image-btn{font-size:0}*{padding:0;margin:0;outline:0}body{background:#f5f5f5;flex-direction:column;font:500 16px "Kumbh Sans",sans-serif;font-optical-sizing:auto;gap:16px;height:100vh;justify-content:center}.question input,button,select,textarea{font:500 16px "Kumbh Sans",sans-serif}header{border-radius:4px;box-shadow:rgba(99,99,99,.2) 0 2px 8px 0;padding:15px}header>div{align-items:center;gap:16px}header>div h1{flex-grow:1;font-size:1.3rem}form>div:first-child>div:first-child select,form>div:first-child>div:last-child select,form>div:nth-child(2),header>div:first-child{flex-grow:1}header>div:last-child{justify-content:end}button,select{border:none;border-radius:4px;box-shadow:rgba(0,0,0,.16) 0 1px 4px;height:32px;padding:0 12px}.question,form,textarea{box-shadow:rgba(99,99,99,.2) 0 2px 8px 0}button{background:#3b82f6;color:#fff;cursor:pointer;-webkit-transition:background .2s,transform .2s;transition:background .2s,transform .2s}button:hover{background-color:#2563eb;-webkit-transform:translateY(-1px);transform:translateY(-1px)}.image-btn:disabled{background:#a9a9a9;pointer-events:none}.text-btn{font-weight:600;padding:.45rem 1rem;height:auto;text-transform:uppercase}.progress,form,textarea{height:100%}form{border-radius:4px;position:relative;flex-direction:column;gap:16px;padding:16px}form>div,form>div:first-child>div{align-items:center;display:flex;gap:16px;justify-content:center}textarea{border:none;border-radius:4px;resize:none}.progress{--left:0%;--color:black;background:rgba(255,255,255,.4);position:absolute;top:0;left:0;-webkit-transition:opacity .4s,visibility .4s;transition:opacity .4s,visibility .4s}.progress::after,.question{top:50%;left:50%;position:absolute;display:flex}.progress.visible,.question.visible{opacity:1;visibility:visible}.progress::after{align-items:center;background:linear-gradient(90deg,#1dcbe2,#1d9ae2,#1d69e2,#1d38e2,#341de2) #f0f0f0;background-size:var(--left) 15px;background-repeat:no-repeat;border-radius:4px;box-shadow:rgba(0,0,0,.05) 0 6px 24px 0,rgba(0,0,0,.08) 0 0 0 1px;content:attr(data-percent);color:var(--color);font-size:.8rem;justify-content:center;height:15px;width:90%;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);-webkit-transition:background-size .3s;transition:background-size .3s}.question{align-items:center;background:#fff;border-radius:4px;flex-direction:column;gap:16px;justify-content:center;margin-top:20px;padding:20px;max-width:300px;-webkit-transform:translateX(-50%) translateY(-50%);transform:translateX(-50%) translateY(-50%);-webkit-transition:opacity .4s,visibility .4s;transition:opacity .4s,visibility .4s}.question input{border:none;border-bottom:1px solid #eaeaea}.coffee-btn{align-items:center;background-color:#f4b400;border-radius:4px;box-shadow:0 2px 6px rgba(0,0,0,.15);display:inline-flex;color:#202124;gap:5px;padding:4px 8px;text-decoration:none;-webkit-transition:background .2s,transform .2s;transition:background .2s,transform .2s}.coffee-btn::after{align-items:center;display:flex;content:attr(data-text);font-size:.9rem;font-weight:600}.coffee-btn:hover{background-color:#dfa700;-webkit-transform:translateY(-1px);transform:translateY(-1px)}@media (max-width:800px){form>div:first-child,form>div:nth-child(2){flex-direction:column}}@media (max-width:600px){header{flex-direction:column;gap:16px}}@media (max-width:440px){header>div img{height:36px;width:36px}header>div h1{font-size:1.25rem}form>div:first-child>div{flex-direction:column}form>div:first-child>div button,form>div:first-child>div select{width:100%}}