@import url(https://fonts.googleapis.com/css2?family=Bellefair&family=PT+Sans+Narrow:wght@400;700&display=swap);@import url(https://fonts.googleapis.com/css2?family=Kanit:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap);body{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif;margin:0}code{font-family:source-code-pro,Menlo,Monaco,Consolas,Courier New,monospace}.pt-sans-narrow-regular{font-family:PT Sans Narrow,sans-serif;font-style:normal;font-weight:400}.bellefair-regular{font-family:Bellefair,serif;font-style:normal;font-weight:400}.pt-sans-narrow-bold{font-family:PT Sans Narrow,sans-serif;font-style:normal;font-weight:700}.kanit-thin{font-weight:100}.kanit-extralight,.kanit-thin{font-family:Kanit,sans-serif;font-style:normal}.kanit-extralight{font-weight:200}.kanit-light{font-weight:300}.kanit-light,.kanit-regular{font-family:Kanit,sans-serif;font-style:normal}.kanit-regular{font-weight:400}.kanit-medium{font-weight:500}.kanit-medium,.kanit-semibold{font-family:Kanit,sans-serif;font-style:normal}.kanit-semibold{font-weight:600}.kanit-bold{font-weight:700}.kanit-bold,.kanit-extrabold{font-family:Kanit,sans-serif;font-style:normal}.kanit-extrabold{font-weight:800}.kanit-black{font-family:Kanit,sans-serif;font-style:normal;font-weight:900}.kanit-thin-italic{font-weight:100}.kanit-extralight-italic,.kanit-thin-italic{font-family:Kanit,sans-serif;font-style:italic}.kanit-extralight-italic{font-weight:200}.kanit-light-italic{font-weight:300}.kanit-light-italic,.kanit-regular-italic{font-family:Kanit,sans-serif;font-style:italic}.kanit-regular-italic{font-weight:400}.kanit-medium-italic{font-weight:500}.kanit-medium-italic,.kanit-semibold-italic{font-family:Kanit,sans-serif;font-style:italic}.kanit-semibold-italic{font-weight:600}.kanit-bold-italic{font-weight:700}.kanit-bold-italic,.kanit-extrabold-italic{font-family:Kanit,sans-serif;font-style:italic}.kanit-extrabold-italic{font-weight:800}.kanit-black-italic{font-family:Kanit,sans-serif;font-style:italic;font-weight:900}.App{padding-top:50px;text-align:center}.App-logo{height:40vmin;max-width:100vw;pointer-events:none}.Test{background-color:#a6a7a8}.Test2{background-color:#526272}.ButtonFire,.kanitfont{font-family:kanit}.ButtonFire{background-color:initial;border:none;border-radius:5px;box-shadow:0 4px 6px #0000001a;color:#fff;cursor:pointer;font-size:16px;font-size:29px;font-weight:700;padding:10px 20px;text-transform:uppercase;transition:background-color .3s,transform .3s}.ButtonFire:hover{background-color:initial;transform:translateY(-2px)}.ButtonFire:active{background-color:initial;transform:translateY(0)}.ButtonFire:focus{box-shadow:0 0 0 3px #ced1d180;outline:none}.avatar{border-radius:50%}.tooltip-container{display:inline-block;position:relative}.tooltip{background-color:#000;border-radius:6px;bottom:107%;color:#fff;margin-left:-60px;opacity:0;padding:5px;text-align:center;transition:opacity .3s;visibility:hidden;width:120px;z-index:1}.tooltip,.tooltip:after{left:50%;position:absolute}.tooltip:after{border:5px solid #0000;border-top-color:#000;content:"";margin-left:-5px;top:100%}.tooltip-container:hover .tooltip{opacity:1;visibility:visible}@media (prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin 20s linear infinite}}.App-header{align-items:center;background-color:#282c34;color:#fff;display:flex;flex-direction:column;font-size:calc(10px + 2vmin);justify-content:center;min-height:100vh}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.background{background-image:url(https://cdn.oneesports.gg/cdn-data/2024/07/TeamfightTactics_Set12_MagicandMayhem_KeyVisual.jpg);background-position:50%;background-size:cover;filter:blur(13px);position:fixed}.background,.background:before{height:100%;left:0;top:0;width:100%;z-index:-1}.background:before{background:#00000036;content:"";position:absolute}.spaced-component{margin-bottom:50px}.divider{background-color:#ffffff80;border:none;height:2px;margin:50px 0}.grid-container{grid-gap:0;display:grid;gap:0;grid-template-columns:repeat(6,1fr)}.grid-container-mobile{grid-gap:0;display:grid;gap:0;grid-template-columns:repeat(3,1fr)}.grid-traits-container{grid-gap:0;display:grid;gap:0;grid-template-columns:repeat(4,1fr);max-width:100vw;overflow-x:hidden}.grid-traits-container-mobile{grid-gap:0;display:grid;gap:0;grid-template-columns:repeat(2,1fr);max-width:100vw;overflow-x:hidden}.grid-item,.grid-item-highlight{margin-top:20px;text-align:center}.grid-item-highlight{background-color:#fff3;border:2px solid #a7bb94;padding-bottom:20px;padding-top:20px}.grid-quiz-item{align-items:center;cursor:pointer;justify-content:center;text-align:center}.grid-quiz-item:hover{transform:translateY(-2px)}.grid-quiz-item-selected{background-color:green;box-shadow:0 0 1px #000000ab;cursor:pointer;display:grid;margin-left:150px;text-align:center}.item-image{cursor:pointer}.item-image:hover{transform:translateY(-2px)}.component-container{justify-content:center;margin-top:0}.component-image{box-shadow:0 4px 6px #000000ab}.component-image,.component-quiz-image{cursor:pointer;height:48px;width:48px}.component-image:hover{transform:translateY(-2px)}.champion-image{box-shadow:0 4px 6px #000000ab;cursor:pointer}.champion-image:hover{transform:translateY(-2px)}.quiz-champion-image-container{cursor:pointer;max-width:100vw;overflow:hidden;overflow-x:hidden;padding:50px}.quiz-champion-image-wrapper{max-width:100vw;overflow-x:hidden;position:relative}.quiz-champion-image{border-bottom:2px solid #1c1d1b}.quiz-champion-image,.quiz-champion-image-shake{box-shadow:0 4px 6px #000000ab;cursor:pointer;display:flex;transition:transform .3s ease}.quiz-champion-image-shake{animation:shake .5s}@keyframes shake{0%{transform:translate(1px,1px) rotate(0deg)}10%{transform:translate(-1px,-2px) rotate(-1deg)}20%{transform:translate(-3px) rotate(1deg)}30%{transform:translate(3px,2px) rotate(0deg)}40%{transform:translate(1px,-1px) rotate(1deg)}50%{transform:translate(-1px,2px) rotate(-1deg)}60%{transform:translate(-3px,1px) rotate(0deg)}70%{transform:translate(3px,1px) rotate(-1deg)}80%{transform:translate(-1px,-1px) rotate(1deg)}90%{transform:translate(1px,2px) rotate(0deg)}to{transform:translate(1px,-2px) rotate(-1deg)}}.quiz-champion-image-text{display:flex}.quiz-champion-image:hover{transform:translateY(-2px)}::-webkit-scrollbar{width:0}.scrollPath{background:#ffffff0d;height:100%;width:10px}.progressbar,.scrollPath{position:fixed;right:0;top:0}.progressbar{animation:animate 5s linear infinite;background:linear-gradient(0deg,#008aff,#00ffe7);height:20%;width:6px}@keyframes animate{0%,to{filter:hue-rotate(0deg)}50%{filter:hue-rotate(1turn)}}.progressbar:before{filter:blur(10px)}.progressbar:after,.progressbar:before{background:linear-gradient(0deg,#008aff,#00ffe7);content:"";height:100%;position:absolute;right:0;top:0;width:10px}.progressbar:after{filter:blur(30px)}.quiz-trait-image{cursor:pointer}.trait-text{color:#000;display:flex;font-family:kanit;font-size:20px;font-weight:600;margin:0}.trait-item{padding:5px}.trait-item,.trait-item-shake{align-items:center;display:flex;justify-content:center}.trait-item-shake{animation:shake .5s;padding:10px}.trait-item-selected{border:2px solid #9cd665;box-shadow:0 5px 10px #000}.quiz-trait-item,.trait-item-selected{align-items:center;display:flex;justify-content:center;padding:10px}.quiz-trait-item{margin:center}.quiz-champion-name{color:#000;display:flex;font-family:kanit;font-size:45px;font-weight:600;margin-left:10px}.accuracy-text-container{display:inline-block;max-width:100vw;overflow-x:hidden}.accuracy-text{font-size:25px}.accuracy-text,.accuracy-text-mobile{font-family:kanit;font-weight:600;margin-right:5%;transform:scale(.5)}.accuracy-text-mobile{font-size:19px;max-width:100vw;overflow-x:hidden}#accuracy{left:87%}#accuracy,#success{opacity:.65;position:absolute;top:5%;transform:translate(-50%,-50%)}#success{left:78%}.about-container{background-color:#0006;border-radius:8px;color:#fff;margin:40px auto;max-width:70vw;overflow-x:hidden;padding:20px;text-align:center}.about-container h1{font-size:2rem;margin-bottom:10px}.about-container p{font-size:1rem;line-height:1.5;margin:10px 0}.about-container a{color:#a3c93c;text-decoration:none}.about-container a:hover{text-decoration:underline}
/*# sourceMappingURL=main.bfe98a49.css.map*/