:root{--max-width: 80vw}header{display:flex;flex-direction:column;width:100%;max-width:var(--max-width);margin:0 auto}.content{margin-left:20px}footer .inner-wrapper{display:flex;justify-content:space-between;align-items:center;width:100%;max-width:var(--max-width);margin:0 auto}button{cursor:pointer}button.secondary{background-color:#2eaadc;color:#fff;border-radius:3px;padding:6px}button.secondary:hover{background-color:#069ccd}button.small{padding:6px}button.icon{padding:5px;min-width:50px}button.icon svg{pointer-events:none}a:hover{background:none}.description{width:100%;max-width:var(--max-width);margin:0 auto}.toolbar{display:flex;justify-content:center;width:100%;max-width:var(--max-width);margin:0 auto;gap:20px}.toolbar--space-between{justify-content:space-between}.file-upload{display:flex;gap:20px;align-items:center}.images-container{display:grid;justify-items:center;gap:20px;grid-template-columns:repeat(auto-fill,minmax(450px,1fr));padding:20px;overflow-y:auto}.controls-container{display:flex;align-items:center;justify-content:space-between;gap:5px}.control-container{display:flex;align-items:center;gap:5px}.text-input{width:50px}.canvas-wrapper{position:relative}canvas{max-width:100%}.floating-actions-container{position:absolute;top:10px;right:10px}.aspect-ratio-details{position:absolute;inset:0;background-color:#000c;display:none;color:#fff}.aspect-ratio-details--visible{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:20px}dialog{max-width:1000px}dialog div{display:flex;flex-direction:column;gap:20px;text-align:center}.updates{overflow-y:auto;overflow-x:visible;background-color:#f0f2f4;padding:0 15px;border-radius:10px;margin-right:20px}@media (max-width: 1200px){.updates{position:fixed;right:0;top:50%;transform:translate(100%,-50%);max-height:80vh;margin-right:0;transition:transform .25s ease-in-out;max-width:300px;transition-delay:.3s}.updates:hover{transform:translateY(-50%);transition:transform .25s ease-in-out}}.updates ul,.updates li{list-style:none;margin:0;padding:0}.updates li{padding:5px 0}.updates h2{font-size:1.2rem}.updates h3,.update{font-size:1rem}.show-updates-btn{position:absolute;right:-70px;top:50%;transform:translateY(-50%) rotate(270deg);padding:10px 5px;font-size:1rem}.show-updates-btn:active~.updates,.show-updates-btn:focus~.updates,.show-updates-btn:hover~.updates{transform:translateY(-50%);transition:transform .25s ease-in-out}@media (min-width: 1201px){.show-updates-btn{display:none}}
