:root{--color-board-blue:#1c61f2;--color-piece-red:#d9313c;--color-piece-red-light:#d9313c4d;--color-piece-yellow:#fdc601;--color-piece-yellow-light:#fdc6014d;--piece-size:65px;--timing-function-fall:cubic-bezier(.33333,0,.66667,.33333);@media screen and (width<=500px){--piece-size:42px}}body{font-family:sans-serif}*{box-sizing:border-box;margin:0;padding:0}.container{flex-direction:column;align-items:center;padding:10px 0;display:flex}.connect-four-grid{background-color:var(--color-board-blue);z-index:10;border-radius:16px;gap:8px;padding:8px;display:flex;position:relative}.connect-four-grid .game-piece-6{animation:piece-drop-slot-6 .5s var(--timing-function-fall)}.connect-four-grid .game-piece-5{animation:piece-drop-slot-5 .4s var(--timing-function-fall)}.connect-four-grid .game-piece-4{animation:piece-drop-slot-4 .4s var(--timing-function-fall)}.connect-four-grid .game-piece-3{animation:piece-drop-slot-3 .3s var(--timing-function-fall)}.connect-four-grid .game-piece-2{animation:piece-drop-slot-2 .3s var(--timing-function-fall)}.connect-four-grid .game-piece-1{animation:piece-drop-slot-1 .2s var(--timing-function-fall)}.connect-four-grid__slot,.game-piece{width:var(--piece-size);height:var(--piece-size);border-radius:50%}.connect-four-grid__slot{font-size:22px;position:relative}.game-piece{font-size:inherit;z-index:8;position:absolute;top:0;left:0}.drop-area .game-piece__red:hover,.game-piece__red{background-color:var(--color-piece-red)}.drop-area .game-piece__yellow:hover,.game-piece__yellow{background-color:var(--color-piece-yellow)}.drop-area .game-piece__yellow{background-color:var(--color-piece-yellow-light)}.drop-area .game-piece__red{background-color:var(--color-piece-red-light)}.drop-area .game-piece{color:#777}.drop-area .game-piece:not(:disabled):hover{color:#000}.connect-four-grid__slot{background-color:#fff;position:relative}.connect-four-grid__column{flex-direction:column;gap:8px;display:flex}.drop-area{gap:8px;padding:0 8px 8px;display:flex}.drop-area .game-piece{cursor:pointer;border:none;transition:background-color .2s}.drop-area .game-piece:disabled{cursor:initial;background-color:#0000}.game-message{letter-spacing:1px;margin:18px 0;font-size:22px;font-weight:300}.game-message__winner{color:#006400;font-weight:700;animation:1s scale-bounce-large}.reset-button{border:none;border-radius:4px;padding:6px 18px;font-size:14px}.reset-button:hover{cursor:pointer}.reset-button__new-game{background-color:var(--color-board-blue);color:#fff;text-transform:uppercase;padding:12px 25px;font-size:16px}.reset-button__new-game:hover{animation:.7s infinite scale-bounce}.heading-primary{letter-spacing:1px;margin-bottom:10px;font-size:2rem;font-weight:300;@media screen and (width<=500px){font-size:1.6rem}}@keyframes piece-drop-slot-6{0%{transform:translateY(calc(var(--piece-size)*-7.3))}88%{transform:translateY(0)}94%{transform:translateY(-5px)}to{transform:translateY(0)}}@keyframes piece-drop-slot-5{0%{transform:translateY(calc(var(--piece-size)*-6.2))}90%{transform:translateY(0)}95%{transform:translateY(-5px)}to{transform:translateY(0)}}@keyframes piece-drop-slot-4{0%{transform:translateY(calc(var(--piece-size)*-5.1))}90%{transform:translateY(0)}95%{transform:translateY(-4px)}to{transform:translateY(0)}}@keyframes piece-drop-slot-3{0%{transform:translateY(calc(var(--piece-size)*-4))}90%{transform:translateY(0)}95%{transform:translateY(-3px)}to{transform:translateY(0)}}@keyframes piece-drop-slot-2{0%{transform:translateY(calc(var(--piece-size)*-2.9))}to{transform:translateY(0)}}@keyframes piece-drop-slot-1{0%{transform:translateY(calc(var(--piece-size)*-1.7))}to{transform:translateY(0)}}@keyframes scale-bounce-large{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}@keyframes scale-bounce{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}
/*# sourceMappingURL=connect-four-game.b1a2e3be.css.map */