@import"https://fonts.googleapis.com/css2?family=Walter+Turncoat&display=swap";body{font-family:Walter Turncoat,cursive;font-weight:400;font-style:normal;background-color:#e0e0e0;text-align:center;margin:0;padding:20px}h1{margin-bottom:10px}#canvas{display:block;margin:20px auto;border-radius:5px;border:2px solid #06080F;background-color:#fff}.menu-container{display:flex;justify-content:center;align-items:flex-start;gap:20px;max-width:800px;width:800px;margin:20px auto}.control-menu,#add-block-form{background:#f0f0f0;border-radius:8px;padding:20px;width:350px;border:2px solid #06080F;flex-shrink:0}.how-to-play{background:#f0f0f0;border-radius:8px;padding:20px;width:350px;border:2px solid #06080F;text-align:left;flex-shrink:0}.control-menu{display:flex;justify-content:center;gap:10px;margin-bottom:15px}button{background-color:#005bac;color:#fff;border:2px solid #06080F;padding:10px 15px;cursor:pointer;border-radius:5px;transition:background .3s ease;font-family:Walter Turncoat,cursive}button:hover{background-color:#004a8c}#drop-ball{background-color:#4caf50}#drop-ball:hover{background-color:#3d8b40}#reset-canvas{background-color:#e74c3c}#reset-canvas:hover{background-color:#c0392b}#add-block-form{display:flex;flex-direction:column;align-items:center;gap:12px}.form-group{display:flex;justify-content:space-between;align-items:center;width:100%}#add-block-form input,#add-block-form select{width:120px;padding:8px;text-align:center;border:2px solid #06080F;border-radius:4px;font-family:Walter Turncoat,cursive}#add-block-form button{width:100%;margin-top:5px;background-color:#005bac}#add-block-form button:hover{background-color:#004a8c}.how-to-play h3{margin-top:0;text-align:center}.how-to-play p{margin:0;font-size:16px;line-height:1.4}.slider-group{flex-direction:row;align-items:center;justify-content:space-between}.slider-group label{margin-right:10px;flex:1;display:flex;align-items:center}input[type=range]{width:200px;margin:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;height:10px;background:#ddd;border-radius:5px;outline:none;border:1px solid #06080F}input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:20px;height:20px;border-radius:50%;background:#005bac;cursor:pointer;border:2px solid #06080F}input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:#005bac;cursor:pointer;border:2px solid #06080F}input[type=range]:focus{outline:none}#width-value,#height-value{font-weight:700;color:#005bac;margin-left:5px;min-width:20px;display:inline-block;text-align:right}