:root{--size: 100px;--tile: #342956;--correct: #6e50b4}@media (max-width: 400px){:root{--size:25vw}}html,body{background:#64bdb0;margin:0;padding:0}.App{display:flex;justify-content:center;height:100vh;align-items:center}.App *{font-family:Pacifico,cursive}.game{position:relative}.board{display:grid;grid-template-columns:repeat(4,var(--size));grid-template-rows:repeat(4,var(--size));border-radius:10px;position:relative;overflow:hidden;border:10px solid #55ab9f}.credits{display:flex;align-content:center;flex-wrap:wrap;justify-content:center;padding-top:10px}.number{position:absolute;width:var(--size);height:var(--size);display:flex;flex-wrap:wrap;align-content:center;justify-content:center;background:var(--tile);font-size:50px;color:#fff;box-sizing:border-box;cursor:pointer;transition:left .4s ease-in-out,top .4s ease-in-out}.number.correct{background:var(--correct)}.number.slot--0{left:0px;top:0}.number.slot--1{left:calc(var(--size));top:0}.number.slot--2{left:calc(2 * var(--size));top:0}.number.slot--3{left:calc(3 * var(--size));top:0}.number.slot--4{left:0;top:calc(var(--size))}.number.slot--5{left:calc(var(--size));top:calc(var(--size))}.number.slot--6{left:calc(2 * var(--size));top:calc(var(--size))}.number.slot--7{left:calc(3 * var(--size));top:calc(var(--size))}.number.slot--8{left:0;top:calc(2 * var(--size))}.number.slot--9{left:calc(var(--size));top:calc(2 * var(--size))}.number.slot--10{left:calc(2 * var(--size));top:calc(2 * var(--size))}.number.slot--11{left:calc(3 * var(--size));top:calc(2 * var(--size))}.number.slot--12{left:0;top:calc(3 * var(--size))}.number.slot--13{left:calc(var(--size));top:calc(3 * var(--size))}.number.slot--14{left:calc(2 * var(--size));top:calc(3 * var(--size))}.number.slot--15{left:calc(3 * var(--size));top:calc(3 * var(--size))}.number.disabled{pointer-events:none;background-color:transparent}.overlay{border:10px solid #55ab9f;pointer-events:none;z-index:20}.button-wrapper{display:flex;justify-content:center;margin-top:30px}button{border:0 transparent;background-color:var(--correct);color:#fff;padding:10px 20px;border-radius:10px;font-size:20px;cursor:pointer}button:hover{background-color:var(--tile)}.winner{position:absolute;background:var(--tile);border-radius:10px;top:0;z-index:100;left:0;bottom:0;right:0;display:flex;justify-content:center;flex-direction:column;align-items:center;color:#fff}