:root{--player1: #8ba6ff;--player2: #ff5e5e;--draw: #bbfc08}*{margin:0;padding:0}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{width:100%;min-height:100vh;background:#230007;background-image:radial-gradient(circle, #0f1d1d, #081a21, #0f1422, #1c0a1b, #230007);display:flex;justify-content:center;align-items:center;font-family:"Segoe UI",Tahoma,Geneva,Verdana,sans-serif}.lds-ring{display:inline-block;position:relative;width:160px;height:160px}.overlay{width:100vw;height:100vh;position:fixed;z-index:15;left:0;top:0;background-image:radial-gradient(circle, #0f1d1d, #081a21, #0f1422, #1c0a1b, #230007);display:flex;justify-content:center;align-items:center;flex-direction:column}.overlay p{color:#fff;margin-top:32px;font-size:1.7rem}.lds-ring div{box-sizing:border-box;display:block;position:absolute;width:128px;height:128px;margin:8px;border:16px solid #fff;border-radius:50%;animation:lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;border-color:#fff rgba(0,0,0,0) rgba(0,0,0,0) rgba(0,0,0,0)}.lds-ring div:nth-child(1){animation-delay:-0.45s}.lds-ring div:nth-child(2){animation-delay:-0.3s}.lds-ring div:nth-child(3){animation-delay:-0.15s}@keyframes lds-ring{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}main{display:flex;flex-direction:column;gap:25px}main aside,main #grid>.cell{box-shadow:2px 2px 10px 0px rgba(0,0,0,.2)}main aside{background-color:#e7f9fa}main aside header{display:flex;justify-content:space-between;align-items:center;background-color:#d18e00;color:#fff;padding:10px 20px;box-shadow:2px 2px 10px 0px rgba(0,0,0,.2)}main aside header>div{display:flex;justify-content:space-between;align-items:center;flex-direction:row}main aside header .gameStatus{display:flex;margin-right:20px}main aside header #turnColour{width:20px;height:20px;border-radius:50%;background-color:#000;cursor:pointer;margin-left:10px}main aside header .buttons{display:flex;justify-content:space-between;align-items:center;flex-direction:row}main aside header .buttons button{padding:10px;border:none;background-color:#9bcf16;color:#fff;cursor:pointer;transition:all .2s ease-in-out;width:100%;margin-left:2px}main aside header .buttons button:hover{background-color:#f1d340;color:#e99745}main #grid{display:grid;grid-template-columns:repeat(7, 1fr);grid-template-rows:repeat(6, 1fr);grid-gap:10px}main #grid .cell{width:150px;height:150px;background-color:#e7f9fa}main #grid .cell:empty::before{content:"";display:block;width:80%;height:80%;margin:10% auto;border-radius:50%;background-color:#e8ecea;box-shadow:inset 0px -5px 5px 0px rgba(0,0,0,.05)}main #grid .player1:empty::before{background-color:var(--player1)}main #grid .player2:empty::before{background-color:var(--player2)}main #grid .player1:empty::before,main #grid .player2:empty::before{animation:drop .6s;box-shadow:none}@media(hover: hover)and (pointer: fine){main #grid .hover:empty::before{background-color:#8be4e9 !important}}main #grid .winning{animation:flash 1s infinite}@keyframes drop{0%{transform:translateY(-1000%)}100%{transform:translateY(0)}}@keyframes flash{0%{opacity:1}50%{opacity:.6}100%{opacity:1}}@media screen and (max-width: 1660px){main{flex-direction:column;align-items:center}main header{flex-direction:column}main #grid{margin-top:40px;margin-bottom:40px}main #grid .cell{width:100px;height:100px}}@media screen and (max-width: 800px){main{gap:0}main #grid .cell{width:80px;height:80px}}@media screen and (max-width: 600px){main #grid{grid-gap:2px}main #grid .cell{width:60px;height:60px}}@media screen and (max-width: 400px){main #grid{grid-gap:0px}main #grid .cell{width:50px;height:50px}}/*# sourceMappingURL=style.min.css.map */