/* rem and em not depend on html font-size in media queries!
instead, 1rem = 1 em = 16px */
/***********************/
/*Below 1344px ... 1em = 16 px (smaler desktops )*/
/***********************/
@media (max-width: 80em) {
}
@media (max-width: 75em) {
  html {
    /* 9px / 16px  */
    font-size: 56.25%;
  }
}

/**************************/
/* BELOW 944px (Tablets) */
/**************************/

@media (max-width: 59em) {
  html {
    /* 8px / 16px = 0.5 = 50% */
    font-size: 50%;
  }
}

/**************************/
/* BELOW 704px (Smaller tablets) */
/**************************/

/**************************/
/* BELOW 544px (Phones) */
/**************************/

@media (max-width: 34em) {
  .Board {
    max-width: 90%;
    max-height: 80%;
  }
  .board-content {
    display: flex;
    flex-direction: column;
  }
}
/* 
- Font sizes (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98

- Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/