#root{max-width:460px;margin:0 auto;padding:2rem;text-align:center}body{background-color:#1a2a33}.header{display:flex;justify-content:space-between}.header-left{display:flex;gap:8px;justify-content:center;align-items:center}.header-left img{width:30px;height:30px}.header-middle{display:flex;justify-content:center;align-items:center;gap:13px;padding:2px 30px 3px;border-radius:10px;box-shadow:0 -4px #10212a inset;background-color:#1f3641}.header-middle img{height:20px;width:20px}.header-middle h3{font-family:Outfit;font-size:16px;font-weight:700;line-height:20.16px;letter-spacing:1px;text-align:center;color:#a8bfc9}.header-right{cursor:pointer}.header-right img{padding:16px;background-color:#a8bfc9;box-shadow:0 -4px #6b8997 inset;border-radius:10px}.header-right img:active{box-shadow:4px 4px 4px #244455 inset}.box-container{max-width:460px;margin-top:20px;display:grid;grid-template-columns:auto auto auto;gap:20px 20px;justify-content:center;align-items:center}.box-container div{cursor:pointer;width:140px;height:140px;display:flex;justify-content:center;align-items:center;background:#1f3641;box-shadow:0 -8px #10212a inset;text-align:center;border-radius:15px}.box-container div:active{box-shadow:4px 4px 4px #10212a inset}.modal{border:none;background-color:#1f3641;width:100%}.modal h2{margin-top:45px;font-family:Outfit;font-size:40px;font-weight:700;line-height:17.64px;letter-spacing:.875px;text-align:center;color:#a8bfc9}.modal img{width:64px;height:64px}.modal h1{padding:16px;width:150px;font-family:Outfit;font-size:16px;font-weight:700;line-height:20.16px;letter-spacing:1px;text-align:center;color:#1a2a33;background-color:#f2b137;box-shadow:0 -4px #cc8b13 inset;border-radius:10px}.modal-middle{display:flex;justify-content:center;align-items:baseline;gap:24px;margin-top:16px}.modal-middle h3{font-family:Outfit;font-size:40px;font-weight:700;line-height:50.4px;letter-spacing:2.5px;text-align:left;margin-top:24px}.mavi{color:#f2b137}.turuncu{color:#31c3bd}.footer{margin-top:20px;display:flex;justify-content:space-around}.footer h3{margin:0%;font-family:Outfit;font-size:14px;font-weight:400;line-height:15.12px;letter-spacing:.75px;text-align:center}.footer h2{margin:0;font-family:Outfit;font-size:20px;font-weight:700;line-height:25.2px;letter-spacing:1.25px;text-align:center}.oPlayer{padding:12px 24px;background-color:#f2b137;border-radius:10px}.xPlayer{padding:12px 24px;border-radius:10px;background-color:#31c3bd}.newGame{padding:16px 20px;background-color:#a8bfc9;border-radius:15px;cursor:pointer}.newGame h3{font-family:Outfit;font-size:15px;font-weight:700;line-height:30.24px;letter-spacing:1.5px;text-align:center}@media (width <=460px){.header{min-width:300px;align-items:center}.header-right img{margin-top:12px}.box-container{margin-top:64px}.box-container div{width:96px;height:96px}.modal h2{font-size:14px;margin-top:40px}.modal h3{font-size:23px}.modal img{width:21px;height:21px}.header-middle{margin-top:16px;display:flex;gap:5px}.footer{margin-top:20px;display:flex;gap:7px}}.x{font-family:Rubik;color:#31c3bd;font-size:50px;font-weight:900}.o{color:#f2b137;font-family:Rubik;font-size:50px;font-weight:900}