.btn{box-shadow:var(--box-shadow);color:#8d8d8d;text-transform:uppercase;cursor:pointer;background-color:#eee;border:1px solid #adadad;border-radius:8px;padding:15px 20px;transition:background-color .5s,color .5s}.prompt__button{margin-bottom:1rem}.btn-control{white-space:nowrap;justify-content:center;align-items:center;width:min(350px,90%);padding:15px 20px;font-size:.7rem;display:flex}#color__picker:active{transition:transform 50ms ease-in-out;transform:scale(1)}#color__picker{appearance:none;background-color:#0000;border:none;width:150px;height:100px;padding:10px}#color__picker::-webkit-color-swatch-wrapper{padding:0}#color__picker::-webkit-color-swatch{box-shadow:var(--box-shadow);border:none;border-radius:8px}.size-value{margin-bottom:-20px;font-size:20px}.btn:hover,.active__btn{color:#eee;background-color:#8d8d8d}.modal{background-color:red}[popover]:popover-open{opacity:1;display:flex}[popover]{opacity:0;width:350px;height:200px;transition:opacity .5s, transform .5s, overlay .5s allow-discrete, display .5s allow-discrete;border:none;border-radius:8px;flex-direction:column;justify-content:space-evenly;align-items:center;margin:auto;padding:10px;font-size:1.2rem;display:none}@starting-style{[popover]:popover-open{opacity:0}}[popover]::backdrop{transition:display .5s allow-discrete, overlay .5s allow-discrete, background-color .5s;background-color:#0000}[popover]:popover-open::backdrop{background-color:#00000050}@starting-style{[popover]:popover-open::backdrop{background-color:#0000}}.input__base{background-color:#eee;border:none;padding:15px 20px}.input__base::placeholder{color:gray;font-style:italic}.input__group{flex-direction:column;display:flex}.error__size-span{color:#ff7575;font-size:.8rem;font-weight:100}.slider{appearance:none;opacity:.7;-webkit-transition:all .2s;background:#d3d3d3;border-radius:5px;outline:none;width:100%;height:15px;transition:opacity .2s}.slider__container{position:relative}.slider__span{color:#adadad;font-size:.8rem;position:absolute;top:-20px;left:50%;transform:translate(-50%)}.slider::-webkit-slider-thumb{appearance:none;cursor:pointer;background:#adadad;border-radius:50%;width:25px;height:25px}:root{---outline-color:#cececeb4;---medium-color:#a8a8a8b4;--box-shadow:5px 3px 12px -1px #afafafe6}*{box-sizing:border-box;margin:0;padding:0}body{background-color:#f5f5f5}#App{flex-direction:column;justify-content:center;align-items:center;gap:5rem;height:100vh;font-family:Clash Grotesk,sans-serif;display:flex}.title{font-size:4rem}.sketch__area{justify-content:center;align-items:center;gap:2rem;width:80%;display:flex}.grid__container{box-shadow:var(--box-shadow);border:none;flex-wrap:wrap;display:flex}.grid__cell{border:.5px solid var(---outline-color);background-color:#f7f7f7}.sketch__controls{border:1px solid var(---outline-color);box-shadow:var(--box-shadow);border-radius:8px;flex-direction:column;justify-content:space-evenly;align-items:center;height:512px;padding:3rem;display:flex}.divider{text-align:center;align-items:center;width:100%;margin:20px 0;display:flex}.divider:before,.divider:after{content:"";border-top:1px solid var(---medium-color);flex:1}.divider span{color:var(---medium-color);padding:0 10px;font-size:.8rem}