/* 
Generic Styling, for Desktops/Laptops 
*/
body {
    display: block;font:normal normal 18pt/22pt times new roman; color:#333333;background-color:lavender;
line-height:150%;
  }
@media all and (max-width: 800px) {/*800px for samsung galaxy m30s*/
  body {
    display: block;font-size:16pt/16pt;background-color:lightblue;
line-height:150%;
  }
}



h1{font-size:14pt;color:maroon;line-height:150%;}
/*size for android*/
@media(max-width:800px){h1{font-size:16pt;}}

h2{font-size:18pt;color:maroon;line-height:150%;}
/*size for android*/
@media(max-width:800px){h2{font-size:16pt;}}

h3{font:italic normal 12pt times new roman, serif;color:navy}

h4{font:italic bold 12pt times new roman, serif;color:navy;line-height:150%;}
/*size for android*/
@media(max-width:800px){h4{font-size:11pt;}}

/*TABLE*/
table {
  width: 100%;
  
}
/* Zebra striping */

tr:nth-of-type(odd) {
  background:transparent;
}
th {
 background:transparent;
  color: white;
  font-weight: bold;
}
td,
th {
  padding: 6px;
 
  text-align: left;
vertical-align:top;
}
@media all and (max-width: 800px) {
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }
}

.column {
  float: left;
  width: 45%;
background-color:lavender;


padding:10px;

}



 /* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
  .column {
    width: 100%;
  }
} 

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}