#title{color:var(--dark-white-color);font-size:3.2rem;margin:1.5rem auto auto;text-align:center;text-shadow:0 4px 8px var(--dark-main-color-transparent);user-select:none}#options-bar{align-items:center;flex-wrap:nowrap;margin:2rem auto auto;max-width:1600px;min-height:3rem;user-select:none}#inputFileContainer,#options-bar{display:flex;flex-direction:row;justify-content:center}#fileInput{display:none}#labelFileInput{align-items:center;background:transparent;border:.2em solid var(--dark-main-color);border-radius:2em;box-shadow:0 4px 8px var(--dark-main-color-transparent);color:var(--dark-main-color);cursor:pointer;display:flex;flex-direction:row;flex-wrap:nowrap;font-size:1.2rem;margin-right:4rem;padding:.1rem 1.5rem;transition:1s}#labelFileInput:active,#labelFileInput:focus,#labelFileInput:hover{background:var(--dark-main-color);color:var(--dark-white-color)}#labelFileInput svg{aspect-ratio:1;margin-left:.5em;width:1.7rem}#twoRectanglesContainer{align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;margin-right:4rem}#twoRectangles{appearance:none;background-color:var(--dark-background-color);border:.15em solid var(--dark-main-color);border-radius:.15em;box-shadow:0 4px 8px var(--dark-main-color-transparent);color:currentColor;display:grid;font:inherit;height:1.15em;margin:0 .5rem 0 0;place-content:center;transform:translateY(-.075em);width:1.15em}#twoRectangles:before{background-color:CanvasText;box-shadow:inset 1em 1em var(--dark-main-color);clip-path:polygon(14% 44%,0 65%,50% 100%,100% 16%,80% 0,43% 62%);content:"";height:.65em;transform:scale(0);transform-origin:left top;transition:transform .12s ease-in-out;width:.65em}#twoRectangles:checked:before{transform:scale(1)}#colorPicker{border:none;border-radius:50%;box-shadow:0 4px 8px var(--dark-main-color-transparent);height:2em;padding:0;width:2em}#colorPicker::-webkit-color-swatch{border:none;border-radius:50%}#colorPicker::-webkit-color-swatch-wrapper{padding:0}#canvas-container{height:60vh;margin:2rem auto auto;max-width:1600px;width:100%}#canvas-container,#pagination{display:flex;flex-direction:row;justify-content:center}#pagination{align-content:center;align-items:center;flex-wrap:nowrap;gap:1rem;margin-top:.5rem;user-select:none}.arrowButton{align-items:center;display:flex;height:2rem;justify-content:center;width:2rem}#nextPage>svg{transform:rotate(180deg)}#buttonsToBackend{margin:2rem auto auto;user-select:none;width:fit-content}#buttonsToBackend button{box-shadow:0 4px 8px var(--dark-main-color-transparent);font-size:1.1rem;padding:.8rem 1.8rem;text-align:center}#generateBtn{margin-left:4rem}.buttonFilled{appearance:none;background:hsl(0 0 0/0);border:.2em solid var(--dark-main-color);border-radius:2em;color:var(--dark-main-color);transition:1s}.buttonFilled:hover{background:var(--dark-main-color);color:var(--dark-white-color)}#imagesContainer{align-content:center;align-items:center;display:flex;flex-direction:row;flex-wrap:nowrap;height:25rem;justify-items:center;margin:2rem auto auto;overflow:hidden;overflow-x:auto}#imagesContainer img{object-fit:contain;width:auto}#infoProcessing{background:var(--dark-background-color);border-radius:.5rem;bottom:1rem;box-shadow:0 4px 6px var(--dark-main-color-transparent);overflow:hidden;padding:1rem;position:absolute;right:1rem;text-align:center;transition:opacity 1s,visibility 1s;user-select:none}.spinner-container{-webkit-backdrop-filter:blur(10px);background-color:hsla(0,0%,100%,.5);height:100%;position:absolute;width:100%;z-index:10}.spinner{height:30%;width:20%;--g1:conic-gradient(from 90deg at left 3px top 3px,#0000 90deg,var(--dark-main-color) 0);--g2:conic-gradient(from -90deg at bottom 3px right 3px,#0000 90deg,var(--dark-main-color) 0);animation:spinner 1s infinite;background:var(--g1),var(--g1),var(--g1),var(--g2),var(--g2),var(--g2);background-position:0,50%,100%;background-repeat:no-repeat;left:50%;position:relative;top:50%;transform:translateX(-50%) translateY(-50%)}@keyframes spinner{0%{background-size:30% 50%,30% 50%,30% 50%}25%{background-size:30% 100%,30% 50%,30% 50%}50%{background-size:30% 50%,30% 100%,30% 50%}75%{background-size:30% 50%,30% 50%,30% 100%}to{background-size:30% 50%,30% 50%,30% 50%}}#cafesito-logo{cursor:pointer;height:40px;width:2rem}#cafesito-button,#cafesito-logo{bottom:1rem;left:1rem;position:fixed;transition:opacity .5s ease,left .5s ease}.collapse{left:-250px!important;opacity:0!important}.hidingElement{opacity:0;visibility:hidden}.visible{opacity:1;visibility:visible}.disabled{opacity:.4;pointer-events:none}@media (max-width:600px){#options-bar{flex-direction:column}#title{font-size:2rem}#labelFileInput{margin-right:0}#inputFileContainer{margin-bottom:1rem}#twoRectanglesContainer{margin-bottom:1rem;margin-right:0}#buttonsToBackend button{font-size:1rem;padding:.8rem 1rem}#generateBtn{margin-left:8px}#canvas-container{height:40vh}}