/* =========================
   GLOBAL PAGE STYLES
   ========================= */

/* Remove default browser spacing and set base look */
body {
  margin: 0;
  min-height: 100vh;

  /* Center the grid on the page */
  display: flex;
  justify-content: center;
  align-items: center;

  /* Page background */
  background-color: #f2f2f2;

  font-family: system-ui, sans-serif;
}


/* =========================
   GRID CONTAINER
   ========================= */

/* This creates the 2 x 6 grid */
.grid {
  display: grid;

  /* 2 columns, equal width */
  grid-template-columns: repeat(2, 1fr);

  /* 6 rows */
  grid-template-rows: repeat(6, 1fr);

  /* Space between boxes */
  gap: 16px;

  /* Control overall grid size */
  width: 60vw;
  max-width: 600px;
}


/* =========================
   GRID BOXES
   ========================= */

.box {
  /* Box appearance */
  background-color: #ffffff;
  border-radius: 12px;
  padding: 20px;

  /* Center text inside box */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;

  cursor: pointer;

  /* 
    TRANSITIONS
    These define WHAT will animate and HOW FAST
    They do nothing on their own until a property changes
  */
  transition:
    transform 0.25s ease,
    background-color 0.25s ease,
    box-shadow 0.25s ease;
}


/* =========================
   HOVER ANIMATION
   ========================= */

.box:hover {
  /* Highlight colour */
  background-color: #e6f0ff;

  /* Grow slightly from the center */
  transform: scale(1.05);

  /* Add depth */
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}