/* Container for flexboxes */
  .container {
    display: flex;
    flex-wrap: wrap;
  }
  
  /* Create three equal columns */
  .table1 {
    flex: 25%;
    padding: 20px;
  }
  
  /* On screens that are 992px wide or less, go from four columns to two columns */
  @media screen and (max-width:1200px) {
    table {
      flex: 50%;
      background-color:#222;
    }
  
  
  /* On screens that are 600px wide or less, make the columns stack on top of each other instead of next to each other */
  @media screen and (max-width: 600px) {
    #container{
      flex-direction: column;
    }
  

body {
    font-family: verdana;
    background-color:sandybrown;
    color:#234;
    min-height:100vh;

  

}



header {
    background-color:#222;

}

h1 {
    text-align:center; color:yellowgreen;
    font-size:2em;
    padding:16px;
    text-transform:lowercase;
    letter-spacing:.5em;
    text-shadow:0px 0px 6px yellowgreen, 2px 2px 4px orange ;
}

article{
    background-color:tan;
    box-shadow:2px 2px 4px 10px #222;
    min-height:260px;
    margin:16px 0px;
    padding-bottom:50px;

}

h1{
    margin: 16px 0px;
    font-size:1.5em
}

 table.basictable {
    border:4px solid #222; margin: 50px;
    min-width:500px;
    border-collapse: collapse;
}

.basictable td{
    border: 2px solid #222;
    min-width:100px; height:100px;

}