body{box-sizing:border-box;scroll-behavior:smooth}*,*:before,*:after{box-sizing:inherit}html,body{margin:0;padding:0;width:100%;height:100%;font-family:Nunito,sans-serif;font-weight:600}#root{margin:0;padding:0;min-height:100vh}#App{padding:50px 0 10px}.Dark{background:linear-gradient(to left top,#010d1f,#0b268a);color:#c1c1c9}.Light{background:linear-gradient(to left top,#0b268a,#49c5de)}@media screen and (max-width:1150px){#TopSpacing,#BottomSpacing{margin-bottom:55px}}@media screen and (max-width:900px){#BottomSpacing{margin-bottom:160px}}@media screen and (max-width:700px){#TopSpacing{margin-bottom:70px}#BottomSpacing{margin-bottom:350px}}.tileDark{background-color:#769656}.tileLight{background-color:#eeeed2}.tileDark,.tileLight,.clicked{height:100%;width:12.5%;display:flex;align-items:center;justify-content:center;border:none}.GoodPiece,.EvilPiece{width:70%;aspect-ratio:1 / 1;border-radius:50%;box-shadow:inset 0 0 10px #0000004d;display:flex;align-items:center;justify-content:center}.GoodPiece{background-color:#d32f2f;border:3px solid #de2323}.EvilPiece{background-color:#000;border:3px solid #3d3f42}.legalMove{width:30%;aspect-ratio:1 / 1;border-radius:50%;background-color:#000;opacity:50%}.clicked{background-color:purple}.star{background-color:gold;width:70%;height:70%;clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);box-shadow:inset 0 0 10px #ffffff80}@media screen and (max-width:1150px){.GoodPiece,.EvilPiece{width:75%}}@media screen and (max-width:900px){.GoodPiece,.EvilPiece{width:80%}.GoodPiece{border:2px solid #de2323}.EvilPiece{border:2px solid #3d3f42}.legalMove{width:40%}}@media screen and (max-width:700px){.GoodPiece,.EvilPiece{width:90%}.legalMove{width:50%}}.boardRow{display:flex;width:100%;height:12.5%}.board{margin:auto;height:500px;width:500px}@media screen and (max-width:1150px){.board{height:400px;width:400px}}@media screen and (max-width:900px){.board{height:300px;width:300px}}@media screen and (max-width:700px){.board{height:250px;width:250px}}#topRow{height:60px;width:100%;margin-top:-40px;margin-bottom:10px;display:flex;justify-content:center}.ScoreBoard{height:60px;width:150px;border:1px solid white;background-color:green;border-radius:10px;display:flex;align-items:center;justify-content:center;margin:auto}#hamburger{justify-self:flex-end;height:50px;width:50px;display:flex;flex-direction:column;justify-content:space-between;background:transparent;border:none;cursor:pointer;padding:5px}#hamburger span{display:block;width:100%;height:5px;background-color:#333;border-radius:2px}@media screen and (max-width:900px){.ScoreBoard{height:50px;width:120px;margin-top:-10px}#hamburger{height:40px;width:40px;margin-top:-10px}}@media screen and (max-width:700px){.ScoreBoard{height:50px;width:100px;margin-top:-10px;font-size:.8rem}#hamburger{height:40px;width:40px;margin-top:-10px}}.PlayerInfo{width:500px;height:50px;margin:auto;display:flex}@media screen and (max-width:1150px){.PlayerInfo{width:400px}}@media screen and (max-width:900px){.PlayerInfo{width:300px;font-size:.8rem}}@media screen and (max-width:700px){.PlayerInfo{width:250px;font-size:.7rem}}.GoodTimer,.EvilTimer{height:100%;width:100px;display:flex;align-items:center;border:1px solid white;border-radius:10px;margin-left:auto}.GoodTimer{background-color:green}.EvilTimer{background-color:red}.GoodTimerImage,.EvilTimerImage{height:40px;width:40px}#timerSeconds{padding-left:10px}@media screen and (max-width:900px){.GoodTimer,.EvilTimer{height:90%;width:80px}.GoodTimerImage,.EvilTimerImage{height:30px;width:30px}}@media screen and (max-width:700px){.GoodTimer,.EvilTimer{height:80%;width:70px}.GoodTimerImage,.EvilTimerImage{height:25px;width:25px}}#SideBar{position:fixed;top:0;right:-300px;height:100vh;width:300px;transition:right .3s ease-in-out;z-index:5;display:flex;flex-direction:column;padding-bottom:20px}#SideBar.Light{background:linear-gradient(to left top,#590603,#f78025)}#SideBar.Dark{background:linear-gradient(to left top,#1f0504,#590603)}#SideBar.openSeasame{right:0}#closeButton{height:60px;width:60px;position:relative;font-size:2rem;color:#fff;background-color:transparent;border:none;font-family:Nunito,sans-serif;font-weight:600}.sideButton{width:200px;height:50px;background-color:#00f;color:#fff;border:1px solid white;border-radius:10px;margin:10px auto;font-family:Nunito,sans-serif;font-weight:600}.sideButton:hover{background-color:#fff;color:#00f;border:2px solid blue}#SettingsSideBar{margin:-20px auto 10px}#AIOpponent{margin:10px auto}#GameSettings{margin:40px auto 10px}@media screen and (max-width:1150px){#SideBar{width:250px;right:-250px;font-size:.8rem}}@media screen and (max-width:500px){#AIOpponent{margin-top:0}}.container{text-align:center;font-size:1.4rem;margin-bottom:10px}.toggle-switch{position:relative;width:75px;display:inline-block;text-align:left;top:8px;margin-left:50px}.checkbox{display:none}.label{display:block;overflow:hidden;cursor:pointer;border:0 solid #bbb;border-radius:20px;height:30px}.inner{display:block;width:200%;margin-left:-100%;transition:margin .3s ease-in 0s}.inner:before,.inner:after{float:left;width:50%;height:36px;padding:0;line-height:36px;color:#fff;font-weight:700;box-sizing:border-box}.inner:before{content:"";padding-left:10px;background-color:#060;color:#fff}.inner:after{content:"";padding-right:10px;background-color:#bbb;color:#fff;text-align:right;font-size:1.2rem}.switch{display:block;width:24px;margin:5px;background:#fff;position:absolute;top:0;bottom:0;right:40px;border:0 solid #bbb;border-radius:20px;transition:all .3s ease-in 0s}.checkbox:checked+.label .inner{margin-left:0}.checkbox:checked+.label .switch{right:0}@media screen and (max-width:1150px){.container{font-size:1rem}}#Rules{position:fixed;top:0;left:0;width:100vw;height:100vh;background-color:#ffffffe6;display:flex;justify-content:center;align-items:center;z-index:999}#rulesContent{width:80%;max-width:600px;max-height:80vh;padding:30px;border-radius:10px;overflow-y:auto;color:#333}#closeRules{background-color:transparent;border:none;color:#000;font-size:1.6rem;margin-top:-50px;margin-bottom:20px}#closeRules:hover{text-decoration:underline}.RulesHeading{justify-self:center}