*{max-width:1600px;margin:0;padding:0;text-align:center;font-family:Inter,sans-serif}.App{height:100vh;overflow-y:scroll}.app__container{height:100%}.flex__center--row{display:flex;justify-content:center;align-items:center;flex-wrap:wrap}.flex__center--col{display:flex;justify-content:center;align-items:center;flex-direction:column;flex-wrap:wrap}.start__container{padding:1rem;height:100%;width:100%;background:radial-gradient(circle,#A5EBE9,#4CA9B6)}.start__heading{color:#000;font-size:33px;margin:1rem;font-weight:bolder}.cube__img--container{width:350px;height:450px}@keyframes hovering{0%{transform:translateY(0)}50%{transform:translateY(50px)}to{transform:translateY(0)}}.start__btn{height:40px;width:150px;background-color:#f8437c;border-color:transparent;border-radius:50px;font-size:large;font-weight:medium;filter:drop-shadow(0px 10px 10px rgb(209,209,209));filter:drop-shadow(0px 10px 10px #489da9);transition:all .15s ease-in;position:absolute;bottom:2rem;left:50%;transform:translate(-50%);border:1px solid grey}.start__btn:hover{cursor:pointer;background-color:#ff1c64;filter:drop-shadow(0px 10px 10px #397e87)}.credits__s{width:100%;top:90%}.centered__s,.cube__s>.piece__s>.element__s>.sticker__s{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto}.scene__s{margin-top:30vh;width:100%;height:100%;perspective:1200px;transform-style:preserve-3d;animation-name:hovering;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-timing-function:cubic-bezier(.445,.05,.55,.95);animation-timing-function:cubic-bezier(.455,.03,.515,.955);animation-duration:4s}@keyframes hovering{0%{transform:translateY(0)}33%{transform:translateY(30px)}66%{transform:translateY(-30px)}to{transform:translateY(0)}}.scene__s>.pivot__s{width:0;height:0;transition:.3s;transform-style:preserve-3d}.scene__s .anchor__s{width:2em;height:6em}.scene__s div{position:absolute;transform-style:inherit}.cube__s{font-size:190%;margin-left:-1em;margin-top:-1em}.cube__s>.piece__s{width:1.9em;background-color:#2f2f31;height:1.9em}.cube__s>.piece__s>.element__s{width:100%;height:100%;background:#0A0A0A;outline:1px solid transparent;border:.05em solid #0A0A0A;border-radius:10%}.cube__s>.piece__s>.element__s.left__s{transform:rotateX(0) rotateY(-90deg) rotate(180deg) translateZ(1em)}.cube__s>.piece__s>.element__s.right__s{transform:rotateX(0) rotateY(90deg) rotate(90deg) translateZ(1em)}.cube__s>.piece__s>.element__s.back__s{transform:rotateX(0) rotateY(180deg) rotate(-90deg) translateZ(1em)}.cube__s>.piece__s>.element__s.front__s{transform:rotateX(0) rotateY(0) rotate(0) translateZ(1em)}.cube__s>.piece__s>.element__s.bottom__s{transform:rotateX(-90deg) rotateY(0) rotate(-90deg) translateZ(1em)}.cube__s>.piece__s>.element__s.top__s{transform:rotateX(90deg) rotateY(0) rotate(180deg) translateZ(1em)}.cube__s>.piece__s>.element__s>.sticker__s{transform:translateZ(2px);width:95%;height:95%;border-radius:10%;outline:1px solid transparent;box-shadow:inset .05em .05em .2rem #ffffff40,inset -.05em -.05em .2rem #00000040}.cube__s>.piece__s>.element__s>.sticker__s.blue{background-color:#001ca8;background-color:#4fa3df}.cube__s>.piece__s>.element__s>.sticker__s.green{background-color:#006e16;background-color:#79d01e}.cube__s>.piece__s>.element__s>.sticker__s.white{background-color:#ddd;background-color:#e8e8f0}.cube__s>.piece__s>.element__s>.sticker__s.yellow{background-color:#e0ae00;background-color:#f1fd3d}.cube__s>.piece__s>.element__s>.sticker__s.orange{background-color:#ff5000;background-color:#d46904;background-color:#eb7d15}.cube__s>.piece__s>.element__s>.sticker__s.red{background-color:#df0500;background-color:#cd2e19}#pivot__s{transform:rotateX(-35deg) rotateY(-135deg) rotate(0);animation-name:rotate__s;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-timing-function:cubic-bezier(.445,.05,.55,.95);animation-timing-function:cubic-bezier(.455,.03,.515,.955);animation-duration:4s}@keyframes rotate__s{0%{transform:rotateX(-35deg) rotateY(-135deg) rotate(0)}to{transform:rotateX(-35deg) rotateY(585deg) rotate(0);transform:rotateX(325deg) rotateY(225deg) rotate(0);transform:rotateX(-395deg) rotateY(-495deg) rotate(360deg);transform:rotateX(325deg) rotateY(225deg) rotate(360deg);transform:rotateX(-35deg) rotateY(225deg) rotate(360deg)}}.face__info{margin:10px 40px}.face__container{width:170px;height:170px;background-color:#2f2f31;padding:.1rem;border-radius:5px;border-color:transparent}.single__face{border-radius:3px;border-color:transparent;width:52px;height:52px;margin:.1rem}.green__face{background-color:#79d01e}.red__face{background-color:#cd2e19}.white__face{background-color:#e8e8f0}.yellow__face{background-color:#f1fd3d}.orange__face{background-color:#d46904;background-color:#eb7d15}.blue__face{background-color:#4fa3df}.face__set--section{height:100vh;flex-wrap:nowrap;padding:1rem 0 4rem;background:radial-gradient(circle,#A5EBE9,#4CA9B6)}.face__set--container{height:100%;width:60%;margin:auto}.face__set--body{padding:.3rem}.face__info{filter:drop-shadow(0px 0px 3px rgba(128,128,128,.679));display:flex;justify-content:center;align-items:center;flex-direction:column}.face__name{color:#000;font-size:medium}.face__set--title{color:#000;font-size:27px;font-weight:500;margin:.5rem 0}.color__value--container li b{color:#2f2f31d2}.color__value--container li{text-align:left;background-color:#cccccca3;border-radius:5px;padding:5px 5px 5px 35px;color:#555;list-style:none;width:150px;margin:3px;border:1px solid rgba(128,128,128,.453)}.color__value.green,.example__item.green{background-color:#7ad01e74}.color__value.red,.example__item.red{background-color:#cd2d1874}.color__value.white,.example__item.white{background-color:#e8e8f0}.color__value.yellow,.example__item.yellow{background-color:#f0fd3d74}.color__value.orange,.example__item.orange{background-color:#d4690471}.color__value.blue,.example__item.blue{background-color:#4fa3df79}.color__input{width:100%;height:40px;color:#2f2f31c6;margin-top:.5rem;border-radius:5px;border-color:transparent;border:1px solid #2f2f3136;background-color:#f1f2f9;font-size:15px;text-align:center}.color__input::placeholder{color:#b7b7b7}.example__color--heading,.color__heading{color:#2f2f31}.color__value--container{background-color:#fff;border-radius:7px}.example__colors{background-color:#fff;border-radius:7px;width:150px}.example__item{font-size:15px;list-style:none;color:#2f2f31c6;background-color:#cccccca3;border:1px solid rgba(128,128,128,.453);margin:3px;border-radius:5px;padding:5px}.color__set--btn{height:40px;width:150px;background-color:#f8437c;border-color:transparent;border-radius:50px;font-size:large;font-weight:medium;filter:drop-shadow(0px 10px 10px rgb(209,209,209));filter:drop-shadow(0px 10px 10px #489da9);border:1px solid grey;transition:all .15s ease-in;position:absolute;bottom:2rem;right:3rem}.color__set--btn:hover{cursor:pointer;background-color:#ff1c64;filter:drop-shadow(0px 10px 10px rgb(183,183,183));filter:drop-shadow(0px 10px 10px #397e87)}.position__container{padding:1rem;height:100%;width:100%;flex-wrap:nowrap;justify-content:center;background:radial-gradient(circle,#A5EBE9,#4CA9B6)}.position__heading{width:50%;color:#000;font-size:33px;margin:1rem;font-weight:bolder}.position__side{color:gray;color:#000;font-size:15px;text-align:left;width:170px}.position__side--color{width:50%;justify-content:space-between;margin-bottom:1rem}.cube__pos--container{width:300px;height:350px}.cube__pos--pic{width:85%;animation:levitate 4s ease-in-out infinite}@keyframes levitate{0%{transform:translateY(0)}50%{transform:translateY(40px)}to{transform:translateY(0)}}.position__axis{position:absolute;width:180px;filter:drop-shadow(0 0 5px rgb(69,69,69));bottom:0rem;left:1rem}.pos__btn{height:40px;width:150px;background-color:#f8437c;border-color:transparent;border-radius:50px;font-size:large;font-weight:medium;filter:drop-shadow(0px 10px 10px rgb(209,209,209));filter:drop-shadow(0px 10px 10px #489da9);transition:all .15s ease-in;position:absolute;bottom:2rem;left:50%;transform:translate(-50%);border:1px solid grey}.pos__btn:hover{cursor:pointer;background-color:#ff1c64;filter:drop-shadow(0px 10px 10px rgb(183,183,183));filter:drop-shadow(0px 10px 10px #397e87)}html,body{height:100%;overflow:hidden;background-color:#2f2f31;background-color:#fdfdfd}.cube__container{height:100%;width:100%;background:radial-gradient(circle,#A5EBE9,#4CA9B6)}.step__count.active{opacity:1}.step__count{width:160px;height:40px;border-radius:50px;background-color:#d4edda;border:2px solid #C3E6CB;color:#000;position:absolute;top:.7rem;left:1rem;font-size:21px;text-align:left;opacity:0}.move__name{color:#000;position:absolute;top:1rem;left:50%;transform:translate(-50%);font-size:27px;font-weight:600}.moves__num{color:#155724;background-color:#d4edda;border:1px solid #C3E6CB;width:40%;padding:10px;font-size:19px;position:absolute;top:3.5rem;left:50%;transform:translate(-50%);border-radius:5px;font-weight:500;opacity:0}.moves__num.active{opacity:1}.scramble__error{color:#721c24;background-color:#f8d7da;border:1px solid #F5C6CB;width:40%;padding:10px;font-size:19px;position:absolute;top:3.5rem;left:50%;transform:translate(-50%);border-radius:5px;font-weight:500;opacity:0}.retry__btn--scramble{background-color:#d1ecf1;color:#115460;height:40px;width:100px;font-size:17px;border-radius:25px;padding:0;position:absolute;border:2px solid red;left:50%;transform:translate(-50%);top:7rem;border:1px solid #66c4d3;filter:drop-shadow(0px 10px 10px #397e8742);z-index:1;opacity:0}.retry__btn--scramble:hover{background-color:#c8e9ee;filter:drop-shadow(0px 10px 10px #397e8782)}.scramble__error.active,.retry__btn--scramble.active{opacity:1}.cube__container.solver__active{transform:translateY(0)}.credits{width:100%;top:90%}.text{text-align:center;font-family:Helvetica;font-size:.8rem;color:gray;pointer-events:none}.centered,.cube>.piece>.element>.sticker{position:absolute;top:0;bottom:0;left:0;right:0;margin:auto}.scene{width:100%;height:100%;perspective:1200px;transform-style:preserve-3d}.scene>.pivot{width:0;height:0;transition:.3s;transform-style:preserve-3d}.scene .anchor{width:2em;height:6em}.scene div{position:absolute;transform-style:inherit}.cube{font-size:190%;margin-left:-1em;margin-top:-1em}.cube>.piece{width:1.9em;background-color:#2f2f31;height:1.9em}.cube>.piece>.element{width:100%;height:100%;background:#0A0A0A;outline:1px solid transparent;border:.05em solid #0A0A0A;border-radius:10%}.cube>.piece>.element.left{transform:rotateX(0) rotateY(-90deg) rotate(180deg) translateZ(1em)}.cube>.piece>.element.right{transform:rotateX(0) rotateY(90deg) rotate(90deg) translateZ(1em)}.cube>.piece>.element.back{transform:rotateX(0) rotateY(180deg) rotate(-90deg) translateZ(1em)}.cube>.piece>.element.front{transform:rotateX(0) rotateY(0) rotate(0) translateZ(1em)}.cube>.piece>.element.bottom{transform:rotateX(-90deg) rotateY(0) rotate(-90deg) translateZ(1em)}.cube>.piece>.element.top{transform:rotateX(90deg) rotateY(0) rotate(180deg) translateZ(1em)}.cube>.piece>.element>.sticker{transform:translateZ(2px);width:95%;height:95%;border-radius:10%;outline:1px solid transparent;box-shadow:inset .05em .05em .2rem #ffffff40,inset -.05em -.05em .2rem #00000040}.cube>.piece>.element>.sticker.blue{background-color:#001ca8;background-color:#4fa3df}.cube>.piece>.element>.sticker.green{background-color:#006e16;background-color:#79d01e}.cube>.piece>.element>.sticker.white{background-color:#ddd;background-color:#e8e8f0}.cube>.piece>.element>.sticker.yellow{background-color:#e0ae00;background-color:#f1fd3d}.cube>.piece>.element>.sticker.orange{background-color:#ff5000;background-color:#d46904;background-color:#eb7d15}.cube>.piece>.element>.sticker.red{background-color:#df0500;background-color:#cd2e19}.next__move--btn,.repeat__btn,.previous__btn,.replay__btn{height:40px;width:150px;background-color:#f8437c;border-color:transparent;border-radius:50px;font-size:large;font-weight:medium;filter:drop-shadow(0px 10px 10px rgb(209,209,209));filter:drop-shadow(0px 10px 10px #489da9);transition:all .15s ease-in;position:absolute;bottom:2rem;border:1px solid grey}.next__move--btn{left:27rem}.repeat__btn{background-color:#46c483;background-color:#1d1d20;left:15rem}.previous__btn{left:3rem}.replay__btn{opacity:0;right:3rem}.replay__btn.active{opacity:1;animation-name:shake;animation-duration:.8s;animation-delay:.5s;animation-timing-function:ease-out;animation-fill-mode:forwards;animation-iteration-count:infinite}@keyframes shake{0%{transform:scale(1) rotate(0)}20%{transform:scale(1) rotate(0)}40%{transform:scale(1) rotate(-20deg)}60%{transform:scale(1) rotate(20deg)}80%{transform:scale(1) rotate(0)}to{transform:scale(1) rotate(0)}}.next__move--btn:hover,.repeat__btn:hover,.previous__btn:hover,.replay__btn{cursor:pointer;background-color:#ff1c64;filter:drop-shadow(0px 10px 10px rgb(183,183,183));filter:drop-shadow(0px 10px 10px #397e87)}.repeat__btn:hover{background-color:#32b8c3;background-color:#38b976;background-color:#383839}.next__move--btn:disabled,.repeat__btn:disabled,.previous__btn:disabled{background-color:#a9a9a9;transition:all .15s ease-in}.next__move--btn:disabled:hover,.repeat__btn:disabled:hover,.previous__btn:disabled:hover{cursor:default;background-color:#a9a9a9;filter:drop-shadow(0px 10px 10px rgb(209,209,209));filter:drop-shadow(0px 10px 10px #489da9)}#pivot{transition:all .5s ease-in-out}#pivot.active{transform:rotateX(-35deg) rotateY(-135deg) rotate(0);animation-name:rotate;animation-iteration-count:infinite;animation-timing-function:ease-in-out;animation-timing-function:linear;animation-duration:7s;transition:all .3s ease-in-out}@keyframes rotate{0%{transform:rotateX(-35deg) rotateY(-135deg) rotate(0)}to{transform:rotateX(325deg) rotateY(225deg) rotate(0);transform:rotateX(-395deg) rotateY(-495deg) rotate(360deg);transform:rotateX(325deg) rotateY(225deg) rotate(360deg);transform:rotateX(-35deg) rotateY(225deg) rotate(360deg);transform:rotateX(-35deg) rotateY(585deg) rotate(0)}}*{margin:0;padding:0;box-sizing:border-box;color:#fff}