:root{--color-primary: #e1f1fd;--color-secondary: #7c3aed;--color-neutral-light: #f8fafc;--color-light-grey: #e8e9eb;--color-neutral-medium: #dddcdc;--color-neutral-dark: #1e293b;--color-red: #dc2626;--color-orange: #ee9b0b;--color-yellow: yellow;--color-dark-yellow: #ecde0d;--color-green: #16a34a;--color-light-green: #6fe262;--color-light-blue: #0ea5e9;--color-blue: #2563eb;--color-pink: #e959c7;--color-light-pink: #fcb2e4;--color-brown: rgb(99, 52, 5);--color-light-brown: rgb(170, 126, 82);--color-dark-brown: rgb(58, 38, 18);--color-grey: #ccc;--color-dark-grey: #555;--color-white: #ffffff;--color-black: #000000;--active-color: var(--color-red);--bnt-size: 6vw;--brush-size: 8vw;--colors-gap: 2.5vw;--palette-width: 20vw;--shadow-initial: 0px 5px 15px rgba(0, 0, 0, .5);--light-color-shadow: 0 4px 12px rgba(0, 0, 0, .15), inset 0 1px 0 rgba(0, 0, 0, .05)}body{background-image:url(/assets/colors-background-DzJov_o6.jpg);background-repeat:round;font-family:Gilroy-Regular;display:flex;justify-content:center;align-items:center;height:100vh;margin:0}.home-section{margin-top:5vh;.grid{width:78vw;display:flex;flex-direction:row;flex-wrap:wrap;justify-content:left;gap:2vw;opacity:1}.customization-button{position:absolute;right:2vw;bottom:2vw;padding:.5 * 1vw;border-radius:3.2;background-color:transparent;transition:.2s ease-out;&.background{background-color:rgba(var(--color-neutral-medium),.5)}}.customization-button.background{background-color:rgba(var(--color-neutral-medium),.5)}}.home-view-item{height:18vw;width:18vw;margin-bottom:2vw;padding:1vw;display:flex;align-items:center;flex-direction:column;box-sizing:border-box;position:relative;background:#ffffff7f;backdrop-filter:blur(3px);.picture-preview{display:flex;justify-content:center;align-items:center;background-color:transparent;font-size:2vw;font-weight:700;margin-bottom:1vw;border-radius:3pt}.picture-preview img{width:60%;max-height:26vh;z-index:2}}.rectangleButtonComponent{--activation-color: #92bcff;--activation-color-rgb: 146, 188, 255;--dwell-time: 1s;--activation-time: .3s;--font-base-size: 1.5vw;border:1px solid transparent;position:relative;border-radius:3pt;box-sizing:border-box;width:13.5vw;height:5.4vw;background-color:#38383880;padding:.405vw;-webkit-tap-highlight-color:transparent;flex-shrink:0}.rectangleButtonComponent.small{width:7.5vw;height:3vw;padding:.225vw}.rectangleButtonComponent.large{width:13.5vw;height:8.4vw}.rectangleButtonComponent.large img,.rectangleButtonComponent.large svg{width:3.78vw;height:3.78vw}.rectangleButtonComponent.large img{object-fit:contain}.rectangleButtonComponent.theme-light{--activation-color: #3e85f7;--activation-color-rgb: 62, 133, 247}.rectangleButtonComponent.theme-light .rectangleButtonContent{background-color:#ededed;color:#111;border-color:transparent}.rectangleButtonComponent.theme-light.focused .rectangleButtonContent{border-color:#3e85f7}.rectangleButtonContent{color:#ededed;position:relative;display:flex;align-items:center;justify-content:center;font-size:var(--font-base-size);width:100%;height:100%;border-radius:3pt;box-sizing:border-box;border:1px solid #ededed;background-color:#202123;flex-direction:column;text-transform:capitalize;gap:.5vw}.rectangleButtonContent label{cursor:pointer}.rectangleButtonComponent.nonGazeable .rectangleButtonContent{border:0}.rectangleButtonComponent[disabled]{cursor:default;pointer-events:none;opacity:.2}.rectangleButtonComponent.toggledOn{color:#111;background-color:transparent}.rectangleButtonComponent.toggledOn[disabled]{opacity:1}.rectangleButtonComponent.toggledOn .rectangleButtonContent{background-color:#92bcff;color:#000;border:none}.rectangleButtonComponent.toggledOn svg{color:#111}.rectangleButtonComponent.focused{border-radius:0}.rectangleButtonComponent.focused .rectangleButtonContent{border-color:#92bcff;border-width:3px;border-radius:0}.rectangleButtonComponent.dwelling,.rectangleButtonComponent:hover{background:linear-gradient(to left,rgba(56,56,56,.5) 50%,var(--activation-color) 50%);background-size:200% 200%;background-repeat:repeat-y;animation:rectangleButtonDwellAnimation linear forwards var(--dwell-time)}.rectangleButtonComponent.activated{border-radius:3pt;animation:rectangleButtonContentActivationAnimation var(--activation-time)}.rectangleButtonComponent.activated .rectangleButtonContent{color:#111;border-color:transparent;animation:activationAnimation var(--activation-time) ease forwards}.rectangleButtonComponent.activated .rectangleButtonContent svg{color:#111}.rectangleButtonComponent.activated .rectangleButtonContent svg .primary{fill:#111}.rectangleButtonComponent.activated .rectangleButtonContent svg .secondary{fill:#111}@keyframes rectangleButtonContentActivationAnimation{0%{border:0}50%{border:5px solid transparent;background-color:transparent}75%{border:0;background-color:rgba(var(--activation-color-rgb),.3)}to{background-color:transparent}}@keyframes rectangleButtonDwellAnimation{0%{background-position:right bottom}to{background-position:left bottom}}@keyframes activationAnimation{0%{border-color:rgba(var(--activation-color-rgb, 146, 188, 255),.5);background:rgba(var(--activation-color-rgb, 146, 188, 255),.3)}5%{border-color:rgba(var(--activation-color-rgb, 146, 188, 255),.5);background:rgba(var(--activation-color-rgb, 146, 188, 255),.3)}40%{border-color:rgba(var(--activation-color-rgb, 146, 188, 255),.5);background:rgba(var(--activation-color-rgb, 146, 188, 255),1)}to{border-color:rgba(var(--activation-color-rgb, 146, 188, 255),.5);background:rgba(var(--activation-color-rgb, 146, 188, 255),1)}}body{background-image:url(/assets/colors-background-DzJov_o6.jpg);background-repeat:round;color:var(--color-neutral-dark);height:100vh;margin:0;padding:0}svg path.focused,svg rect.focused{animation:comingNewColor 2s ease-in-out .2s}@keyframes comingNewColor{0%{fill:var(--color-neutral-light)}80%{fill:var(--active-color)}90%{fill:var(--color-neutral-light)}to{fill:var(--active-color)}}svg path.filled,svg rect.filled{fill:var(--active-color)}.container{height:100vh;width:90vw;box-sizing:border-box;margin:auto;display:grid;grid-template-columns:var(--palette-width) 1fr;column-gap:4vw}.palette-panel{background:linear-gradient(145deg,var(--color-neutral-light),var(--color-primary));display:grid;grid-template-columns:repeat(2,1fr);column-gap:var(--colors-gap);row-gap:var(--colors-gap);padding:calc(var(--colors-gap));margin:auto;border-radius:2vw;box-shadow:var(--shadow-initial);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(10px);position:relative;overflow:hidden}.palette-panel>*:first-child{grid-column:1 / -1;justify-self:center;align-self:center}.coloring-panel{justify-content:center;align-items:center;display:flex;width:100%;height:100vh;padding:1vw;box-sizing:border-box}.coloring-panel svg{width:100%;height:95vh;background-color:#fff;display:block;border-radius:2vw;box-shadow:var(--shadow-initial);border:1px solid rgba(255,255,255,.3);backdrop-filter:blur(10px)}.btn-tool{margin-top:-2vw;width:var(--brush-size);height:var(--brush-size);background-color:transparent;border:none}.active-color-marker{stroke-width:10px;fill:#fff;transition-property:fill,stroke;transition-duration:.3s}.btn-color{border-radius:50%;border:4px solid rgba(255,255,255,.5);width:var(--bnt-size);height:var(--bnt-size);transition-property:background-color,color,border;transition-duration:.5s;transition-timing-function:ease-in-out;position:relative;box-shadow:0 4px 12px #00000026,inset 0 1px #ffffff4d;backdrop-filter:blur(10px);font-weight:700;font-size:1.75rem;color:var(--color-neutral-dark)}.btn-color:active{transform:scale(1.1);transition:transform .1s ease}.btn-color.active{border-style:dashed;border-width:10px;transform:scale(1.1)}[data-color=red]{background-color:var(--color-red)}[data-color=orange]{background-color:var(--color-orange)}[data-color=green]{background-color:var(--color-green)}[data-color=light-green]{background-color:var(--color-light-green)}[data-color=light-blue]{background-color:var(--color-light-blue)}[data-color=blue]{background-color:var(--color-blue);color:var(--color-grey)}[data-color=pink]{background-color:var(--color-pink)}[data-color=black]{background-color:var(--color-black);color:var(--color-grey)}[data-color=brown]{background-color:var(--color-brown);color:var(--color-grey)}[data-color=light-brown]{background-color:var(--color-light-brown)}[data-color=dark-brown]{background-color:var(--color-dark-brown)}[data-color=grey]{background-color:var(--color-grey)}[data-color=dark-grey]{background-color:var(--color-dark-grey)}[data-color=white]{background-color:var(--color-white);border:3px solid var(--color-neutral-medium);box-shadow:var(--light-color-shadow)}[data-color=light-pink]{background-color:var(--color-light-pink);border:3px solid var(--color-neutral-medium);box-shadow:var(--light-color-shadow)}[data-color=light-grey]{background-color:var(--color-light-grey);border:3px solid var(--color-neutral-medium);box-shadow:var(--light-color-shadow)}[data-color=yellow]{background-color:var(--color-yellow);border:3px solid var(--color-dark-yellow);box-shadow:var(--light-color-shadow)}