:root{--n_rows: 29;--n_cols: 29;--global-background-color: #eee}.header-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;margin:10px;gap:10px}.header-logo{font-size:30px;font-family:Mansalva,sans-serif;font-weight:400;font-style:normal}.main-wrapper{display:flex;flex-direction:row;background-color:var(--global-background-color)}.square-template{margin:72px}.colors{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:4px;margin:72px 0 0 72px}.color-block,.color-eraser{width:20px;height:20px}.color-eraser{position:relative;border:1px solid black;display:flex;align-items:center;justify-content:center}.color-eraser:before,.color-eraser:after{content:"";position:absolute;width:100%;height:1px;background-color:#000;top:50% - .5px;left:0}.color-eraser:before{transform:rotate(45deg)}.color-eraser:after{transform:rotate(-45deg)}.grid-container{display:grid;grid-template-columns:repeat(var(--n_cols),24px);grid-template-rows:repeat(var(--n_rows),24px);margin:0 auto}.dot{width:10px;height:10px;background-color:#ccc;border-radius:50%;border:7px solid var(--global-background-color)}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;justify-content:center;align-items:center}.modal-content{background-color:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.color-grid{display:grid;grid-template-rows:repeat(7,1fr);gap:2px;grid-auto-flow:column}.color-swatch-container{display:flex;align-items:center}.color-swatch{width:24px;height:24px;border:2px solid white}.color-name{font-size:14px;width:auto;margin-left:2px}.selected{border:2px solid black}