@import"https://fonts.googleapis.com/css2?family=Amatic+SC&family=Architects+Daughter&family=Roboto+Mono:wght@300;400;500;700&display=swap";body{margin:20px;background-color:#27252a}h1{font-size:22px;margin-bottom:25px}h1,h2{margin-top:0}h2{font-size:20px}h3{font-size:18px}h3,h4{margin-top:0}h4{font-size:16px}h5{font-size:14px}h5,h6{margin-top:0}h6{font-size:12px}code{font-size:1.2em}ul{padding-left:20px}*{box-sizing:border-box}body{font-family:sans-serif;margin:0;padding:0}button{background:hsla(51,80%,80%,.92);border-width:4px;border-color:#998172;color:#053d85;font-size:50px;font-weight:700;text-align:center;font-family:Architects Daughter,cursive;box-shadow:10px 5px 5px rgba(0,0,0,.2)}button:hover{-webkit-transform:rotate(4deg);transform:rotate(4deg)}.home-btns{width:100%}.home-btn{min-width:300px;margin-left:auto;margin-right:auto;margin-bottom:10px}.square{background:hsla(51,80%,80%,.92);border-width:4px;border-color:#998172;color:#053d85;float:left;font-size:64px;font-weight:700;width:9vw;height:9vw;min-width:100px;min-height:100px;margin:-1px -1px -5px -5px;padding:0;text-align:center;font-family:Architects Daughter,cursive;box-shadow:10px 5px 5px rgba(0,0,0,.2)}.square:hover,button:hover{background:hsla(52,73%,90%,.92)}.square:hover{width:9.5vw;height:9.5vw}.winning-square{background-color:#c9e389;text-decoration:line-through}.column{flex-direction:column}.column,.row{width:100%;display:flex;justify-content:center;align-items:center}.row{flex-direction:row}.row:after{clear:both;content:"";display:table}.status{margin-bottom:10px}#root{height:100%}.bg{position:fixed;display:float;left:0;right:0;margin-left:auto;margin-right:auto;margin-bottom:0;height:100vh;z-index:-1}.bg,.game{width:90%;min-width:500px;background-color:#eceaca;padding:20px}.game{margin:auto auto 0;height:auto}.game-board{min-width:200px;margin-bottom:50px;width:100%}.game-info{margin-top:25px}.status-text,h2{margin-bottom:20px;text-align:center}.moves-list{margin-top:50px;margin-left:auto;margin-right:auto;padding:0;list-style-type:none;text-align:center;width:24vw;min-width:216px}.moves-list li button{font-size:40px;width:100%}h1{text-align:center;font-size:90px;font-family:Amatic SC,cursive}h2{font-family:Architects Daughter,cursive;font-size:64px}footer{display:flex;flex-direction:row;background-color:#2a7aac;width:100%;position:fixed;bottom:0;justify-content:center;align-items:center;box-shadow:2px -6px 5px 2px rgba(0,0,0,.2)}footer a,footer>span{margin:10px 10px 15px;color:#fff;font-weight:700;font-family:Roboto Mono,monospace}.header-nav ul{display:flex;flex-direction:row;justify-content:center;align-items:center}.header-nav li{margin:5px 30px 30px;font-size:30px;list-style-type:none}.header-nav li,.join-code{font-family:Architects Daughter,cursive}.join-code{background:hsla(60,6%,97%,.92);border-width:4px;border-color:#998172;color:#053d85;font-size:50px;font-weight:700;text-align:center;box-shadow:10px 5px 5px rgba(0,0,0,.2);width:300px;margin-left:auto;margin-right:auto;margin-bottom:10px}.hidden{display:none!important}.column:first-child,.row:nth-child(2) .square:first-child{-webkit-transform:rotate(3deg);transform:rotate(3deg);border-top-left-radius:24px 29px;border-top-right-radius:11px 9px;border-bottom-right-radius:21 px 23px;border-bottom-left-radius:16px 31px}.row:nth-child(2) .square:nth-child(2){-webkit-transform:rotate(1deg);transform:rotate(1deg);border-top-left-radius:21px 30px;border-top-right-radius:32pxrandom(32)px;border-bottom-right-radius:19px 7px;border-bottom-left-radius:12px 4px}.row:nth-child(2) .square:nth-child(3){-webkit-transform:rotate(1deg);transform:rotate(1deg);border-top-left-radius:2 x 6px;border-top-right-radius:16px 23px;border-bottom-right-radius:14px 14px;border-bottom-left-radius:7px 4px}.row:nth-child(3) .square:first-child{-webkit-transform:rotate(2deg);transform:rotate(2deg);border-top-left-radius:25px 30px;border-top-right-radius:21px 12px;border-bottom-right-radius:17px 32px;border-bottom-left-radius:27px 14px}.row:nth-child(3) .square:nth-child(2){-webkit-transform:rotate(3deg);transform:rotate(3deg);border-top-left-radius:15px 6px;border-top-right-radius:1px 13px;border-bottom-right-radius:18px 17px;border-bottom-left-radius:12px 4px}.row:nth-child(3) .square:nth-child(3){-webkit-transform:rotate(1deg);transform:rotate(1deg);border-top-left-radius:6px 12px;border-top-right-radius:6px 18px;border-bottom-right-radius:7px 14px;border-bottom-left-radius:6px 7px}.row:nth-child(4) .square:first-child{-webkit-transform:rotate(-2deg);transform:rotate(-2deg);border-top-left-radius:4px 32px;border-top-right-radius:295 px 21px;border-bottom-right-radius:21px 25px;border-bottom-left-radius:30px 25px}.row:nth-child(4) .square:nth-child(2){-webkit-transform:rotate(3deg);transform:rotate(3deg);border-top-left-radius:9px 14px;border-top-right-radius:20px 29px;border-bottom-right-radius:28px 28px;border-bottom-left-radius:12px 22px}.row:nth-child(4) .square:nth-child(3){-webkit-transform:rotate(-3deg);transform:rotate(-3deg);border-top-left-radius:10px 31px;border-top-right-radius:30px 12px;border-bottom-right-radius:1px 31px;border-bottom-left-radius:8px 13px}.row:nth-child(2) .square:first-child:hover,.row:nth-child(2) .square:nth-child(2):hover{-webkit-transform:rotate(6deg);transform:rotate(6deg)}.row:nth-child(2) .square:nth-child(3):hover{-webkit-transform:rotate(4deg);transform:rotate(4deg)}.row:nth-child(3) .square:first-child:hover,.row:nth-child(3) .square:nth-child(2):hover{-webkit-transform:rotate(5deg);transform:rotate(5deg)}.row:nth-child(3) .square:nth-child(3):hover{-webkit-transform:rotate(3deg);transform:rotate(3deg)}.row:nth-child(4) .square:first-child:hover,.row:nth-child(4) .square:nth-child(2):hover{-webkit-transform:rotate(6deg);transform:rotate(6deg)}.row:nth-child(4) .square:nth-child(3):hover{-webkit-transform:rotate(4deg);transform:rotate(4deg)}.info-page{background-color:#fff;font-family:Roboto Mono,monospace;display:flex;min-width:350px;flex-direction:column;padding:20px 20px 80px;box-shadow:5px 5px 5px rgba(0,0,0,.2);max-width:800px;margin:auto}.info-wrapper{display:grid;padding-left:15px;grid-template-columns:150px 250px;grid-gap:10px;grid-row-gap:30px;row-gap:30px;overflow-wrap:break-word}.info-page h2{padding:20px;background-color:#474e60;box-shadow:5px 5px 5px rgba(0,0,0,.2);color:#fff;font-family:Roboto Mono,monospace;text-align:left;font-size:45px;font-weight:700}.info-page ul{float:left}.description{padding-left:15px}@counter-style counter{system:cyclic;symbols:"😸" "👽" "🤖" "👾";suffix:""}.info-page ul{margin:15px;list-style-type:counter}