body{background-color:#f1f3f4;margin:0;padding:0}button{all:unset}header{background-color:#fff;padding:1rem 2rem;font-size:2rem;font-weight:600}.container{display:flex;background-color:#fff;width:1000px;box-shadow:0 0 5px #e5e7e8;margin:3rem auto;min-height:350px;border-radius:5px;padding:2rem 0}.left{width:50%;border-right:3px dashed black;padding:0 2rem}.right{flex-grow:1;display:flex;flex-direction:column;padding:0 2rem}.user-input-field{display:block;border:none;font-size:1.5rem;height:100%;width:100%;box-sizing:border-box}.qrcode-box{flex-grow:1;display:flex;justify-content:center;align-items:center}.qrcode{display:inline-block;font-size:0;margin-bottom:0;position:relative}.qrcode__image{background-color:#fff;border:.25rem solid #fff;border-radius:.25rem;box-shadow:0 .125rem .25rem #00000040;height:15%;left:50%;overflow:hidden;position:absolute;top:50%;transform:translate(-50%,-50%);width:15%}.download-button{text-transform:capitalize;width:fit-content;border:1px solid black;border-radius:5px;margin:1rem 0;padding:.5rem 1rem;cursor:pointer;text-align:center}.placeholder{display:flex;justify-content:center;align-items:center;height:100%;width:100%}.spinner{width:20px;height:20px;border:3px solid black;border-top:3px solid white;border-radius:50%;display:inline-block;animation:spin linear 1s infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}