@import url(https://fonts.googleapis.com/css2?family=Balsamiq+Sans:ital,wght@0,400;0,700;1,400;1,700&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Fredoka+One&display=swap);
* button,* .footer{color:#753e5c}* a{color:#dd2e44;text-decoration:none}body{font-family:'Balsamiq Sans', cursive;font-weight:bold;display:flex;margin:0px;flex-direction:column;align-items:center;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}body button{font-family:'Fredoka One', cursive;font-weight:normal}.footer{height:60px;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;font-family:'Balsamiq Sans', cursive;font-weight:bold;text-align:center}.footer p{width:100%;margin:0}#container{margin-top:30px;margin-bottom:30px;min-height:calc(100vh - 120px);max-width:860px;justify-content:space-between;display:flex;flex-direction:row;width:100%}#container #left{display:flex;flex-direction:column;align-items:center;margin-bottom:20px}#container #left #site-marker{font-family:'Fredoka One', cursive;font-weight:normal;position:relative;top:5px;left:5px;width:100%;height:0;color:#753e5caa;-moz-user-select:none;-webkit-user-select:none;user-select:none;pointer-events:none;font-size:20px}#container #left canvas{width:400px;height:500px;border-radius:4px;box-shadow:pink 0 0 0 1px}#container #left #buttons{margin-top:8px;display:grid;grid-column-gap:6px;grid-template-columns:auto auto}#container #options{display:inline-flex;flex-direction:column;vertical-align:top;height:100%;width:442px;min-width:320px;color:#753e5c}#container #options h3{margin:0}#container #options .page{padding:20px;background-color:lavenderblush;border:solid 1px pink;border-radius:0 6px 6px 0;margin-top:-1px;display:none}#container #options .page.selected{display:block}@media only screen and (max-width: 900px){#container{flex-direction:column;align-items:center}#container #options{width:100%;max-width:400px;padding:0}.footer{font-size:16px;width:auto;padding:0 10px}}@media only screen and (max-width: 400px){#container #left{max-width:375px}#container #left canvas{max-width:375px;max-height:469px}#container #options{max-width:375px}.footer{font-weight:normal}}td{vertical-align:middle;height:100%;text-align:right}td>div{display:contents}

.swatch-container{display:flex;flex-wrap:wrap;margin-top:6px;margin-bottom:20px}.swatch-container.page-container{margin-top:0px;margin-bottom:0px}.swatch-container.page-container button{background-color:transparent;color:#582d45;cursor:pointer;font-size:20px;padding:6px 10px;border:0px;margin-right:10px}.swatch-container.page-container button:hover,.swatch-container.page-container button:focus{box-shadow:none}.swatch-container.page-container button:focus-visible{outline:dotted #dd2e44}.swatch-container.page-container button[aria-selected='true']{background-color:lavenderblush;border:pink solid 1px;border-radius:3px 3px 0 0;border-bottom:none;padding:6px 9px}.swatch-container span:focus-visible{outline:dotted #dd2e44}.swatch-container.part-container{display:grid;grid-gap:6px;grid-template-columns:repeat(auto-fill, 75px)}.swatch-container.color-container{flex-direction:row;flex-wrap:nowrap}.swatch-container.color-container .color-group{display:grid;grid-gap:6px;grid-template-columns:repeat(auto-fill, 40px);flex-basis:184px}.swatch-container .color-picker-wrapper{border-radius:4px;border:#381327 solid 2px;height:82px;flex-basis:auto;flex-grow:1}.swatch-container .color-picker-wrapper .color-picker{height:100%;width:100%}.swatch-container .color-picker-wrapper .color-picker .saturation-pointer{width:10px;height:10px;border-radius:50%;box-shadow:white 0 0 0 2px, #381327 0 0 0 4px, inset #381327 0 0 0 1px;transform:translate(-5px, -5px);cursor:pointer}.swatch-container .color-picker-wrapper .color-picker .hue-pointer{width:4px;height:18px;box-shadow:white 0 0 0 2px, #381327 0 0 0 4px, inset #381327 0 0 0 1px;border-radius:3px;transform:translateX(-2px);cursor:pointer}.swatch{width:40px;height:40px;float:left;border-radius:4px;margin-right:6px;cursor:pointer}.swatch.selected .inner{box-shadow:#ff66ae inset 0 0 0 2px, #502f41 inset  0 0 0 4px}.swatch.part{width:75px;height:75px}.swatch .inner{display:flex;justify-content:center;align-items:center;background-color:#e0e0e0;width:100%;height:100%;border-radius:4px;color:#381327;box-shadow:#502f41 inset 0 0 0 2px;-moz-user-select:none;-webkit-user-select:none;user-select:none;pointer-events:none}.swatch .inner .icon{width:80%;height:80%;object-fit:contain;-o-object-fit:contain;-moz-user-select:none;-webkit-user-select:none;user-select:none;pointer-events:none}.swatch .inner .icon.invert{filter:invert(90%)}#buttons button{font-size:16px;background-color:#ffaabb;border:none;border-radius:4px;padding:6px 10px;cursor:pointer}#buttons button:active{box-shadow:inset 0 0 0 2px #dd2e44}


/*# sourceMappingURL=main.css.map*/