canvascreator.v1.min.css

body{font-family:Arial,sans-serif;background-color:#f4f7fc;color:#333;margin:0;padding:20px}h1{color:#1a3987;font-size:2rem;margin-bottom:10px}p,ul{font-size:1rem;max-width:800px;margin:0 auto 10px auto;text-align:left}ul{list-style-type:disc;padding-left:20px}.help-icon{position:fixed;bottom:20px;right:20px;background:#0073e6;color:#fff;width:40px;height:40px;border-radius:50%;text-align:center;font-size:1.5rem;font-weight:700;cursor:pointer;line-height:40px;box-shadow:0 4px 6px rgba(0,0,0,.2);transition:.3s;user-select:none}.help-icon:hover{background:#005bb5}.help-tooltip{display:none;position:fixed;bottom:70px;right:20px;width:250px;background:#fff;color:#333;padding:12px;border-radius:8px;box-shadow:0 4px 8px rgba(0,0,0,.2);text-align:left;font-size:.9rem;line-height:1.4}.help-tooltip ul{padding-left:15px}.help-container:hover .help-tooltip{display:block}.sidenav{height:100%;width:0;position:fixed;z-index:1;top:0;left:0;background-color:#0073e6;overflow-x:hidden;transition:.5s;padding-top:60px}.sidenav a{padding:8px 8px 8px 32px;text-decoration:none;font-size:25px;color:#fff;display:block;transition:.3s}.sidenav a:hover{color:#f1f1f1}.sidenav .closebtn{position:absolute;top:0;right:25px;font-size:36px;margin-left:50px}@media screen and (max-height:450px){.sidenav{padding-top:15px}.sidenav a{font-size:18px}}#toolContainer{padding:20px;max-width:1000px;margin:auto;text-align:center}#canvasCreator{background:#fff;padding:20px;border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,.2);width:1000px;height:750px;margin:auto}#canvasSelector,#localeSelector{display:flex;justify-content:center;margin:15px 0}select{padding:8px;border:1px solid #ccc;border-radius:5px;font-size:1rem}.canvas-tools{background:#0073e6;color:#fff;border:none;padding:12px 20px;margin:10px;border-radius:5px;cursor:pointer;font-size:1rem;transition:.3s}.canvas-tools:hover{background:#005bb5}#metadataForm{display:none;position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:#fff;padding:20px;border-radius:10px;box-shadow:0 4px 8px rgba(0,0,0,.2);z-index:10;width:300px}#metadataForm input{width:100%;padding:8px;margin:5px 0;border:1px solid #ccc;border-radius:5px}#metadataForm button{width:100%;padding:10px;background:#0073e6;color:#fff;border:none;border-radius:5px;cursor:pointer}#metadataForm button:hover{background:#005bb5}#colorPalette{display:flex;justify-content:center;margin-top:20px}.colorSwatch{width:40px;height:40px;margin:5px;border-radius:50%;border:2px solid #ccc;cursor:pointer;transition:transform .2s}.colorSwatch:hover{transform:scale(1.1)}