#gameContainer {
    display: flex;
  }


  #turnOffGameButton{
    visibility: hidden;
    margin-left: 10px;
  }
  

  #gameButton{
    margin-top: 10px;
    margin-left: 10px;

  }

  #thankYouNote_wrapper{
    text-align: center;
    visibility: hidden;
  }

  #thankYouNote{
    margin-top: 0;
  }


  #gameContainer{ font-family: Helvetica, sans-serif; }
  #tetris   { margin: 1em auto; padding: 1em; border: 4px solid black; border-radius: 10px; background-color: #F8F8F8; }
  #stats    { display: inline-block; vertical-align: top; }
  #canvas   { display: inline-block; vertical-align: top; box-shadow: 10px 10px 10px #999; border: 2px solid #333; }
  #menu     { display: inline-block; vertical-align: top; position: relative; }
  #menu p   { margin: 0.5em 0; text-align: center; }
  #menu p a { text-decoration: none; color: black; }
  #upcoming { display: block; margin: 0 auto; background-color: #E0E0E0; }
  #score    { color: red; font-weight: bold; vertical-align: middle; }
  #rows     { color: blue; font-weight: bold; vertical-align: middle; }
  #stats    { position: absolute; bottom: 0em; right: 1em; }

  @media screen and (min-width: 0px) and (min-height: 0px)  { 
    #tetris { font-size: 0.3em; width: 100px; } 
    #menu { width: 40px; height: 80px; } 
    #upcoming { width: 20px; height: 20px; } 
    #canvas { width: 40px; height: 80px; } 
  } /* 10px chunks */
  
  @media screen and (min-width: 400px) and (min-height: 400px)  { 
    #tetris { font-size: 0.4em; width: 140px; } 
    #menu { width: 60px; height: 120px; } 
    #upcoming { width: 30px; height: 30px; } 
    #canvas { width: 60px; height: 120px; } 
  } /* 15px chunks */
  
  @media screen and (min-width: 500px) and (min-height: 500px)  { 
    #tetris { font-size: 0.5em; width: 180px; } 
    #menu { width: 80px; height: 160px; } 
    #upcoming { width: 40px; height: 40px; } 
    #canvas { width: 80px; height: 160px; } 
  } /* 20px chunks */
  
  @media screen and (min-width: 600px) and (min-height: 600px)  { 
    #tetris { font-size: 0.6em; width: 220px; } 
    #menu { width: 100px; height: 200px; } 
    #upcoming { width: 50px; height: 50px; } 
    #canvas { width: 100px; height: 200px; } 
  } /* 25px chunks */
  
  @media screen and (min-width: 700px) and (min-height: 700px)  { 
    #tetris { font-size: 0.7em; width: 260px; } 
    #menu { width: 120px; height: 240px; } 
    #upcoming { width: 60px; height: 60px; } 
    #canvas { width: 120px; height: 240px; } 
  } /* 30px chunks */
  
  @media screen and (min-width: 800px) and (min-height: 800px)  { 
    #tetris { font-size: 0.8em; width: 300px; } 
    #menu { width: 140px; height: 280px; } 
    #upcoming { width: 70px; height: 70px; } 
    #canvas { width: 140px; height: 280px; } 
  } /* 35px chunks */
  
  @media screen and (min-width: 900px) and (min-height: 900px)  { 
    #tetris { font-size: 0.9em; width: 340px; } 
    #menu { width: 160px; height: 320px; } 
    #upcoming { width: 80px; height: 80px; } 
    #canvas { width: 160px; height: 320px; } 
  } /* 40px chunks */