.menu-main{margin-top:70px;height:500px;width:500px;display:flex;justify-content:center;flex-direction:column;text-align:center;align-items:center;position:absolute;background-image:url(/Invoker_Game_Simulator/assets/startMenu-79a76ead.PNG);background-size:100%,100%;background-repeat:no-repeat;border-radius:19px}html *{font-family:Cinzel,serif;cursor:default;-webkit-text-size-adjust:none;touch-action:manipulation}body{height:100vh;margin:0 auto;overflow:hidden}h1,h2{color:#fff}b{color:red}.container{display:flex;flex-direction:row}.infoArea{color:#fff;width:500px;height:50px;display:flex;justify-content:space-evenly;align-items:center;flex-direction:row;border:2px solid rgb(184,184,184);margin-bottom:15px;border-radius:15px;padding-bottom:0 auto}.info1,.info2{display:flex;justify-content:center;align-items:center;height:50%;width:50%}.container-main{display:flex;flex-direction:column;justify-content:space-evenly;align-items:center}.container1{display:flex;flex-direction:column;justify-content:center;align-items:start}.container2{display:flex;flex-direction:column;justify-content:center;align-items:center}.nav-area{display:flex;justify-content:center;align-items:center;margin-bottom:20px}.nav{display:flex;flex-direction:column;justify-content:center;align-items:center}.quas{height:100px;width:100px;background-color:#00c3ff;border-radius:50%;filter:blur(10px)}.wex{height:100px;width:100px;background-color:#cc26e2;border-radius:50%;filter:blur(10px)}.exort{height:100px;width:100px;background-color:#e9820d;border-radius:50%;filter:blur(10px)}.gameArea{background-color:#131313;display:flex;justify-content:center;align-items:center;height:500px;width:500px;border:2px solid rgb(184,184,184);border-radius:20px}.orbit-container{border-radius:50%;position:relative;border:3px dotted rgb(184,184,184);height:350px;width:350px;display:flex;justify-content:center;align-items:center;-webkit-animation:spin-right 10s linear infinite;animation:spin-right 10s linear infinite}.orbit-circle{position:absolute;height:100px;width:100px;border-radius:50%;border:3px dotted white;top:-17.5%;left:35%;-webkit-animation:spin-left 10s linear infinite;animation:spin-left 10s linear infinite}.orbit-circle1{position:absolute;height:100px;width:100px;border-radius:50%;border:3px dotted white;top:60%;right:80%;-webkit-animation:spin-left 10s linear infinite;animation:spin-left 10s linear infinite}.orbit-circle2{position:absolute;height:100px;width:100px;border-radius:50%;border:3px dotted white;top:60%;left:80%;-webkit-animation:spin-left 10s linear infinite;animation:spin-left 10s linear infinite}.spellImg{margin-top:70px;height:200px;width:200px;display:flex;justify-content:center;flex-direction:grid;text-align:center;align-items:center;position:absolute;border-radius:19px;animation:1s ease-out popup;transition:1s}.spellImg img{border-radius:50%;height:220px;width:220px;border:2px solid rgb(184,184,184)}@keyframes popup{0%{opacity:0;transform:scale(1)}to{opacity:1}}.glowArea{display:flex;justify-content:center;align-items:center;height:500px;width:500px;border-radius:20px;position:absolute}.innerCir{position:relative;border-radius:50%;height:235px;width:235px;border:2px solid #00c3ff;box-shadow:0 0 60px #00c3ff;animation:1s ease-out popup;transition:1s}.outerCir{border-radius:50%;position:absolute;height:370px;width:370px;top:63px;left:63px;-webkit-animation:spin-right 10s linear infinite;animation:spin-right 10s linear infinite;border:2px solid #cc26e2;box-shadow:0 0 50px #cc26e2;animation:1s ease-out popup;transition:.1s}.glowBox{display:flex;justify-content:center;align-items:center;position:absolute;height:500px;width:500px;top:-2px;left:-2px;border-radius:20px;border:2px solid #e9820d;box-shadow:inset 0 0 50px #e9820d;animation:1s ease-out popup;transition:1s}@-webkit-keyframes spin-right{to{-webkit-transform:rotate(360deg);-moz-transform:rotate(360deg);-ms-transform:rotate(360deg);-o-transform:rotate(360deg);transform:rotate(360deg)}}@-webkit-keyframes spin-left{to{-webkit-transform:rotate(-360deg);-moz-transform:rotate(-360deg);-ms-transform:rotate(-360deg);-o-transform:rotate(-360deg);transform:rotate(-360deg)}}.main{height:100vh;background-color:#131313;display:flex;justify-content:center;align-items:center;flex-direction:column}.buttons{display:none;justify-content:space-evenly;align-items:center;width:550px;height:120px;margin-top:8px}.buttons button{width:150px;height:80px}.timer{color:green}button{height:50%;width:50%;background-color:transparent;color:#fff;border:2px solid white;margin-bottom:10px;border-radius:10px}button:nth-of-type(1){background-color:transparent;color:#00c3ff;border:2px solid #00c3ff;margin-bottom:10px}button:nth-of-type(1):hover{background-color:transparent;color:#fff;border:2px solid white;margin-bottom:10px;border-color:#00c3ff;box-shadow:inset 0 0 15px #00c3ff;transform:scale(1.1)}button:nth-of-type(2){background-color:transparent;color:#cc26e2;border:2px solid #cc26e2;margin-bottom:10px}button:nth-of-type(2):hover{background-color:transparent;color:#fff;border:2px solid white;margin-bottom:10px;border-color:#cc26e2;box-shadow:inset 0 0 15px #cc26e2;transform:scale(1.1)}button:nth-of-type(3){background-color:transparent;color:#e9820d;border:2px solid #e9820d;margin-bottom:10px}button:nth-of-type(3):hover{background-color:transparent;color:#fff;border:2px solid white;margin-bottom:10px;border-color:#e9820d;box-shadow:inset 0 0 15px #e9820d;transform:scale(1.1)}button:nth-of-type(4){background-color:transparent;color:#fff;border:2px solid white;margin-bottom:10px}button:nth-of-type(4):hover{background-color:transparent;color:#fff;margin-bottom:10px;box-shadow:inset 0 0 15px #fff;transform:scale(1.1)}.pop-in-start-from{opacity:0}.pop-in-start-to{opacity:1}.pop-in-start-active{transition:pop-in .5s}.pop-leave-from{opacity:1}.pop-leave-to{opacity:0}.pop-leave-active{animation:pop .5s}@keyframes pop{0%{opacity:1}to{transform:scale(1.2);opacity:0}}.popo-leave-from{opacity:1}.popo-leave-to{opacity:0;transform:scale(-1)}.popo-leave-active{animation:popo 1s}@keyframes popo{0%{opacity:1}to{transform:scale(-1);opacity:0}}.main-timesUp{margin-top:70px;height:500px;width:500px;display:flex;justify-content:center;flex-direction:column;text-align:center;align-items:center;position:absolute;background-color:#131313;border-radius:19px;overflow:hidden}.puckYou{height:200px;width:200px;position:absolute;bottom:-30px;right:-10px}.rylai{height:250px;width:110px;position:absolute;bottom:15px;left:-7px}.invoPNG{height:200px;width:140px;position:absolute;bottom:15px;right:-20px}.topNav{height:5vh;width:100%;color:#fff;display:flex;justify-content:center;align-items:center;background-color:#3a3838;position:fixed}.logo{width:50%}.logo h3{margin-left:50px}.links{display:flex;justify-content:flex-end;align-items:center;flex-direction:row;width:50%}.links a{margin-right:50px;text-decoration:none;color:#fff}.links a:hover{color:#ff3131}footer{height:5vh;width:100%;color:#fff;display:flex;justify-content:center;align-items:center;bottom:0;background-color:#3a3838}.sideNav{height:100vh;width:5vw;position:fixed;display:flex;justify-content:center;flex-direction:column;align-items:center;border-radius:10px;left:-4%;transition:.5s}.sideNav:hover{left:0%}.socialIcons{height:20%;width:80%;display:flex;justify-content:space-evenly;align-items:center;flex-direction:column;background-color:#bbb;border-radius:10px;margin-bottom:70px}.socialIcons:hover{background-color:#49494980}.svg{height:40px;width:40px;filter:invert(1)}.socialIcons a:hover{-webkit-filter:drop-shadow(0px 0px 5px #FF3131);filter:drop-shadow(0px 0px 5px #FF3131);transform:scale(1.1)}@media (max-height: 768px),(max-width: 768px){.gameArea,.menu-main{width:400px;height:400px}.infoArea h3{font-size:17px}h1{font-size:29px}.infoArea{width:400px}.orbit-container{border-radius:50%;position:relative;height:300px;width:300px;display:flex;justify-content:center;align-items:center}.orbit-circle{display:flex;justify-content:center;align-items:center;position:absolute;height:70px;width:70px;top:-13.5%;left:35%}.orbit-circle1{display:flex;justify-content:center;align-items:center;position:absolute;height:70px;width:70px;top:60%;right:80%}.orbit-circle2{display:flex;justify-content:center;align-items:center;position:absolute;height:70px;width:70px;top:60%;left:80%}.spellImg img{border-radius:50%;height:180px;width:180px;border:2px solid rgb(184,184,184)}.quas,.wex,.exort{height:60px;width:60px}.svg{height:25px;width:25px}.main-timesUp{margin-top:70px;width:400px;height:400px;display:flex;justify-content:center;flex-direction:column;text-align:center;align-items:center;position:absolute;overflow:hidden}.puckYou{height:150px;width:150px;position:absolute;bottom:-20px;right:-10px}.rylai{height:200px;width:90px;position:absolute;bottom:5px;left:-7px}.invoPNG{height:150px;width:100px;position:absolute;bottom:15px;right:-10px}h2{color:#fff;font-size:18px}.glowArea{display:flex;justify-content:center;align-items:center;height:500px;width:500px;border-radius:20px;position:absolute}.innerCir{position:relative;border-radius:50%;height:205px;width:205px;border:2px solid #00c3ff;box-shadow:0 0 60px #00c3ff;animation:1s ease-out popup;transition:1s}.outerCir{border-radius:50%;position:absolute;height:330px;width:330px;top:83px;left:83px;-webkit-animation:spin-right 10s linear infinite;animation:spin-right 10s linear infinite;border:2px solid #cc26e2;box-shadow:0 0 50px #cc26e2;animation:1s ease-out popup;transition:.1s}.glowBox{display:flex;justify-content:center;align-items:center;position:absolute;height:400px;width:400px;top:48px;left:48px;border-radius:20px;border:2px solid #e9820d;box-shadow:inset 0 0 50px #e9820d;animation:1s ease-out popup;transition:1s}}@media (max-height: 375px),(max-width: 667px){.links a{font-size:10px;margin-right:20px}.gameArea{width:300px;height:300px}.menu-main{width:300px;height:300px;margin-bottom:106px}.infoArea{width:300px}.infoArea h3{font-size:11px}h1{font-size:19px}.orbit-container{border-radius:50%;position:relative;height:220px;width:220px;display:flex;justify-content:center;align-items:center}.orbit-circle{display:flex;justify-content:center;align-items:center;position:absolute;height:50px;width:50px;top:-13.5%;left:35%}.orbit-circle1{display:flex;justify-content:center;align-items:center;position:absolute;height:50px;width:50px;top:60%;right:80%}.orbit-circle2{display:flex;justify-content:center;align-items:center;position:absolute;height:50px;width:50px;top:60%;left:80%}.spellImg img{border-radius:50%;height:120px;width:120px;border:2px solid rgb(184,184,184)}.title p{font-size:13px}.quas,.wex,.exort{height:45px;width:45px;filter:blur(5px);border-radius:50%}.svg{height:25px;width:25px}.main-timesUp{margin-bottom:106px;width:300px;height:300px;display:flex;justify-content:center;flex-direction:column;text-align:center;align-items:center;position:absolute;overflow:hidden}.scoreDisplay p{font-size:10px}.puckYou{height:130px;width:130px;position:absolute;bottom:-20px;right:-10px}.rylai{height:140px;width:60px;position:absolute;bottom:5px;left:-7px}.socialIcons{display:none}.invoPNG{height:110px;width:80px;position:absolute;bottom:10px;right:-15px}h2{color:#fff;font-size:18px}.glowArea{display:flex;justify-content:center;align-items:center;height:200px;width:200px;border-radius:20px;position:absolute}.innerCir{position:relative;border-radius:50%;height:130px;width:130px;bottom:-1px;border:2px solid #00c3ff;box-shadow:0 0 40px #00c3ff;animation:1s ease-out popup;transition:1s}.outerCir{border-radius:50%;position:re;height:235px;width:235px;top:-19px;left:-19px;-webkit-animation:spin-right 10s linear infinite;animation:spin-right 10s linear infinite;border:2px solid #cc26e2;box-shadow:0 0 45px #cc26e2;animation:1s ease-out popup;transition:.1s}.glowBox{display:flex;justify-content:center;align-items:center;position:absolute;height:298px;width:298px;top:-51px;left:-51px;border-radius:20px;border:2px solid #e9820d;box-shadow:inset 0 0 45px #e9820d;animation:1s ease-out popup;transition:1s}.footerText{font-size:11.5px}.logo h3{font-size:15px}.buttons{display:flex;justify-content:space-evenly;align-items:center;width:310px;height:100px}.buttons button{width:60px;height:60px}}.menu-main{margin-top:70px;height:500px;width:500px;display:flex;justify-content:center;flex-direction:column;text-align:center;align-items:center;position:absolute;background-image:url(/Invoker_Game_Simulator/assets/startMenu-79a76ead.PNG);background-size:100%,100%;background-repeat:no-repeat;border-radius:19px}.menu-main{margin-top:70px;height:500px;width:500px;display:flex;justify-content:center;flex-direction:column;text-align:center;align-items:center;position:absolute;background-image:url(/Invoker_Game_Simulator/assets/startMenu-79a76ead.PNG);background-size:100%,100%;background-repeat:no-repeat;border-radius:19px}.menu-main{margin-top:70px;height:500px;width:500px;display:flex;justify-content:center;flex-direction:column;text-align:center;align-items:center;position:absolute;background-image:url(/Invoker_Game_Simulator/assets/startMenu-79a76ead.PNG);background-size:100%,100%;background-repeat:no-repeat;border-radius:19px}.menu-main .gameTitle{display:flex;justify-content:center;align-items:end;height:50%}.menu-main .gameTitle h1{padding-bottom:0;margin-bottom:10px}.menu-main .gameOptions{height:40%;width:100%;display:flex;justify-content:flex-start;flex-direction:column;align-items:center}.menu-main .gameOptions h3{width:150px;margin:3px;color:#fff;transition:.3s}.menu-main .gameOptions h3:nth-of-type(1){border:2px solid #e9820d;border-radius:8px;border-style:none none solid solid;text-shadow:0 0 10px black}.menu-main .gameOptions h3:nth-of-type(2){border:2px solid #cc26e2;border-radius:8px;border-style:none none solid solid;text-shadow:0 0 10px black}.menu-main .gameOptions h3:nth-of-type(3){border:2px solid #00c3ff;border-radius:8px;border-style:none none solid solid;text-shadow:0 0 10px black}.menu-main .gameOptions h3:nth-of-type(4){border:2px solid white;border-radius:8px;border-style:none none solid solid;text-shadow:0 0 10px black}.menu-main .gameOptions h3:nth-of-type(1):hover{color:#e9820d;text-shadow:0 0 5px black;transform:scale(1.1)}.menu-main .gameOptions h3:nth-of-type(2):hover{color:#cc26e2;text-shadow:0 0 5px black;transform:scale(1.1)}.menu-main .gameOptions h3:nth-of-type(3):hover{color:#00c3ff;text-shadow:0 0 5px black;transform:scale(1.1)}.menu-main .gameOptions h3:nth-of-type(4):hover{color:#fff;text-shadow:0 0 5px black;transform:scale(1.1)}.aboutMain{margin-top:70px;height:500px;width:500px;display:flex;justify-content:center;flex-direction:column;text-align:center;align-items:center;position:absolute;background-color:#1d1d1d;border-radius:19px;color:#fff}.aboutMain .aboutContents{text-align:start}.aboutMain .aboutContents span{color:#ff3131}.aboutMain .aboutContents a{color:#00c3ff;text-decoration:none}.aboutMain .close p{color:#fff;text-shadow:0 0 10px #FF3131}.aboutMain .close p:hover{color:#ff3131;transform:scale(1.1)}.tutorial-main{margin-top:70px;height:500px;width:500px;display:flex;justify-content:start;flex-direction:column;text-align:center;align-items:center;position:absolute;background-color:#1a1a1a;border-radius:19px;color:#fff}.tutorial-main #control{margin-bottom:0}.tutorial-main .inputsCategory{height:10%;width:100%;display:flex;justify-content:space-evenly;flex-direction:row}.tutorial-main .inputsCategory .kb,.tutorial-main .inputsCategory .mb{width:50%;height:100%;display:flex;justify-content:center;align-items:center}.tutorial-main .inputs-container{height:40%;width:90%;display:flex;justify-content:space-between;flex-direction:row}.tutorial-main .inputs-container .keyboard{height:100%;width:50%;display:flex;justify-content:space-evenly;flex-direction:column;border:1px solid white;border-radius:10px;padding:10px;margin-right:10px}.tutorial-main .inputs-container .keyboard .keyQ{height:20%;width:95%;display:flex;justify-content:space-evenly;flex-direction:row;align-items:center}.tutorial-main .inputs-container .keyboard .keyQ .code1{height:80%;width:20%;display:flex;justify-content:space-evenly;align-items:center;border:1px solid #00c3ff;border-radius:5px;color:#00c3ff}.tutorial-main .inputs-container .keyboard .keyQ .ball1{height:70%;width:14%;display:flex;justify-content:space-evenly;align-items:center;border-radius:50%;border:1px solid #00c3ff;background-color:#00c3ff;filter:blur(3px)}.tutorial-main .inputs-container .keyboard .keyW{height:20%;width:95%;display:flex;justify-content:space-evenly;flex-direction:row;align-items:center}.tutorial-main .inputs-container .keyboard .keyW .code2{height:80%;width:20%;display:flex;justify-content:space-evenly;align-items:center;border:1px solid #cc26e2;border-radius:5px;color:#cc26e2}.tutorial-main .inputs-container .keyboard .keyW .ball2{height:70%;width:14%;display:flex;justify-content:space-evenly;align-items:center;border-radius:50%;border:1px solid #cc26e2;background-color:#cc26e2;filter:blur(3px)}.tutorial-main .inputs-container .keyboard .keyE{height:20%;width:95%;display:flex;justify-content:space-evenly;flex-direction:row;align-items:center}.tutorial-main .inputs-container .keyboard .keyE .code3{height:80%;width:20%;display:flex;justify-content:space-evenly;align-items:center;border:1px solid #e9820d;border-radius:5px;color:#e9820d}.tutorial-main .inputs-container .keyboard .keyE .ball3{height:70%;width:14%;display:flex;justify-content:space-evenly;align-items:center;border-radius:50%;border:1px solid #e9820d;background-color:#e9820d;filter:blur(3px)}.tutorial-main .inputs-container .keyboard .keyR{height:20%;width:95%;display:flex;justify-content:space-evenly;flex-direction:row;align-items:center}.tutorial-main .inputs-container .keyboard .keyR .code4{height:80%;width:20%;display:flex;justify-content:space-evenly;align-items:center;border:1px solid white;border-radius:5px;color:#fff}.tutorial-main .inputs-container .keyboard .keyR .ball4{height:70%;width:14%;display:flex;justify-content:space-evenly;align-items:center;border-radius:50%}.tutorial-main .inputs-container .mobile{height:100%;width:50%;display:flex;justify-content:space-evenly;flex-direction:column;border:1px solid white;border-radius:10px;padding:10px;margin-left:10px}.tutorial-main .inputs-container .mobile h5{font-size:10px}.tutorial-main .inputs-container .mobile .mobileQ{height:20%;width:100%;display:flex;justify-content:space-evenly;flex-direction:row;align-items:center}.tutorial-main .inputs-container .mobile .mobileQ .touch1{height:80%;width:20%;display:flex;justify-content:space-evenly;align-items:center;border:1px solid #00c3ff;border-radius:5px;color:#00c3ff}.tutorial-main .inputs-container .mobile .mobileQ .mobileBall1{height:70%;width:14%;display:flex;justify-content:space-evenly;align-items:center;border-radius:50%;border:1px solid #00c3ff;background-color:#00c3ff;filter:blur(3px)}.tutorial-main .inputs-container .mobile .mobileW{height:20%;width:100%;display:flex;justify-content:space-evenly;flex-direction:row;align-items:center}.tutorial-main .inputs-container .mobile .mobileW .touch2{height:80%;width:20%;display:flex;justify-content:space-evenly;align-items:center;border:1px solid #cc26e2;border-radius:5px;color:#cc26e2}.tutorial-main .inputs-container .mobile .mobileW .mobileBall2{height:70%;width:14%;display:flex;justify-content:space-evenly;align-items:center;border-radius:50%;border:1px solid #cc26e2;background-color:#cc26e2;filter:blur(3px)}.tutorial-main .inputs-container .mobile .mobileE{height:20%;width:100%;display:flex;justify-content:space-evenly;flex-direction:row;align-items:center}.tutorial-main .inputs-container .mobile .mobileE .touch3{height:80%;width:20%;display:flex;justify-content:space-evenly;align-items:center;border:1px solid #e9820d;border-radius:5px;color:#e9820d}.tutorial-main .inputs-container .mobile .mobileE .mobileBall3{height:70%;width:14%;display:flex;justify-content:space-evenly;align-items:center;border-radius:50%;border:1px solid #e9820d;background-color:#e9820d;filter:blur(3px)}.tutorial-main .inputs-container .mobile .mobileR{height:20%;width:100%;display:flex;justify-content:space-evenly;flex-direction:row;align-items:center}.tutorial-main .inputs-container .mobile .mobileR .touch4{height:80%;width:20%;display:flex;justify-content:space-evenly;align-items:center;border:1px solid white;border-radius:5px;color:#fff}.tutorial-main .inputs-container .mobile .mobileR .mobileBall4{height:70%;width:14%;display:flex;justify-content:space-evenly;align-items:center;border-radius:50%}.tutorial-main .instructions-container{height:30%;width:90%;display:flex;justify-content:start;flex-direction:column;align-items:center;text-align:start;margin-top:25px}.tutorial-main .instructions-container span{color:#ff3131}.tutorial-main .instructions-container p{padding:10px;font-size:15px;border:1px solid white;border-radius:5px}.tutorial-main .instructions-container .close{text-shadow:0 0 5px #FF3131}.tutorial-main .instructions-container .close:hover{transform:scale(1.15);text-shadow:0 0 10px #FF3131}.spellGuide-main{margin-top:70px;height:500px;width:500px;display:flex;justify-content:start;flex-direction:column;text-align:center;align-items:center;position:absolute;background-color:#1a1a1a;border-radius:19px;color:#fff}.spellGuide-main .spellGuide-container{height:98%;width:100%;display:flex;justify-content:space-between;flex-direction:row}.spellGuide-main .spellGuide-container .left{height:95%;width:50%;display:flex;justify-content:space-evenly;flex-direction:column;border-radius:10px;font-size:15px;margin-left:25px}.spellGuide-main .spellGuide-container .left .keyQ{height:8%;width:90%;display:flex;justify-content:space-evenly;flex-direction:row;align-items:center}.spellGuide-main .spellGuide-container .left .keyQ .code1{height:100%;width:18%;display:flex;justify-content:space-evenly;align-items:center;border:1px solid #00c3ff;border-radius:5px}.spellGuide-main .spellGuide-container .left .keyQ .code1 img{height:100%;width:100%;border-radius:5px}.spellGuide-main .spellGuide-container .left .keyQ .code2{height:100%;width:18%;display:flex;justify-content:space-evenly;align-items:center;border:1px solid #cc26e2;border-radius:5px}.spellGuide-main .spellGuide-container .left .keyQ .code2 img{height:100%;width:100%;border-radius:5px}.spellGuide-main .spellGuide-container .left .keyQ .code3{height:100%;width:18%;display:flex;justify-content:space-evenly;align-items:center;border:1px solid #e9820d;border-radius:5px}.spellGuide-main .spellGuide-container .left .keyQ .code3 img{height:100%;width:100%;border-radius:5px}.spellGuide-main .spellGuide-container .left .keyQ .ball1{height:45%;width:8%;display:flex;justify-content:space-evenly;align-items:center;border-radius:50%;border:1px solid #00c3ff;background-color:#00c3ff;filter:blur(3px)}.spellGuide-main .spellGuide-container .left .keyQ .ball2{height:45%;width:8%;display:flex;justify-content:space-evenly;align-items:center;border-radius:50%;border:1px solid #cc26e2;background-color:#cc26e2;filter:blur(3px)}.spellGuide-main .spellGuide-container .left .keyQ .ball3{height:45%;width:8%;display:flex;justify-content:space-evenly;align-items:center;border-radius:50%;border:1px solid #e9820d;background-color:#e9820d;filter:blur(3px)}.spellGuide-main .spellGuide-container .right{height:95%;width:50%;display:flex;justify-content:space-evenly;flex-direction:column;border-radius:10px;font-size:15px;margin-right:15px}.spellGuide-main .spellGuide-container .right .keyQ{height:8%;width:90%;display:flex;justify-content:space-evenly;flex-direction:row;align-items:center}.spellGuide-main .spellGuide-container .right .keyQ .code1{height:100%;width:18%;display:flex;justify-content:space-evenly;align-items:center;border:1px solid #00c3ff;border-radius:5px}.spellGuide-main .spellGuide-container .right .keyQ .code1 img{height:100%;width:100%;border-radius:5px}.spellGuide-main .spellGuide-container .right .keyQ .code2{height:100%;width:18%;display:flex;justify-content:space-evenly;align-items:center;border:1px solid #cc26e2;border-radius:5px}.spellGuide-main .spellGuide-container .right .keyQ .code2 img{height:100%;width:100%;border-radius:5px}.spellGuide-main .spellGuide-container .right .keyQ .code3{height:100%;width:18%;display:flex;justify-content:space-evenly;align-items:center;border:1px solid #e9820d;border-radius:5px}.spellGuide-main .spellGuide-container .right .keyQ .code3 img{height:100%;width:100%;border-radius:5px}.spellGuide-main .spellGuide-container .right .keyQ .code4{height:100%;width:18%;display:flex;justify-content:space-evenly;align-items:center;border:1px solid white;border-radius:5px;border-image:linear-gradient(to right,#00c3ff,#cc26e2,#e9820d) 1}.spellGuide-main .spellGuide-container .right .keyQ .code4 img{height:100%;width:100%;border-radius:5px}.spellGuide-main .spellGuide-container .right .keyQ .ball1{height:45%;width:8%;display:flex;justify-content:space-evenly;align-items:center;border-radius:50%;border:1px solid #00c3ff;background-color:#00c3ff;filter:blur(3px)}.spellGuide-main .spellGuide-container .right .keyQ .ball2{height:45%;width:8%;display:flex;justify-content:space-evenly;align-items:center;border-radius:50%;border:1px solid #cc26e2;background-color:#cc26e2;filter:blur(3px)}.spellGuide-main .spellGuide-container .right .keyQ .ball3{height:45%;width:8%;display:flex;justify-content:space-evenly;align-items:center;border-radius:50%;border:1px solid #e9820d;background-color:#e9820d;filter:blur(3px)}.spellGuide-main .close{position:relative;top:-20px;text-shadow:0 0 10px red}.spellGuide-main .close:hover{text-shadow:0 0 15px red;transform:scale(1.1)}@media (max-height: 768px),(max-width: 768px){.menu-main{margin-top:70px;height:400px;width:400px}.menu-main .gameTitle h1{padding-bottom:0;margin-bottom:10px;font-size:25px}.menu-main .gameOptions h3{width:150px;margin:3px;color:#fff;transition:.3s;font-size:15px}.aboutMain{margin-top:70px;height:400px;width:400px;display:flex;justify-content:center;flex-direction:column;text-align:center;align-items:center;position:absolute;background-color:#1d1d1d;border-radius:19px;color:#fff}.aboutMain .aboutContents{text-align:start;font-size:13.5px}.aboutMain .aboutContents span{color:#ff3131}.aboutMain .aboutContents a{color:#00c3ff;text-decoration:none}.aboutMain .close p{color:#fff;font-size:13.5px;text-shadow:0 0 10px #FF3131}.aboutMain .close p:hover{color:#ff3131;transform:scale(1.1)}.tutorial-main{margin-top:70px;height:400px;width:400px;display:flex;justify-content:start;flex-direction:column;text-align:center;align-items:center;position:absolute;background-color:#1a1a1a;border-radius:19px;color:#fff}.tutorial-main #control{font-size:15px;margin-bottom:0}.tutorial-main .inputsCategory{height:10%;width:100%;display:flex;justify-content:space-evenly;flex-direction:row}.tutorial-main .inputsCategory .kb,.tutorial-main .inputsCategory .mb{width:50%;height:100%;display:flex;justify-content:center;align-items:center;font-size:15px}.tutorial-main .keyboard,.tutorial-main .keyboard h3{font-size:13px}.tutorial-main .keyboard .keyQ .ball1,.tutorial-main .keyboard .keyW .ball2,.tutorial-main .keyboard .keyE .ball3{height:50%}.tutorial-main .keyboard .keyR{font-size:12px}.tutorial-main .mobile,.tutorial-main .mobile h3{font-size:13px}.tutorial-main .mobile .mobileQ{height:20%;width:100%}.tutorial-main .mobile .mobileQ .touch1{height:80%;width:25%}.tutorial-main .mobile .mobileQ .touch1 h5{font-size:8px}.tutorial-main .mobile .mobileQ .mobileBall1{height:50%;width:14%}.tutorial-main .mobile .mobileW{height:20%;width:100%}.tutorial-main .mobile .mobileW .touch2{height:80%;width:25%}.tutorial-main .mobile .mobileW .touch2 h5{font-size:8px}.tutorial-main .mobile .mobileW .mobileBall2{height:50%;width:14%}.tutorial-main .mobile .mobileE{height:20%;width:100%}.tutorial-main .mobile .mobileE .touch3{height:80%;width:25%}.tutorial-main .mobile .mobileE .touch3 h5{font-size:8px}.tutorial-main .mobile .mobileE .mobileBall3{height:50%;width:14%}.tutorial-main .mobile .mobileR{height:20%;width:100%}.tutorial-main .mobile .mobileR .touch4{height:80%;width:25%}.tutorial-main .mobile .mobileR .touch4 h5{font-size:8px}.tutorial-main .mobile .mobileR .mobileBall4{height:70%;font-size:12px}.tutorial-main .instructions-container p{padding:8px;font-size:12px}.tutorial-main .instructions-container .close{font-size:12px}.spellGuide-main{margin-top:70px;height:400px;width:400px}.spellGuide-main .spellGuide-container .left,.spellGuide-main .spellGuide-container .right,.spellGuide-main .close{font-size:12px}}@media (max-height: 375px),(max-width: 667px){.menu-main{margin-top:70px;height:300px;width:300px}.menu-main .gameTitle h1{padding-bottom:0;margin-bottom:10px;font-size:18px}.menu-main .gameOptions h3{width:90px;margin:3px;color:#fff;transition:.3s;font-size:10px}.aboutMain{margin-bottom:106px;height:300px;width:300px;display:flex;justify-content:center;flex-direction:column;text-align:center;align-items:center;position:absolute;background-color:#1d1d1d;border-radius:19px;color:#fff}.aboutMain .aboutContents{text-align:start;font-size:10.2px}.aboutMain .aboutContents span{color:#ff3131}.aboutMain .aboutContents a{color:#00c3ff;text-decoration:none}.aboutMain .close p{color:#fff;font-size:10.2px;text-shadow:0 0 10px #FF3131}.aboutMain .close p:hover{color:#ff3131;transform:scale(1.1)}.tutorial-main{margin-bottom:109px;height:300px;width:300px;display:flex;justify-content:start;flex-direction:column;text-align:center;align-items:center;position:absolute;background-color:#1a1a1a;border-radius:19px;color:#fff}.tutorial-main #control{font-size:11px;margin-bottom:0}.tutorial-main .inputsCategory{height:10%;width:100%;display:flex;justify-content:space-evenly;flex-direction:row}.tutorial-main .inputsCategory .kb,.tutorial-main .inputsCategory .mb{width:50%;height:100%;display:flex;justify-content:center;align-items:center;font-size:10px}.tutorial-main .inputs-container .arrow{font-size:13px}.tutorial-main .inputs-container h3{font-size:10px}.tutorial-main .inputs-container .keyboard .keyQ .ball1,.tutorial-main .inputs-container .keyboard .keyW .ball2,.tutorial-main .inputs-container .keyboard .keyE .ball3{height:50%}.tutorial-main .inputs-container .keyboard .keyR{font-size:10px}.tutorial-main .inputs-container .mobile .mobileQ{height:20%;width:100%}.tutorial-main .inputs-container .mobile .mobileQ .touch1{height:80%;width:25%}.tutorial-main .inputs-container .mobile .mobileQ .touch1 h5{font-size:7px}.tutorial-main .inputs-container .mobile .mobileQ .mobileBall1{height:50%;width:14%}.tutorial-main .inputs-container .mobile .mobileW{height:20%;width:100%}.tutorial-main .inputs-container .mobile .mobileW .touch2{height:80%;width:25%}.tutorial-main .inputs-container .mobile .mobileW .touch2 h5{font-size:7px}.tutorial-main .inputs-container .mobile .mobileW .mobileBall2{height:50%;width:14%}.tutorial-main .inputs-container .mobile .mobileE{height:20%;width:100%}.tutorial-main .inputs-container .mobile .mobileE .touch3{height:80%;width:25%}.tutorial-main .inputs-container .mobile .mobileE .touch3 h5{font-size:7px}.tutorial-main .inputs-container .mobile .mobileE .mobileBall3{height:50%;width:14%}.tutorial-main .inputs-container .mobile .mobileR{height:20%;width:100%}.tutorial-main .inputs-container .mobile .mobileR .touch4{height:80%;width:25%}.tutorial-main .inputs-container .mobile .mobileR .touch4 h5{font-size:7px}.tutorial-main .inputs-container .mobile .mobileR .mobileBall4{height:70%;font-size:10px}.tutorial-main .instructions-container p{padding:5px;font-size:9px}.tutorial-main .instructions-container .close{font-size:8px}.spellGuide-main{margin-top:-38px;height:300px;width:300px}.spellGuide-main .spellGuide-container .left,.spellGuide-main .spellGuide-container .right{font-size:10px}.spellGuide-main .close{position:relative;top:-10px;font-size:10px}}