h1{width:100%;text-align:center;font-size:3rem;margin:1rem auto 3rem}h1 a{color:#000;text-decoration:none}.wheel-item{display:flex;flex-direction:column;align-items:center;justify-content:space-between;color:#000;text-decoration:none;background-color:#fff;border-radius:2px;padding:1rem}.wheel-item .wheel-item-title{font-size:1.2rem;text-align:center;font-weight:600;margin-bottom:1rem}.wheel-item .wheel-choice-number{text-align:center;margin:2rem auto}.wheel-item .button-container{display:flex;gap:2rem;justify-content:center;margin-top:1rem}.wheel-item .button-container .show-wheel{text-align:center}.wheel-item .button-container .show-wheel a{display:block;width:auto;margin:auto;padding:12px}.wheel-item .button-container .show-wheel a svg{fill:#fff;height:1.2rem;width:auto}.wheel-item .button-container .remove-wheel{text-align:center}.wheel-item .button-container .remove-wheel button{width:auto;background-color:#c4314b;margin:auto;padding:12px}.wheel-item .button-container .remove-wheel button svg{fill:#fff;height:1.2rem;width:auto}.wheel-item .button-container .remove-wheel button:hover{background-color:#a02a3f}.wheel-item:hover{cursor:pointer;box-shadow:0 7px 10px #0000001a}.wheel-list-title{text-align:left;margin:4rem 0 2rem 2rem}.wheel-list-container{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;width:calc(90% - 4rem);background-color:#f5f5f5;border-radius:2px;padding:2rem;margin:0 auto 2rem}.all-remove-container{width:30%;margin:auto}.all-remove-container button{background-color:#c4314b}.all-remove-container button:hover{background-color:#a02a3f}@media (max-width: 880px){.wheel-list-container{grid-template-columns:repeat(3,1fr)}.all-remove-container{width:50%}}@media (max-width: 610px){.wheel-list-container{grid-template-columns:repeat(2,1fr)}}@media (max-width: 480px){.all-remove-container{width:80%}}@media (max-width: 425px){.wheel-list-container{grid-template-columns:1fr}}@media (max-width: 380px){.all-remove-container{width:90%}}@font-face{font-family:Ageo;src:url(/assets/Ageo-Regular-v4hnoE_N.ttf)}body{margin:0}#app{font-family:Ageo,Arial,Helvetica,sans-serif;color:#202c38;background-color:#fff;overflow-x:hidden;margin-bottom:5rem}.container{width:80%;margin:auto}.button{width:100%;color:#fff;font-weight:600;background-color:#4f52b2;border:none;border-radius:4px;padding:1.2rem 12px;transition:.3s ease-in-out}.button:hover,.button:focus-visible{cursor:pointer;background-color:#444791;color:#fff}.input-text{outline:none;border:none;border-bottom:2px solid #FFF;padding:.7rem .5rem calc(.7rem - 2px)}.input-text:focus{border-bottom:2px solid #5B5FC7}.grey-background{position:fixed;top:0;right:0;bottom:0;left:0;background-color:#6f6f6f;opacity:0;z-index:2;animation-delay:.2s;animation:background-fade-in .3s ease-in-out forwards}.pop-up{position:fixed;left:20%;top:25vh;width:60%;max-height:70vh;border-radius:2px;background-color:#fff;padding:2rem 1rem;z-index:3;transform:scale(0);animation:pop-up-appear .5s ease-in-out forwards}@keyframes background-fade-in{0%{opacity:0}to{opacity:.5}}@keyframes pop-up-appear{0%{transform:scale(0)}to{transform:scale(1)}}@media (max-width: 880px){.pop-up{top:10vh}}@media (max-width: 770px){.pop-up{left:10%;width:calc(80% - 2rem)}}@media (max-width: 425px){.container{width:95%}.pop-up{left:2.5%;width:calc(95% - 2rem)}}.wheel-container{position:relative;display:flex;justify-content:center;align-items:center;height:auto;width:min(500px,50%);aspect-ratio:1/1;margin:0 auto}.wheel-container button{position:absolute;display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700;height:3.5rem;width:auto;aspect-ratio:1/1;background-color:#fff;border:none;border-radius:50%;transform:scale(1);transition:.3s ease-in-out}.wheel-container button:hover{cursor:pointer;transform:scale(1.2);box-shadow:0 10px 15px 16px #0000001a}.wheel-container .winner-marker{position:absolute;bottom:.5rem;width:0;height:0;border-left:30px solid transparent;border-right:30px solid transparent;border-bottom:60px solid #000}.wheel{position:relative;width:75%;height:auto;aspect-ratio:1/1;border-radius:50%;display:flex;justify-content:center;align-items:center}.wheel-segment-text{position:absolute;top:50%;left:50%;transform-origin:0 0;text-align:center;color:#fff;font-size:1rem;font-weight:700;white-space:nowrap;pointer-events:none;transform:translate(-50%,-50%)}.wheel-rotate{animation:wheel-rotate 5s ease-in-out forwards}@keyframes wheel-rotate{0%{transform:rotate(0)}to{transform:rotate(calc(3600deg + var(--win-rotate, 0deg)))}}@media (max-width: 880px){.wheel-container{width:66%}}@media (max-width: 570px){.wheel-container{width:80%}}@media (max-width: 480px){.wheel-container{width:90%}}@media (max-width: 425px){.wheel-container{width:95%}}.elem-input-container{display:grid;grid-template-columns:2fr 1fr 2.3rem;gap:1rem}.elem-input-container .input-color{width:100%;height:100%;background-color:#fff;border-radius:2px;outline:none;border:none}.elem-input-container button{width:100%;text-align:center;color:#b70000;background-color:transparent;border:none;border-radius:50%;font-weight:700;font-size:1.3rem;transition:.3s ease-in-out}.elem-input-container button:hover,.elem-input-container button:focus-visible{cursor:pointer;color:#fff;background-color:#b70000}@media (max-width: 480px){.elem-input-container{grid-template-columns:1fr 1fr 2rem}}.winner-pop-up{display:flex;flex-direction:column}.winner-pop-up .close-button{background-color:#fff;border:none;margin-left:auto}.winner-pop-up .close-button svg{fill:#000;height:2.5rem;width:auto;transform:rotate(0);transition:transform .3s ease-in-out}.winner-pop-up .close-button:hover{cursor:pointer}.winner-pop-up .close-button:hover svg{transform:rotate(180deg)}.winner-pop-up .pop-up-title{text-align:center;font-size:1.8rem}.winner-pop-up .pop-up-content{position:relative;text-align:center;font-size:3rem;margin:1rem auto 3.5rem}.winner-pop-up .pop-up-content .conffetti-container{position:absolute;top:-5rem}.winner-pop-up .pop-up-content .confetti-one{left:-5rem}.winner-pop-up .pop-up-content .confetti-two{right:-5rem}.winner-pop-up .pop-up-content .confetti-three{right:50%}.winner-pop-up .button-container{width:50%;margin:auto}@media (max-width: 480px){.winner-pop-up .button-container{width:80%}}@media (max-width: 380px){.winner-pop-up .button-container{width:90%}}.share-pop-up{display:flex;flex-direction:column}.share-pop-up .close-button{background-color:#fff;border:none;margin-left:auto}.share-pop-up .close-button svg{fill:#000;height:2.5rem;width:auto;transform:rotate(0);transition:transform .3s ease-in-out}.share-pop-up .close-button:hover{cursor:pointer}.share-pop-up .close-button:hover svg{transform:rotate(180deg)}.share-pop-up .pop-up-title{text-align:center;font-size:1.8rem}.share-pop-up .pop-up-content{display:grid;grid-template-columns:1fr .1fr;gap:1.5rem;text-align:center;align-items:center;margin:2rem auto 4rem;word-break:break-all}.share-pop-up .pop-up-content button{height:fit-content}.share-pop-up .pop-up-content button svg{fill:#fff;height:1.5rem;width:auto}.share-pop-up .button-container{width:50%;margin:auto}@media (max-width: 480px){.share-pop-up .button-container{width:80%}}@media (max-width: 380px){.share-pop-up .button-container{width:90%}}.wheel-name{text-align:center;font-size:1.5rem}.all-input-container{display:flex;flex-direction:column;width:50%;gap:1rem;background-color:#f5f5f5;border-radius:2px;padding:2rem 3rem;margin:2rem auto}.add-element-container{width:35%;margin:0 auto 3rem}.action-container{width:80%;padding:2rem 4rem;background-color:#f5f5f5;border-radius:2px;margin:auto}.save-action-container{display:grid;grid-template-columns:2fr 1fr;gap:1rem;width:80%;margin:1rem auto 2rem}.share-button-container{width:43.7%;margin:auto}.share-button-container button{display:flex;align-items:center;justify-content:center;gap:1rem}.share-button-container button svg{height:1rem;width:auto;fill:#fff}@media (max-width: 880px){.all-input-container{width:auto}.add-element-container{width:50%}.save-action-container{width:auto}.share-button-container{width:50%}}@media (max-width: 570px){.share-button-container{width:80%}.action-container{width:auto}}@media (max-width: 480px){.all-input-container{padding:1rem 2rem}.add-element-container{width:80%}.action-container{padding:1rem 2rem}.share-button-container{width:100%}}@media (max-width: 425px){.save-action-container{grid-template-columns:1fr}}@media (max-width: 380px){.all-input-container{padding:1rem}.add-element-container{width:95%}.action-container{padding:1rem}}
