*{margin:0;padding:0;box-sizing:border-box;font-family:Cambria,Georgia,serif}html,body{height:100%}body{animation:bgGradAnim 60s linear infinite}@keyframes bgGradAnim{0%{background-color:purple}15%{background-color:#00f}20%{background-color:#add8e6}30%{background-color:green}40%{background-color:#90ee90}50%{background-color:#ff0}70%{background-color:orange}80%{background-color:#ff4500}90%{background-color:#ff4a4a}to{background-color:purple}}a{text-decoration:none;color:inherit}.navbar{width:100%;display:flex;justify-content:center;text-align:center;margin-left:-50px}.navbar ul{margin-top:14%;margin-left:30%;display:flex}.navbar ul li:hover{opacity:.7;cursor:pointer}.navbar ul li{color:#000;border-radius:10px;border:solid white;min-height:40px;min-width:100px;max-width:200px;text-align:center;list-style:none;margin-left:10px;margin-top:10px;padding-top:5px}.navbar img{width:200px;margin-left:20%;margin-top:2%}.liHome,.liGame,.liSettings,.liAbout{background-image:linear-gradient(to bottom,#ff0,orange)}.landingHeader{margin-top:50px;color:#fff;font-size:48px;text-shadow:2px 2px black}.startBtn{background-image:linear-gradient(to bottom,green,#90ee90);color:#fff;font-size:24px;width:160px;height:60px;margin:20px;font-weight:900;outline:0;border-radius:10px}.startBtn2{background-image:linear-gradient(to bottom,green,#90ee90);color:#fff;font-size:24px;width:160px;height:60px;margin:100px 60px 60px;font-weight:900;outline:0;border-radius:10px}.backToStartBtn{background-image:linear-gradient(to bottom,#ff0,orange);color:#fff;font-size:24px;width:160px;height:60px;margin:100px 60px 60px;font-weight:900;outline:0;border-radius:10px}.backToStartBtnFinish{background-image:linear-gradient(to bottom,#ff0,orange);color:#fff;font-size:24px;width:320px;height:120px;margin:100px 60px 60px;font-weight:900;outline:0;border-radius:10px}.startBtn:hover{opacity:.7;cursor:pointer}.startBtn_x2x3x4{background-image:linear-gradient(to bottom,green,#90ee90);color:#fff;font-size:24px;width:160px;height:60px;margin:20px;font-weight:900;outline:0;border-radius:10px}.startBtn_x2x3x4:hover{opacity:.7;cursor:pointer}.MJEdescription{color:#000;margin-top:30px;margin-bottom:30px;max-width:70%;font-family:Calibri,sans-serif}.stylePara{margin-right:auto;margin-left:auto;text-align:center;justify-content:center;display:flex}.container{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}.settingsHeading{margin-top:-50px;margin-bottom:50px;color:#fff;font-size:48px;text-shadow:2px 2px black;display:block}.formsSideBySide{display:inline-block;margin:40px}.stylingForm1{display:flex;flex-direction:column;text-align:left}.gameContainer{margin-top:100px;margin-bottom:100px;height:400px;width:700px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(6,1fr);gap:1em;animation:slowFocus 5s linear}.gameContainer_12{margin-top:100px;margin-bottom:100px;height:200px;width:700px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(3,1fr);gap:1em;animation:slowFocus 5s linear}.gameContainer_36{margin-top:100px;margin-bottom:100px;height:400px;width:1050px;display:grid;grid-template-columns:repeat(6,1fr);grid-template-rows:repeat(6,1fr);gap:1em;animation:slowFocus 5s linear}.settingsContainer{animation:slowFocus 1s linear}@keyframes slowFocus{0%{opacity:0}50%{opacity:.5}to{opacity:1}}.card{background-color:#fff;border-radius:5px;display:flex;justify-content:center;align-items:center;max-height:40px}.card span{opacity:0}.card.active>span{opacity:100}.card.active{background-color:orange}.card.wrong{background-color:red}.card.correct{background-color:#adff2f}.card.vanish{opacity:0}.stylingAbout{display:inline-block;max-width:400px;float:left}.landingHeader2{margin-top:50px;color:#fff;font-size:48px;text-shadow:2px 2px black;padding-right:140px;margin-bottom:50px}.stylingQuickAccess{display:inline-block;max-width:300px;clear:both}.quickBtn{margin-top:50px}.MJEdescription2{color:#000;margin-top:30px;margin-bottom:30px;padding:10%;margin-right:100px;text-align:center;justify-content:center;align-items:center;font-family:Calibri,sans-serif;border:solid black 2px;background-color:#fff}.funContainer{border:solid black 2px;background-color:#fff;max-width:800px;margin-top:50px;margin-left:50px;padding:5%}.styleMoves{text-align:center;display:block;font-size:28px;margin-top:40px;width:100%}.styleResult,.styleResult2{text-align:center;display:block;margin-top:20px;font-size:28px}.redFont{color:red;font-weight:900;font-size:28px}.image-selector input{position:absolute;opacity:0;width:0;height:0}.image-selector img{cursor:pointer;border:4px solid white;transition:.3s;width:100px;height:60px;margin-right:20px;opacity:50%}.image-selector input:checked+img{border-color:#2196f3;transform:scale(1.05);opacity:100%}.FormContainer{min-width:700px;margin-top:100px}.checkbox-inline{display:inline-block}.validMsg{opacity:1;transition:opacity .8s ease-out;margin-top:30px;color:#fff}.validMsg.fade-out{opacity:0}.mode-selector{display:flex;gap:40px;margin-top:40px;justify-content:center}.mode-btn{min-width:140px;min-height:100px;padding:20px;border:5px solid white;border-radius:10px;cursor:pointer;background-image:linear-gradient(to bottom,#ff0,orange);transition:background .2s,transform .1s;-webkit-user-select:none;user-select:none;opacity:50%;color:#fff}.mode-btn.active{opacity:100%;border:5px solid #2196F3}.mode-btn input{display:none}.mode-btn:active{transform:scale(.97)}@media(max-width:768px){.navbar{width:100%;display:block;justify-content:center;text-align:center;margin-left:-50px}.navbar ul{margin-top:14%;margin-left:30%;display:block}.gameContainer{margin-top:100px;margin-bottom:100px;height:400px;width:100vw;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(8,1fr);gap:.5em;animation:slowFocus 5s linear}.gameContainer_12{margin-top:100px;margin-bottom:100px;height:200px;width:100vw;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(4,1fr);gap:1em;animation:slowFocus 5s linear}.gameContainer_36{margin-top:100px;margin-bottom:120px;height:600px;width:100vw;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(12,1fr);gap:1em;animation:slowFocus 5s linear}.card{background-color:#fff;border-radius:5px;display:flex;justify-content:center;align-items:center;max-height:40px;max-width:27vw;font-size:12px;min-width:27vw}.container{display:flex;align-items:center;justify-content:center;margin-bottom:200px;max-width:100%}.stylingAbout,.stylingQuickAccess{display:block}.image-selector img{cursor:pointer;border:4px solid white;transition:.3s;width:55px;height:40px;margin-right:10px;opacity:50%}.mode-selector{display:flex;gap:10px;margin-top:40px;justify-content:center}.mode-btn{min-width:100px;min-height:60px;padding:20px;border:5px solid white;border-radius:10px;cursor:pointer;background-image:linear-gradient(to bottom,#ff0,orange);transition:background .2s,transform .1s;-webkit-user-select:none;user-select:none;opacity:50%;color:#fff}.mode-btn:active{opacity:100%}.validMsg{margin-left:auto;margin-right:auto;max-width:100vw;text-align:center;padding:20px}.startBtn_x2x3x4{background-image:linear-gradient(to bottom,green,#90ee90);color:#fff;font-size:20px;width:110px;height:50px;margin:20px 5px;font-weight:900;outline:0;border-radius:10px}.startBtn_x2x3x4:hover{opacity:.7;cursor:pointer}.funContainer{border:solid black 2px;background-color:#fff;max-width:100vw;margin-top:50px;margin-left:5px;margin-right:5px;padding:5%}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.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}