/* CSS for MahJonggNotebook.com
_template/v0 */

/* Colors */
/* Red: #9D2D22; */
/* Blue: #14195A; */
/* Lavendar: #EBE5EF; */
/* Dark Orange: #DD8D38; */


@font-face {
  font-family: 'Mona Sans';
  src:
    url('/_fonts/MonaSansVF-Regular.woff2') format('woff2 supports variations'),
    url('/_fonts/MonaSansVF-Regular.woff2') format('woff2-variations');
  font-weight: 200 900;
  font-stretch: 75% 125%;
}

html {
  font-family: 'Mona Sans';
}

body {
  display: flex;
  align-items: start;
  justify-content: left;
  /* color: #0F292B; */
  color: #14195A;
  background-color: #EBE5EF;
}

/* This centers it */
div.page {
  width: 572px;
  margin: 8rem auto;
}

h1 {
  display: none;
}


header nav {
  display: none;
}

main {

}

footer {
  
}



/* ============================================================ */
/* == Be Responsive / Mobile First == */
/* ============================================================ */


/* ============================================================ */
/* == 320 == */
/* ============================================================ */

@media screen and (min-width: 320px) {

  /* ==Debugging== */
    
  /* body {border: 1px solid red;}
  h2 {color: red;} */
  
  footer {text-align: center;}
}

  /* === end 320 === */							
  
  /* ============================================================ */
  /* == 400 == */
  /* ============================================================ */
  
  @media screen and (min-width: 400px) {
    
  /* ==Debugging== */
  
  /* body {border: 1px solid cyan;}
  h2 {color: cyan;} */
  
  /* === end 400 === */							
  }
  
  /* ============================================================ */
  /* == 600 == */
  /* ============================================================ */
  
  @media screen and (min-width: 600px) {
      
  /* ==Debugging== */
  
  /* body {border: 1px solid blue;}
  h2 {color: blue;} */
  
  /* === end 600 === */							
  }
  
  /* ============================================================ */
  /* == 768 == */
  /* ============================================================ */
  
  @media screen and (min-width: 768px) {
    
  /* ==Debugging== */
  
  /* body {border: 1px solid green;}
  h2 {color: green;}  */

  footer {text-align: left;}
  
  /* === end 768 === */							
  }
  
  /* ============================================================ */
  /* == 992 == */
  /* ============================================================ */
  
  @media screen and (min-width: 992px) {
  
  /* ==Debugging== */
  
  /* body {border: 1px solid purple;}
  h2 {color: purple;}  */
  
  /* === end 992 === */							
  }
  
  /* ============================================================ */
  /* == 1200 == */
  /* ============================================================ */
  
  @media screen and (min-width: 1200px) {
  
  /* ==Debugging== */
  
  /* body {border: 1px solid orange;}
  h2 {color: orange;} */
  
  /* === end 1200 === */							
  }
  
  /* ============================================================ */
  /* == CSS END == */
  /* ============================================================ */
  
  /* === end CSS === */