*,::after,::before{box-sizing:border-box}body{margin:0;min-height:100vh;overflow:hidden}#button{position:relative;padding:1.25em 3em;display:block;text-transform:uppercase;font-size:2vw;font-weight:600;color:#fff;cursor:pointer;border:0;border-radius:8px;background-color:red}#button:focus{outline:0}.cont{position:relative;margin-top:-10px;margin-left:-10px;display:flex;width:calc(100% + 20px);height:calc(100vh + 20px);justify-content:center;align-items:center;background-color:#7080af;background-image:url(https://images.unsplash.com/photo-1543241596-d5cfdb442a97?ixlib=rb-1.2.1&auto=format&fit=crop&w=1050&q=80);background-size:cover;transition:.2s linear}.cont.blur{filter:blur(5px)}.modal{position:fixed;top:0;left:0;display:flex;width:100%;height:100vh;justify-content:center;align-items:center;opacity:0;visibility:hidden}.modal .content{position:relative;padding:10px;width:400px;height:300px;border-radius:8px;background-color:#fff;box-shadow:rgba(112,128,175,.2) 0 16px 24px 0;transform:scale(0);transition:transform .3s cubic-bezier(.57, .21, .69, 1.25);color:#000}.modal .close{position:absolute;top:5px;right:5px;width:30px;height:30px;cursor:pointer;border-radius:8px;background-color:#7080af;clip-path:polygon(0 10%,10% 0,50% 40%,89% 0,100% 10%,60% 50%,100% 90%,90% 100%,50% 60%,10% 100%,0 89%,40% 50%)}.modal.open{opacity:1;visibility:visible}.modal.open .content{transform:scale(1)}input[type=checkbox]{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border:2px solid #000;border-radius:3px;cursor:pointer;outline:0}input[type=checkbox]:checked{background:#000}input[type=checkbox]:checked::after{content:"✓";color:#fff;display:block;text-align:center;line-height:18px}