* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Arial', sans-seri f;
  --cell-size: 20vmin;
  --grid-size: 4;
  --cell-gap: 2vmin;
 

}

body {
  background: #1e1b4b;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  font-size: 7.5vmin;
  color: #333;
}

.game-board{
  touch-action: none;
  overscroll-behavior: none;
  display: grid;
  grid-template-columns: repeat(var(--grid-size), var(--cell-size));
  grid-template-rows: repeat(var(--grid-size), var(--cell-size));
  background-color: rgba(255, 255, 255, 0.373);
  gap: var(--cell-gap);
  border-radius: var(--border-radius);
  padding: var(--cell-gap);
  position: relative; 
  box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(200px);
}

.cell{
  background-color: #ede9fe; 
  border-radius: var(--border-radius);
}

.tile{
  --x: 1;
  --y: 2;
  top: calc(var(--cell-gap) + (var(--cell-size) + var(--cell-gap)) * var(--y));
  left: calc(var(--cell-gap) + (var(--cell-size) + var(--cell-gap)) * var(--x));
  position: absolute;
  font-size: 7.5vmin;
  font-weight: 900;
  width: var(--cell-size);
  height: var(--cell-size); 
  border-radius: var(--border-radius);
  background: #00000063;
  transition: all 200ms ease-in-out;
  display: flex;
  justify-content: center; 
  align-items: center; 
  animation: show 200ms ease-in-out;
}

@keyframes show {
  0% {
    opacity: .5;
    transform: scale(0);
  }
}

@keyframes merge {
  0% {
    scale: 1;
  }
  50% {
    scale: 1.2;
  }
  100%{
    scale: 1;
  }
}