:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}#root{max-width:1280px;margin:0;text-align:center}:root{--price-bg-Color: #ff0000}.logo{height:6em;padding:1.5em;will-change:filter;transition:filter .3s}.logo:hover{filter:drop-shadow(0 0 2em #646cffaa)}.logo.react:hover{filter:drop-shadow(0 0 2em #61dafbaa)}@keyframes logo-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@media (prefers-reduced-motion: no-preference){a:nth-of-type(2) .logo{animation:logo-spin infinite 20s linear}}.card{padding:2em}.read-the-docs{color:#888}.App{background-color:#fffefe;color:#fff;padding:0!important;margin:0!important;display:flex;flex-direction:row-reverse;justify-content:center;align-items:center;gap:30px;width:100vw}.inputFields{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;margin-top:20px}.inputFields input{width:300px;height:30px;border-radius:5px;border:1px solid #000000;padding:5px;font-size:20px;font-weight:700;text-align:right}.countainer{background-color:#fff;height:700px;width:700px;border:5px solid;background-size:70%;background-repeat:no-repeat;background-position-x:65%;background-position-y:center;position:relative;z-index:1}.ribbon{font-size:24px;font-weight:700;color:#fff}.ribbon{--f: 1em;--r: 2em;z-index:2000000;position:absolute;right:20px;top:calc(-1*var(--f));padding:.2em;background:#fc0404;border-right:var(--f) solid #0005;border-bottom:var(--r) solid #0000;clip-path:polygon(calc(100% - var(--f)) 0,0 0,0 calc(100% - var(--r)),calc(50% - var(--f)/2) 100%,calc(100% - var(--f)) calc(100% - var(--r)),calc(100% - var(--f)) var(--f),100% var(--f))}.ribbon h6{color:#fff;font-size:15px;font-weight:700;padding-left:4px;padding-right:4px}.ribbon2{--c: var(--price-bg-Color);--r: 20%;position:absolute;top:200px;left:20px;padding:.6em 2.3em;aspect-ratio:1;display:grid;place-content:center;text-align:center;gap:5px;font:700 1.5em sans-serif;z-index:0;width:fit-content;box-sizing:border-box;font-size:larger}.ribbon2:before{content:"";position:absolute;z-index:-1;top:60%;right:20%;bottom:-40%;left:20%;background:color-mix(in srgb,var(--c),#000 35%);clip-path:polygon(5% 0,95% 0,100% 100%,50% calc(100% - var(--r)),0 100%)}.ribbon2:after{content:"";position:absolute;z-index:-1;top:0;right:0;bottom:0;left:0;background:radial-gradient(35% 35%,#0000 96%,#0003 97%,#0003 99%,#0000) var(--c);clip-path:polygon(100% 50%,89.66% 55.22%,98.3% 62.94%,86.96% 65.31%,93.3% 75%,81.73% 74.35%,85.36% 85.36%,74.35% 81.73%,75% 93.3%,65.31% 86.96%,62.94% 98.3%,55.22% 89.66%,50% 100%,44.78% 89.66%,37.06% 98.3%,34.69% 86.96%,25% 93.3%,25.65% 81.73%,14.64% 85.36%,18.27% 74.35%,6.7% 75%,13.04% 65.31%,1.7% 62.94%,10.34% 55.22%,0% 50%,10.34% 44.78%,1.7% 37.06%,13.04% 34.69%,6.7% 25%,18.27% 25.65%,14.64% 14.64%,25.65% 18.27%,25% 6.7%,34.69% 13.04%,37.06% 1.7%,44.78% 10.34%,50% 0%,55.22% 10.34%,62.94% 1.7%,65.31% 13.04%,75% 6.7%,74.35% 18.27%,85.36% 14.64%,81.73% 25.65%,93.3% 25%,86.96% 34.69%,98.3% 37.06%,89.66% 44.78%)}.ribbon2 :nth-child(2){color:#fff;font-size:20px;font-weight:700;text-decoration:line-through}.ribbon2 :nth-child(1){color:#fff708;font-size:20px;font-weight:700;padding-left:4px;padding-right:4px}.bottom{position:absolute;bottom:0;left:0;display:flex;flex-direction:column;padding-top:10px;gap:5px;justify-content:center;align-items:end;width:100%;height:150px;background:#fc0404;clip-path:polygon(0% 69%,100% 0%,100% 100%,0% 100%)}.bottom span{padding-right:10px}.bottom :nth-child(1){color:#fff;font-size:20px;font-weight:700}.print-button{background-color:#fc0404;color:#fff;padding:5px 3px;border:none;border-radius:5px;cursor:pointer;font-size:20px;font-weight:700;margin-top:10px}.colorPicker{display:flex;flex-direction:column;justify-content:center;align-items:end;color:#000}.colorPicker label{text-align:right;width:max-content}