*{box-sizing:border-box}#container{display:flex;gap:50px;padding:20px;align-items:center;justify-content:center;height:100vh;overflow:auto}#image{width:300px;height:300px;border:1px black solid}#bg{position:fixed;object-fit:cover;width:100vw;height:100vh;z-index:-1;min-height:var(--original-viewport-height)}#inputs{display:flex;flex-direction:column;gap:20px;width:300px}body,html{margin:0;padding:0;font-family:Arial,Helvetica,sans-serif}textarea{height:250px;width:300px;resize:none}textarea,input,button{background-color:#00000080;border:1px black solid;outline:none;color:#fff;font-size:larger}textarea,input{padding:5px}button{width:100%}button:hover{background-color:#0009}#bottomrow{height:30px;display:flex;gap:20px;justify-content:stretch}.dialog{position:fixed;top:80%;width:200px;left:50%;padding:10px;background-color:#00000080;color:#fff;text-align:center;transform:translate(-50%,-50%)}input[type=checkbox]{appearance:none;min-width:30px;margin:0;display:grid;place-content:center}input[type=checkbox]:before{content:"";width:20px;height:20px;transform:scale(0);transition:.12s transform ease-in-out;box-shadow:inset 1em 1em #fff;transform-origin:center;clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0%,43% 62%)}input[type=checkbox]:checked:before{transform:scale(1)}#scale,#color{width:100%}@media only screen and (max-width: 700px){#container{flex-direction:column-reverse;gap:20px}#inputs{flex-grow:1;max-height:300px}textarea{height:100%;max-height:250px;flex-grow:1}}@keyframes fade-out{0%{opacity:1}to{opacity:0}}