@import"https://fonts.googleapis.com/css2?family=Play:wght@400;700&display=swap";body,html{margin:0;padding:0}body{height:100dvh;width:100dvw;background:#16161d;color:#f5f5f5;display:flex;justify-content:center;align-items:center;font-family:Play,sans-serif;text-align:center}.rcp-root{--rcp-background-color: #121212;--rcp-field-input-color: #ffffff;--rcp-field-input-border-color: #242424;--rcp-field-label-color: #808080}.rcp{display:flex;flex-direction:column;background-color:var(--rcp-background-color);border-radius:10px}.rcp-body{display:flex;flex-direction:column;gap:20px;padding:20px 10px}.rcp-section{display:flex;flex-direction:column;gap:10px}.rcp-interactive{width:100%;height:100%;-webkit-user-select:none;user-select:none;touch-action:none}.rcp-saturation{cursor:all-scroll;width:100%;position:relative;background-image:linear-gradient(to bottom,transparent,black),linear-gradient(to right,white,transparent);border-radius:10px 10px 0 0}.rcp-saturation-cursor{position:absolute;width:20px;height:20px;border:2px solid white;border-radius:100%;box-shadow:0 0 15px #00000026;transform:translate(-10px,-10px)}.rcp-hue{cursor:ew-resize;position:relative;width:100%;height:12px;background-image:linear-gradient(to right,red,#ff0,#0f0,#0ff,#00f,#f0f,red);border-radius:10px}.rcp-hue-cursor{position:absolute;width:20px;height:20px;border:2px solid white;border-radius:100%;box-shadow:0 0 15px #00000026;transform:translate(-10px,-4px)}.rcp-alpha{cursor:ew-resize;position:relative;width:100%;height:12px;border-radius:10px}.rcp-alpha-cursor{position:absolute;width:20px;height:20px;border:2px solid white;border-radius:100%;box-shadow:0 0 15px #00000026;transform:translate(-10px,-4px)}.rcp-fields{display:flex;flex-direction:column;gap:10px}.rcp-fields-floor{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}.rcp-field{display:flex;flex-direction:column;width:100%}.rcp-field-input{width:100%;font-family:inherit;font-size:14px;text-align:center;color:var(--rcp-field-input-color);background-color:transparent;border:2px solid var(--rcp-field-input-border-color);border-radius:5px;outline:none;padding:5px 0}.rcp-field-label{font-size:14px;text-align:center;color:var(--rcp-field-label-color)}#editor{border:1px solid #589F7E;border-radius:.25rem;padding:1rem 4rem 2rem;margin-top:2rem;display:flex;align-items:center}#editor h1,#editor h2{margin-bottom:1rem}#editor #options{display:flex;margin-bottom:3rem;justify-content:center;align-items:center}#editor #options .option{display:flex;flex-direction:column}#editor #options .panelInput{height:5rem;width:5rem;font-size:2rem;text-align:center;background-color:#222831;color:#f5f5f5;border:1px solid #30475e;border-radius:.25rem;margin:0 1rem .5rem;padding-left:1rem}#editor #options .panelInput:focus{outline:none!important;border-color:#589f7e;box-shadow:0 0 .5rem #30475e}#editor .button{font-size:1.25rem;background-color:#589f7e;color:#f5f5f5;padding:1rem 3rem;border-radius:.25rem;text-transform:uppercase;border:1px solid transparent;transition:background-color .2s ease-in-out;margin-bottom:1rem}#editor .button:hover{cursor:pointer;background-color:transparent;border-color:#589f7e}#editor .button-canva{margin:1rem 0 0 1rem}.row{display:flex;width:fit-content}.pixel{width:1rem;height:1rem;box-sizing:border-box}.pixel:hover{cursor:pointer}#drawingPanel{display:flex;flex-direction:column;align-items:center}#pixels{margin:1rem 0 0 2rem}