html,body{height:100%;margin:0;padding:0}.app-container{display:flex;justify-content:center;align-items:center;height:100vh;background:radial-gradient(#ecf4ff,#5b5c5e)}.grid-container{display:grid;position:absolute;top:0;left:0;width:1200px;height:1200px;grid-template-columns:repeat(8,1fr);grid-template-rows:repeat(8,1fr)}.grid-container>div{display:flex;justify-content:center;align-items:center;width:100%;height:100%}.chess-board-container{position:relative;width:1200px;height:1200px}.chess-board-container button{border:none}.white{background-color:#bba38d}.black{background-color:#57412d}.valid-move{z-index:10;background-color:#ff3d3d6b}.invalid-move{background-color:transparent}.chess-image{position:relative;z-index:2;height:140px;width:auto}@media(max-width:1920px){.chess-board-container,.grid-container{width:800px;height:800px}.chess-image{height:80px;width:auto}}.pop-up{display:flex;position:absolute;z-index:10;top:50vh;left:50vw;transform:translate(-50%,-50%);height:auto;width:auto;border:4px solid rgb(59,1,1);border-radius:30px;background-color:#944040;padding:40px;text-align:center;align-items:center;font:1em sans-serif;font-size:22px;font-weight:700;white-space:pre-wrap;color:#fff}.game-over{display:flex;align-content:center;flex-direction:column;position:absolute;z-index:3;height:100vh;width:100vw;top:0;left:0;background-color:#181818d9;justify-content:center;align-items:center;font:1em sans-serif;font-size:60px;font-weight:700;white-space:pre-wrap;line-height:20px;color:#fff}.game-over div{display:flex;flex-direction:column;height:40rem;width:auto;padding:80px;font-size:2.5rem;align-items:center;justify-content:center;text-align:center;background-color:#1f1f1f;border-radius:2rem;box-shadow:0 0 1rem #000;animation:slidingDown 1s ease-in forwards}@keyframes slidingDown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.play-again-btn{margin-top:50px;height:100px;width:200px;align-content:center;text-align:center;font:1em sans-serif;color:#fff;font-size:25px;background-color:#979797;border-radius:30px}.play-again-btn:hover{background-color:#b6b6b6}.loading{display:flex;align-content:center;flex-direction:column;position:absolute;z-index:3;height:100vh;width:100vw;top:0;left:0;background-color:#181818d9;justify-content:center;align-items:center;font:1em sans-serif;font-size:60px;font-weight:700;white-space:pre-wrap;line-height:20px;color:#fff}.start-screen{display:flex;align-content:center;flex-direction:column;position:absolute;z-index:100;height:100vh;width:100vw;top:0;left:0;background-color:#181818d9;justify-content:center;align-items:center;font:1em sans-serif;font-size:60px;font-weight:700;white-space:pre-wrap;line-height:20px;color:#fff}.start-button{margin-top:20px;padding:8px;border-radius:10px;border:none;background-color:#4184fe;color:#fff;font-size:16px;font-weight:700;width:175px}.start-button:hover{background-color:#5b94ff}.select-difficulty{display:flex;flex-direction:column;font-size:20px;align-items:center}.difficulty-btn{border:3px solid transparent;margin-bottom:8px;padding:8px;border-radius:10px;background-color:#4f4f4f;color:#fff;width:150px}.difficulty-btn:hover{background-color:#737373}.difficulty-btn.selected{border:3px solid rgb(86,159,255)}.move-made{z-index:1;pointer-events:none;background-color:#0360b76b}.no-move-made{background-color:transparent}